feat: prepare rc.1

Author: bcarroll22

cleanup-after-each.js

@@ -0,0 +1 @@
+afterEach(require('./dist').cleanup);

package.json

@@ -5,8 +5,9 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist/**",
+    "dist",
     "typings",
+    "cleanup-after-each.js",
     "jest-preset.js"
   ],
   "engines": {

src/__tests__/__snapshots__/fetch.js.snap

@@ -1,16 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Fetch makes an API call and displays the greeting when load-greeting is clicked 1`] = `
-<View>
-  <TouchableOpacity
-    activeOpacity={0.2}
-  >
+<View
+  testID="ntl-container"
+>
+  <View>
+    <TouchableOpacity
+      activeOpacity={0.2}
+    >
+      <Text>
+        Fetch
+      </Text>
+    </TouchableOpacity>
     <Text>
-      Fetch
+      hello there
     </Text>
-  </TouchableOpacity>
-  <Text>
-    hello there
-  </Text>
+  </View>
 </View>
 `;

src/__tests__/act.js

@@ -2,7 +2,9 @@ import React from 'react';
 import 'jest-native/extend-expect';
 import { Button } from 'react-native';
 
-import { render, fireEvent } from '../';
+import { cleanup, render, fireEvent } from '../';
+
+afterEach(cleanup);
 
 test('render calls useEffect immediately', () => {
   const effectCb = jest.fn();

src/__tests__/bugs.js

@@ -1,7 +1,9 @@
-import { queryAllByProp } from '../lib';
-import { render } from '../index';
-import { Text, View } from 'react-native';
 import React from 'react';
+import { Text, View } from 'react-native';
+
+import { cleanup, render, queryAllByProp } from '../';
+
+afterEach(cleanup);
 
 // This is to ensure custom queries can be passed to render. In most cases, you
 // wouldn't/shouldn't need to do this, but we do allow it so we'll test to

src/__tests__/debug.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Text } from 'react-native';
 
-import { render } from '../';
+import { cleanup, render } from '../';
+
+afterEach(cleanup);
 
 beforeEach(() => {
   jest.spyOn(console, 'log').mockImplementation(() => {});

src/__tests__/end-to-end.js

@@ -2,7 +2,9 @@ import React from 'react';
 import 'jest-native/extend-expect';
 import { Text } from 'react-native';
 
-import { render, wait } from '../';
+import { cleanup, render, wait } from '../';
+
+afterEach(cleanup);
 
 const fetchAMessage = () =>
   new Promise(resolve => {

src/__tests__/events.js

@@ -2,7 +2,9 @@ import React from 'react';
 import 'jest-native/extend-expect';
 import { Button, Image, Text, TextInput, TouchableHighlight } from 'react-native';
 
-import { render, fireEvent, eventMap, NativeEvent, getEventHandlerName, wait } from '../';
+import { cleanup, render, fireEvent, eventMap, NativeEvent, getEventHandlerName, wait } from '../';
+
+afterEach(cleanup);
 
 Object.keys(eventMap).forEach(key => {
   const handlerName = getEventHandlerName(key);
@@ -11,20 +13,27 @@ Object.keys(eventMap).forEach(key => {
     const config = eventMap[key];
 
     config.validTargets.forEach(element => {
-      const handler = jest.fn();
-      const { container } = render(React.createElement(element, { [handlerName]: handler }));
+      const spy = jest.fn();
+
+      const { getByTestId } = render(
+        React.createElement(element, {
+          [handlerName]: spy,
+        }),
+      );
 
-      fireEvent[key](container);
+      const target = getByTestId('ntl-container').children[0];
+      fireEvent[key](target);
 
-      expect(handler).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledTimes(1);
     });
   });
 });
 
 test('onChange works', () => {
   const handleChange = jest.fn();
-  const { container } = render(<TextInput onChange={handleChange} />);
-  fireEvent.change(container, { target: { value: 'a' } });
+  const { getByTestId } = render(<TextInput onChange={handleChange} />);
+  const target = getByTestId('ntl-container').children[0];
+  fireEvent.change(target, { target: { value: 'a' } });
   expect(handleChange).toHaveBeenCalledTimes(1);
 });
 
@@ -66,9 +75,10 @@ test('assigns target properties', async () => {
 
 test('calling `fireEvent` directly works too', () => {
   const handleEvent = jest.fn();
-  const { container } = render(<Button onPress={handleEvent} title="test" />);
+  const { getByTestId } = render(<Button onPress={handleEvent} title="test" />);
 
-  fireEvent(container, new NativeEvent('press'));
+  const target = getByTestId('ntl-container').children[0];
+  fireEvent(target, new NativeEvent('press'));
   expect(handleEvent).toBeCalledTimes(1);
 });
 
@@ -77,8 +87,9 @@ test('calling a custom event works as well', () => {
   const onMyEvent = jest.fn(({ nativeEvent }) => expect(nativeEvent).toEqual({ value: 'testing' }));
   const MyComponent = ({ onMyEvent }) => <TextInput value="test" onChange={onMyEvent} />;
 
-  const { container } = render(<MyComponent onMyEvent={onMyEvent} />);
-  fireEvent(container, new NativeEvent('myEvent', event));
+  const { getByTestId } = render(<MyComponent onMyEvent={onMyEvent} />);
+  const target = getByTestId('ntl-container').children[0];
+  fireEvent(target, new NativeEvent('myEvent', event));
 
   expect(onMyEvent).toHaveBeenCalledWith({
     nativeEvent: { value: 'testing' },

src/__tests__/fetch.js

@@ -2,7 +2,9 @@ import React from 'react';
 import 'jest-native/extend-expect';
 import { TouchableOpacity, Text, View } from 'react-native';
 
-import { render, fireEvent, toJSON, wait } from '../';
+import { cleanup, render, fireEvent, toJSON, wait } from '../';
+
+afterEach(cleanup);
 
 global.fetch = require('jest-fetch-mock');
 

src/__tests__/forms.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Button, TextInput, View } from 'react-native';
-import { render, fireEvent } from '../';
+import { cleanup, render, fireEvent } from '../';
+
+afterEach(cleanup);
 
 function Login({ onSubmit, user }) {
   return (

src/__tests__/misc.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Picker } from 'react-native';
 
-import { fireEvent, render } from '../';
+import { cleanup, fireEvent, render } from '../';
+
+afterEach(cleanup);
 
 test('picker works', () => {
   function Wrapper() {

src/__tests__/render.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { View } from 'react-native';
-import { toJSON, render } from '../';
+import { cleanup, toJSON, render } from '../';
+
+afterEach(cleanup);
 
 test('renders View', () => {
   const { container } = render(<View />);
@@ -21,12 +23,16 @@ test('renders options.wrapper around node', () => {
 
   expect(getByTestId('wrapper')).toBeTruthy();
   expect(toJSON(container)).toMatchInlineSnapshot(`
-<View
-  testID="wrapper"
->
-  <View
-    testID="inner"
-  />
-</View>
-`);
+    <View
+      testID="ntl-container"
+    >
+      <View
+        testID="wrapper"
+      >
+        <View
+          testID="inner"
+        />
+      </View>
+    </View>
+  `);
 });

src/__tests__/rerender.js

@@ -2,7 +2,9 @@ import React from 'react';
 import 'jest-native/extend-expect';
 import { Text } from 'react-native';
 
-import { render } from '../';
+import { cleanup, render } from '../';
+
+afterEach(cleanup);
 
 test('rerender will re-render the element', () => {
   const Greeting = props => <Text>{props.message}</Text>;

src/__tests__/stopwatch.js

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Button, Text, View } from 'react-native';
 
-import { render, fireEvent, toJSON } from '../';
+import { cleanup, render, fireEvent, toJSON } from '../';
+
+afterEach(cleanup);
 
 class StopWatch extends React.Component {
   state = { lapse: 0, running: false };

src/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
+import { View } from 'react-native';
 import TR from 'react-test-renderer';
+import AppContainer from 'react-native/Libraries/ReactNative/AppContainer';
 
 import {
   toJSON,
@@ -8,22 +10,44 @@ import {
   NativeEvent,
   prettyPrint,
   proxyUnsafeProperties,
+  validComponentFilter,
 } from './lib';
 import act from './act-compat';
 
+const containerId = 'ntl-container';
+const renderers = new Set();
+
 function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
   const wrapUiIfNeeded = innerElement =>
-    WrapperComponent ? <WrapperComponent>{innerElement}</WrapperComponent> : innerElement;
+    WrapperComponent ? (
+      <AppContainer>
+        <View testID={containerId}>
+          <WrapperComponent>{innerElement}</WrapperComponent>
+        </View>
+      </AppContainer>
+    ) : (
+      <AppContainer>
+        <View testID={containerId}>{innerElement}</View>
+      </AppContainer>
+    );
 
   let testRenderer;
 
   act(() => {
     testRenderer = TR.create(wrapUiIfNeeded(ui), options);
   });
 
+  renderers.add(testRenderer);
+
+  const baseElement = proxyUnsafeProperties(testRenderer.root);
+  const container = baseElement
+    .findAll(c => validComponentFilter(c))
+    .filter(n => n.getProp('testID') === containerId)[0];
+
   return {
-    container: proxyUnsafeProperties(testRenderer.root),
-    debug: (el = testRenderer.root) => console.log(prettyPrint(toJSON(el))),
+    baseElement,
+    container,
+    debug: (el = baseElement) => console.log(prettyPrint(toJSON(el))),
     unmount: () => testRenderer.unmount(),
     rerender: rerenderUi => {
       act(() => {
@@ -34,6 +58,15 @@ function render(ui, { options = {}, wrapper: WrapperComponent, queries } = {}) {
   };
 }
 
+function cleanup() {
+  renderers.forEach(cleanupRenderer);
+}
+
+function cleanupRenderer(renderer) {
+  renderer.unmount();
+  renderers.delete(renderer);
+}
+
 function fireEvent(...args) {
   let returnValue;
   act(() => {
@@ -53,4 +86,4 @@ Object.keys(rntlFireEvent).forEach(key => {
 });
 
 export * from './lib';
-export { act, fireEvent, render, NativeEvent };
+export { act, cleanup, fireEvent, render, NativeEvent };