Remove cleanup references (#213)

* Remove references to cleanup-after-each

This commit removes any references to the cleanup-after-each
file in the react docs as it has been removed. Instructions
for skipping auto cleanup were also added to the docs.

* Remove references to afterEach(cleanup)

This commit removes references to the afterEach function
in the react docs and examples

* Update docs/react-testing-library/setup.md

Co-Authored-By: Kent C. Dodds <[email protected]>

* Update docs/react-testing-library/setup.md

Co-Authored-By: Kent C. Dodds <[email protected]>

* Update docs/react-testing-library/setup.md

Co-Authored-By: Kent C. Dodds <[email protected]>

* Update docs/react-testing-library/setup.md

Co-Authored-By: Kent C. Dodds <[email protected]>

* Add cleanup section back in to api docs

This commit add the cleanup section bac into the api docs
for those that may need to do manual cleanups.

* Update docs/react-testing-library/setup.md

Co-Authored-By: Kent C. Dodds <[email protected]>

* Change api doc example to AVA example

The api docs now show a relevant example using the AVA
testing framework.

* Remove setup paragraph in api docs

This commit removes the paragraph at the end of the
cleanup section in the api docs that talks about
configuring the cleanup globally

Author: dustinmyers

docs/example-input-event.md

@@ -12,7 +12,7 @@ sidebar_label: Input Event
 
 ```jsx
 import React from 'react'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 
 class CostInput extends React.Component {
   state = {
@@ -49,8 +49,6 @@ const setup = () => {
   }
 }
 
-afterEach(cleanup)
-
 test('It should keep a $ in front of the input', () => {
   const { input } = setup()
   fireEvent.change(input, { target: { value: '23' } })

docs/example-reach-router.md

@@ -5,7 +5,7 @@ title: Reach Router
 
 ```jsx
 import React from 'react'
-import { render, cleanup } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import {
   Router,
   Link,
@@ -35,8 +35,6 @@ function App() {
 
 // Ok, so here's what your tests might look like
 
-afterEach(cleanup)
-
 // this is a handy function that I would utilize for any component
 // that relies on the router being in context
 function renderWithRouter(

docs/example-react-context.md

@@ -5,12 +5,10 @@ title: React Context
 
 ```jsx
 import React from 'react'
-import { render, cleanup } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import { NameContext, NameProvider, NameConsumer } from '../react-context'
 
-afterEach(cleanup)
-
 /**
  * Test default values by rendering a context consumer without a
  * matching provider

docs/example-react-hooks-useReducer.md

@@ -57,7 +57,7 @@ based on the reducer state.
 // example.test.js
 
 import React from 'react'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import Example from './example.js'
 
 it('shows success message after confirm button is clicked', () => {

docs/example-react-intl.md

@@ -39,7 +39,7 @@ A complete example:
 ```jsx
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
-import { render, cleanup, getByTestId } from '@testing-library/react'
+import { render, getByTestId } from '@testing-library/react'
 import { IntlProvider, FormattedDate } from 'react-intl'
 import IntlPolyfill from 'intl'
 import 'intl/locale-data/jsonp/pt'
@@ -73,7 +73,6 @@ const renderWithReactIntl = component => {
 }
 
 setupTests()
-afterEach(cleanup)
 
 test('it should render FormattedDate and have a formated pt date', () => {
   const { container } = renderWithReactIntl(<FormatDateView />)

docs/example-react-redux.md

@@ -65,11 +65,10 @@ Now here's what your test will look like:
 import React from 'react'
 import { createStore } from 'redux'
 import { Provider } from 'react-redux'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 import { initialState, reducer } from './reducer.js'
 import Counter from './counter.js'
 
-afterEach(cleanup)
 
 // this is a handy function that I normally make available for all my tests
 // that deal with connected components.

docs/example-react-router.md

@@ -8,7 +8,7 @@ import React from 'react'
 import { withRouter } from 'react-router'
 import { Link, Route, Router, Switch } from 'react-router-dom'
 import { createMemoryHistory } from 'history'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 
 const About = () => <div>You are on the about page</div>
 const Home = () => <div>You are home</div>
@@ -35,8 +35,6 @@ function App() {
 
 // Ok, so here's what your tests might look like
 
-afterEach(cleanup)
-
 // this is a handy function that I would utilize for any component
 // that relies on the router being in context
 function renderWithRouter(

docs/example-react-transition-group.md

@@ -8,7 +8,7 @@ title: React Transition Group
 ```jsx
 import React from 'react'
 import { CSSTransition } from 'react-transition-group'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 
 function Fade({ children, ...props }) {
   return (
@@ -35,8 +35,6 @@ class HiddenMessage extends React.Component {
   }
 }
 
-afterEach(cleanup)
-
 jest.mock('react-transition-group', () => {
   const FakeTransition = jest.fn(({ children }) => children)
   const FakeCSSTransition = jest.fn(props =>
@@ -64,7 +62,7 @@ test('you can mock things with jest.mock', () => {
 ```jsx
 import React from 'react'
 import { CSSTransition } from 'react-transition-group'
-import { render, fireEvent, cleanup } from '@testing-library/react'
+import { render, fireEvent } from '@testing-library/react'
 
 function Fade({ children, ...props }) {
   return (
@@ -91,8 +89,6 @@ class HiddenMessage extends React.Component {
   }
 }
 
-afterEach(cleanup)
-
 jest.mock('react-transition-group', () => {
   const FakeCSSTransition = jest.fn(() => null)
   return { CSSTransition: FakeCSSTransition }

docs/example-update-props.md

@@ -10,7 +10,7 @@ sidebar_label: Update Props
 // that your first call created for you.
 
 import React from 'react'
-import { render, cleanup } from '@testing-library/react'
+import { render } from '@testing-library/react'
 
 let idCounter = 1
 
@@ -26,8 +26,6 @@ class NumberDisplay extends React.Component {
   }
 }
 
-afterEach(cleanup)
-
 test('calling render with the same component on the same container does not remount', () => {
   const { getByTestId, rerender } = render(<NumberDisplay number={1} />)
   expect(getByTestId('number-display').textContent).toBe('1')

docs/react-testing-library/api.md

@@ -32,9 +32,8 @@ render(<div />)
 ```
 
 ```jsx
-import { render, cleanup } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
-afterEach(cleanup)
 
 test('renders a message', () => {
   const { container, getByText } = render(<Greeting />)
@@ -45,11 +44,6 @@ test('renders a message', () => {
 })
 ```
 
-> Note
->
-> The [cleanup](#cleanup) function should be called between tests to remove the
-> created DOM nodes and keep the tests isolated.
-
 ## `render` Options
 
 You won't often need to specify options, but if you ever do, here are the
@@ -256,10 +250,18 @@ expect(firstRender).toMatchDiffSnapshot(asFragment())
 
 Unmounts React trees that were mounted with [render](#render).
 
+> Please note that this is done automatically if the testing framework you're
+> using supports the `afterEach` global (like mocha, Jest, and Jasmine). If not,
+> you will need to do manual cleanups after each test.
+
+For example, if you're using the [ava](https://github.com/avajs/ava) testing
+framework, then you would need to use the `test.afterEach` hook like so:
+
 ```jsx
 import { cleanup, render } from '@testing-library/react'
+import test from 'ava'
 
-afterEach(cleanup) // <-- add this
+test.afterEach(cleanup)
 
 test('renders into document', () => {
   render(<div />)
@@ -273,11 +275,6 @@ Failing to call `cleanup` when you've called `render` could result in a memory
 leak and tests which are not "idempotent" (which can lead to difficult to debug
 errors in your tests).
 
-**If you don't want to add this to _every single test file_** then we recommend
-that you configure your test framework to run a file before your tests which
-does this automatically. See the [setup](./setup) section for guidance on how to
-set up your framework.
-
 ---
 
 ## `act`

docs/react-testing-library/example-intro.md

@@ -14,15 +14,12 @@ import React from 'react'
 import {
   render,
   fireEvent,
-  cleanup,
   waitForElement,
 } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
 import axiosMock from 'axios'
 import Fetch from '../fetch'
 
-afterEach(cleanup)
-
 test('loads and displays greeting', async () => {
   const url = '/greeting'
   const { getByText, getByTestId } = render(<Fetch url={url} />)
@@ -58,7 +55,6 @@ import React from 'react'
 import {
   render,
   fireEvent,
-  cleanup,
   waitForElement,
 } from '@testing-library/react'
 
@@ -74,9 +70,6 @@ import Fetch from '../fetch'
 ```
 
 ```jsx
-// automatically unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
 test('loads and displays greeting', async () => {
   // Arrange
   // Act

docs/react-testing-library/faq.md

@@ -17,7 +17,6 @@ In summary:
 
 ```javascript
 import React from 'react'
-import '@testing-library/react/cleanup-after-each'
 import { render, fireEvent } from '@testing-library/react'
 
 test('change values via the fireEvent.change method', () => {

docs/react-testing-library/setup.md

@@ -16,59 +16,6 @@ does not require that you use Jest).
 Adding options to your global test config can simplify the setup and teardown of
 tests in individual files.
 
-### Cleanup
-
-You can ensure [`cleanup`](./api#cleanup) is called after each test and import
-additional assertions by adding it to the setup configuration in Jest.
-
-In Jest 24 and up, add the
-[`setupFilesAfterEnv`](https://jestjs.io/docs/en/configuration.html#setupfilesafterenv-array)
-option to your Jest config:
-
-```javascript
-// jest.config.js
-module.exports = {
-  setupFilesAfterEnv: [
-    '@testing-library/react/cleanup-after-each',
-    // ... other setup files ...
-  ],
-  // ... other options ...
-}
-```
-
-<details>
-
-<summary>Older versions of Jest</summary>
-
-Jest versions 23 and below use the
-[`setupTestFrameworkScriptFile`](https://jestjs.io/docs/en/23.x/configuration#setuptestframeworkscriptfile-string)
-option in your Jest config instead of `setupFilesAfterEnv`. This setup file can
-be anywhere, for example `jest.setup.js` or `./utils/setupTests.js`.
-
-If you are using the default setup from create-react-app, this option is set to
-`src/setupTests.js`. You should create this file if it doesn't exist and put the
-setup code there.
-
-```javascript
-// jest.config.js
-module.exports = {
-  setupTestFrameworkScriptFile: require.resolve('./jest.setup.js'),
-  // ... other options ...
-}
-```
-
-```javascript
-// jest.setup.js
-
-// add some helpful assertions
-import '@testing-library/jest-dom/extend-expect'
-
-// this is basically: afterEach(cleanup)
-import '@testing-library/react/cleanup-after-each'
-```
-
-</details>
-
 ## Custom Render
 
 It's often useful to define a custom render method that includes things like
@@ -257,7 +204,7 @@ module.exports = {
 }
 ```
 
-*Typescript config needs to be updated as follow:*
+_Typescript config needs to be updated as follow:_
 
 ```diff
 // tsconfig.json
@@ -272,8 +219,6 @@ module.exports = {
 }
 ```
 
-
-
 ### Jest and Create React App
 
 If your project is based on top of Create React App, to make the `test-utils`
@@ -328,3 +273,15 @@ mocha --require jsdom-global/register
 Note, depending on the version of Node you're running, you may also need to
 install @babel/polyfill (if you're using babel 7) or babel-polyfill (for babel
 6).
+
+### Skipping Auto Cleanup
+
+[`Cleanup`](./api#cleanup) is called after each test automatically by default if
+the testing framework you're using supports the `afterEach` global (like mocha,
+Jest, and Jasmine). However, you may choose to skip the auto cleanup by setting
+the `RTL_SKIP_AUTO_CLEANUP` env variable to 'true'. You can do this with
+[`cross-env`](https://github.com/kentcdodds/cross-env) like so:
+
+```
+cross-env RTL_SKIP_AUTO_CLEANUP=true jest
+```