feat: export container from render (#567)

* feat: export root test instance from render

* test: add tests for root test instance returned from render function

* docs: add description about root test instance returned from render function

* feat: change root export to container and wrap component in View if no wrapper defined

* docs: update description about container test instance returned from render function

* test: update tests for root test instance returned from render function

* test: clean up comments in tests

* feat: add react-native as peerDependency, clean up lint ignore for lines that was importing react-native

* revert adding default wrapper

* rework tests

* reword docs

* add testID checks

* add comments

Co-authored-by: Michał Pierzchała <[email protected]>

Author: klekowskim

package.json

@@ -56,6 +56,7 @@
   },
   "peerDependencies": {
     "react": ">=16.0.0",
+    "react-native": ">=0.59",
     "react-test-renderer": ">=16.0.0"
   },
   "scripts": {

src/__tests__/render.test.js

@@ -382,3 +382,29 @@ test('renders options.wrapper around updated node', () => {
     </RCTSafeAreaView>
   `);
 });
+
+test('returns container', () => {
+  const { container } = render(<View testID="inner" />);
+
+  expect(container).toBeDefined();
+  // `View` composite component is returned. This behavior will break if we
+  // start returning only host components.
+  expect(container.type).toBe(View);
+  expect(container.props.testID).toBe('inner');
+});
+
+test('returns wrapped component as container', () => {
+  const WrapperComponent = ({ children }) => (
+    <SafeAreaView testID="wrapper">{children}</SafeAreaView>
+  );
+
+  const { container } = render(<View testID="inner" />, {
+    wrapper: WrapperComponent,
+  });
+
+  expect(container).toBeDefined();
+  // `WrapperComponent` composite component is returned with no testID passed to
+  // it. This behavior will break if we start returning only host components.
+  expect(container.type).toBe(WrapperComponent);
+  expect(container.props.testID).not.toBeDefined();
+});

src/fireEvent.js

@@ -7,7 +7,6 @@ const isHostElement = (element?: ReactTestInstance) => {
 };
 
 const isTextInput = (element?: ReactTestInstance) => {
-  // eslint-disable-next-line import/no-extraneous-dependencies
   const { TextInput } = require('react-native');
   return element?.type === TextInput;
 };

src/helpers/getByAPI.js

@@ -13,7 +13,6 @@ const filterNodeByType = (node, type) => node.type === type;
 
 const getNodeByText = (node, text) => {
   try {
-    // eslint-disable-next-line
     const { Text } = require('react-native');
     const isTextComponent = filterNodeByType(node, Text);
     if (isTextComponent) {
@@ -61,7 +60,6 @@ const getChildrenAsText = (children, TextComponent, textContent = []) => {
 
 const getTextInputNodeByPlaceholderText = (node, placeholder) => {
   try {
-    // eslint-disable-next-line
     const { TextInput } = require('react-native');
     return (
       filterNodeByType(node, TextInput) &&
@@ -76,7 +74,6 @@ const getTextInputNodeByPlaceholderText = (node, placeholder) => {
 
 const getTextInputNodeByDisplayValue = (node, value) => {
   try {
-    // eslint-disable-next-line
     const { TextInput } = require('react-native');
     return (
       filterNodeByType(node, TextInput) &&

src/render.js

@@ -44,6 +44,7 @@ export default function render<T>(
     ...findByAPI(instance),
     ...a11yAPI(instance),
     update,
+    container: instance,
     rerender: update, // alias for `update`
     unmount: renderer.unmount,
     toJSON: renderer.toJSON,

website/docs/API.md

@@ -118,6 +118,14 @@ toJSON(): ReactTestRendererJSON | null
 
 Get the rendered component JSON representation, e.g. for snapshot testing.
 
+### `container`
+
+```ts
+container: ReactTestInstance;
+```
+
+A reference to the rendered root element.
+
 ## `cleanup`
 
 ```ts