feat: Breaking changes for v2

README.md

@@ -118,11 +118,12 @@ The [public API](https://callstack.github.io/react-native-testing-library/docs/a
 
 - [`render`](https://callstack.github.io/react-native-testing-library/docs/api#render) – deeply renders given React element and returns helpers to query the output components.
 - [`fireEvent`](https://callstack.github.io/react-native-testing-library/docs/api#fireevent) - invokes named event handler on the element.
-- [`waitForElement`](https://callstack.github.io/react-native-testing-library/docs/api#waitforelement) - waits for non-deterministic periods of time until your element appears or times out.
+- [`waitFor`](https://callstack.github.io/react-native-testing-library/docs/api#waitfor) - waits for non-deterministic periods of time until your element appears or times out.
 - [`within`](https://callstack.github.io/react-native-testing-library/docs/api#within) - creates a queries object scoped for given element.
-- [`flushMicrotasksQueue`](https://callstack.github.io/react-native-testing-library/docs/api#flushmicrotasksqueue) - waits for microtasks queue to flush.
 
-**Note to users who are more familiar with `react-testing-library`:** This API does not expose `cleanup` because it doesn't interact with the DOM. There's nothing to clean up.
+## Migration Guides
+
+- [Migration to 2.0](https://callstack.github.io/react-native-testing-library/docs/migration-v2)
 
 ## Made with ❤️ at Callstack
 

babel.config.js

@@ -1,3 +1,16 @@
 module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
+  presets: [
+    '@babel/preset-flow',
+    '@babel/preset-react',
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: '10',
+        },
+        bugfixes: true,
+      },
+    ],
+  ],
+  plugins: ['@babel/plugin-proposal-class-properties'],
 };

dont-cleanup-after-each.js

@@ -0,0 +1 @@
+process.env.RNTL_SKIP_AUTO_CLEANUP = true;

examples/reactnavigation/src/__tests__/AppNavigator.test.js

@@ -1,15 +1,13 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
-import { render, fireEvent, cleanup } from 'react-native-testing-library';
+import { render, fireEvent } from 'react-native-testing-library';
 
 import AppNavigator from '../AppNavigator';
 
 // Silence the warning https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
 jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
 
 describe('Testing react navigation', () => {
-  afterEach(cleanup);
-
   test('page contains the header and 10 items', () => {
     const component = (
       <NavigationContainer>

examples/redux/components/AddTodo.test.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { cleanup, fireEvent, render } from 'react-native-testing-library';
+import { fireEvent, render } from 'react-native-testing-library';
 import configureStore from '../store';
 import AddTodo from './AddTodo';
 
 describe('Application test', () => {
-  afterEach(cleanup);
-
   test('adds a new test when entry has been included', () => {
     const store = configureStore();
 

examples/redux/components/TodoList.test.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import { cleanup, fireEvent, render } from 'react-native-testing-library';
+import { fireEvent, render } from 'react-native-testing-library';
 import configureStore from '../store';
 import TodoList from './TodoList';
 
 describe('Application test', () => {
-  afterEach(cleanup);
-
   test('it should execute with a store with 4 elements', () => {
     const initialState = {
       todos: [

examples/redux/reducers/todoReducer.js

@@ -6,7 +6,6 @@ export default function todoReducer(state = [], action) {
       return state.concat(action.payload);
 
     case actions.REMOVE:
-      console.log(action);
       return state.filter((todo) => todo.id !== action.payload.id);
 
     case actions.MODIFY:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-testing-library",
-  "version": "1.14.0",
+  "version": "2.0.0-rc.1",
   "description": "Simple React Native testing utilities helping you write better tests with less effort",
   "main": "build/index.js",
   "typings": "./typings/index.d.ts",
@@ -21,6 +21,10 @@
   "devDependencies": {
     "@babel/cli": "^7.8.4",
     "@babel/core": "^7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-flow": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
     "@callstack/eslint-config": "^10.0.0",
     "@release-it/conventional-changelog": "^1.1.0",
     "@testing-library/jest-native": "~3.1.0",
@@ -34,7 +38,6 @@
     "flow-bin": "^0.122.0",
     "flow-copy-source": "^2.0.9",
     "jest": "^26.0.1",
-    "metro-react-native-babel-preset": "^0.58.0",
     "react": "^16.13.1",
     "react-native": "^0.63.0-rc.1",
     "react-test-renderer": "^16.13.1",

pure.js

@@ -0,0 +1,2 @@
+// makes it so people can import from 'react-native-testing-library/pure'
+module.exports = require('./build/pure');

src/__tests__/__snapshots__/render.test.js.snap

@@ -150,12 +150,12 @@ exports[`debug: shallow 1`] = `
     underlineColorAndroid=\\"transparent\\"
     value=\\"I inspected freshie\\"
   />
-  <Button
+  <MyButton
     onPress={[Function anonymous]}
     type=\\"primary\\"
   >
     Change freshness!
-  </Button>
+  </MyButton>
   <Text
     testID=\\"duplicateText\\"
   >
@@ -200,12 +200,12 @@ exports[`debug: shallow with message 1`] = `
     underlineColorAndroid=\\"transparent\\"
     value=\\"I inspected freshie\\"
   />
-  <Button
+  <MyButton
     onPress={[Function anonymous]}
     type=\\"primary\\"
   >
     Change freshness!
-  </Button>
+  </MyButton>
   <Text
     testID=\\"duplicateText\\"
   >

src/__tests__/auto-cleanup-skip.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+
+let render;
+beforeAll(() => {
+  process.env.RNTL_SKIP_AUTO_CLEANUP = 'true';
+  const rtl = require('../');
+  render = rtl.render;
+});
+
+let isMounted = false;
+
+class Test extends React.Component<*> {
+  componentDidMount() {
+    isMounted = true;
+  }
+
+  componentWillUnmount() {
+    isMounted = false;
+    if (this.props.onUnmount) {
+      this.props.onUnmount();
+    }
+  }
+  render() {
+    return <View />;
+  }
+}
+
+// This just verifies that by importing RNTL in pure mode in an environment which supports
+// afterEach (like jest) we won't get automatic cleanup between tests.
+test('component is mounted, but not umounted before test ends', () => {
+  const fn = jest.fn();
+  render(<Test onUnmount={fn} />);
+  expect(fn).not.toHaveBeenCalled();
+});
+
+test('component is NOT automatically umounted after first test ends', () => {
+  expect(isMounted).toEqual(true);
+});

src/__tests__/auto-cleanup.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { View } from 'react-native';
+import { render } from '..';
+
+let isMounted = false;
+
+class Test extends React.Component<*> {
+  componentDidMount() {
+    isMounted = true;
+  }
+
+  componentWillUnmount() {
+    isMounted = false;
+    if (this.props.onUnmount) {
+      this.props.onUnmount();
+    }
+  }
+  render() {
+    return <View />;
+  }
+}
+
+// This just verifies that by importing RNTL in an environment which supports afterEach (like jest)
+// we'll get automatic cleanup between tests.
+test('component is mounted, but not umounted before test ends', () => {
+  const fn = jest.fn();
+  render(<Test onUnmount={fn} />);
+  expect(fn).not.toHaveBeenCalled();
+});
+
+test('component is automatically umounted after first test ends', () => {
+  expect(isMounted).toEqual(false);
+});

src/__tests__/cleanup.test.js

@@ -2,7 +2,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
 import { View } from 'react-native';
-import { cleanup, render } from '..';
+import { cleanup, render } from '../pure';
 
 class Test extends React.Component<*> {
   componentWillUnmount() {