feat: call "cleanup" automatically (#238)

* feat: add "cleanup" function

* docs: add "cleanup" section

* feat: automatically call "cleanup" after each test

...if an "afterEach" global function is defined, and process.env.RTL_SKIP_AUTO_CLEANUP is falsy.

Taken from: https://github.com/testing-library/react-testing-library/blob/14670debd45236d2c5d0a61a83dadc72af1bef7c/src/index.js

* docs: mention automatic cleanup

* add within

* fix lint

* Updated tests, added auto-cleanup test

* Added ways to prevent auto cleanup

* Small fix

* Code review changes

* Update website/docs/API.md

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

* More changes

* Removed  afterEach(cleanup) calls in examples

* Code cleanup

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

Author: 3 people

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:

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__/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() {

src/__tests__/waitFor.test.js

@@ -55,6 +55,10 @@ test('waits for element until timeout is met', async () => {
   await expect(
     waitFor(() => getByText('Fresh'), { timeout: 100 })
   ).rejects.toThrow();
+
+  // Async action ends after 300ms and we only waited 100ms, so we need to wait
+  // for the remaining async actions to finish
+  await waitFor(() => getByText('Fresh'));
 });
 
 test('waits for element with custom interval', async () => {