diff --git a/docs/example-input-event.md b/docs/example-input-event.md index 5d25ee3e9..9be077656 100644 --- a/docs/example-input-event.md +++ b/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' } }) diff --git a/docs/example-reach-router.md b/docs/example-reach-router.md index a4e40447b..1767c3823 100644 --- a/docs/example-reach-router.md +++ b/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( diff --git a/docs/example-react-context.md b/docs/example-react-context.md index ca65223bc..fc0cf8adb 100644 --- a/docs/example-react-context.md +++ b/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 diff --git a/docs/example-react-hooks-useReducer.md b/docs/example-react-hooks-useReducer.md index 5eb9f407b..50dcf5d86 100644 --- a/docs/example-react-hooks-useReducer.md +++ b/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', () => { diff --git a/docs/example-react-intl.md b/docs/example-react-intl.md index 6f07757d6..1fa954bd0 100644 --- a/docs/example-react-intl.md +++ b/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() diff --git a/docs/example-react-redux.md b/docs/example-react-redux.md index c753d9814..e4bcb90ae 100644 --- a/docs/example-react-redux.md +++ b/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. diff --git a/docs/example-react-router.md b/docs/example-react-router.md index 85e8e5431..fcb9a2d2f 100644 --- a/docs/example-react-router.md +++ b/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 = () =>
You are on the about page
const Home = () =>
You are home
@@ -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( diff --git a/docs/example-react-transition-group.md b/docs/example-react-transition-group.md index 6b9773158..2ea5f82f7 100644 --- a/docs/example-react-transition-group.md +++ b/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 } diff --git a/docs/example-update-props.md b/docs/example-update-props.md index 9fcf8cec5..e7d8cced9 100644 --- a/docs/example-update-props.md +++ b/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() expect(getByTestId('number-display').textContent).toBe('1') diff --git a/docs/react-testing-library/api.md b/docs/react-testing-library/api.md index 481da431f..c00ffd9e9 100644 --- a/docs/react-testing-library/api.md +++ b/docs/react-testing-library/api.md @@ -32,9 +32,8 @@ render(
) ``` ```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() @@ -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(
) @@ -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` diff --git a/docs/react-testing-library/example-intro.md b/docs/react-testing-library/example-intro.md index b3e3571e8..c3c38ff91 100644 --- a/docs/react-testing-library/example-intro.md +++ b/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() @@ -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 diff --git a/docs/react-testing-library/faq.md b/docs/react-testing-library/faq.md index af1b7afa9..c88aed34d 100644 --- a/docs/react-testing-library/faq.md +++ b/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', () => { diff --git a/docs/react-testing-library/setup.md b/docs/react-testing-library/setup.md index 24b9ffc27..3f20048ff 100644 --- a/docs/react-testing-library/setup.md +++ b/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 ... -} -``` - -
- -Older versions of Jest - -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' -``` - -
- ## 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 +```