feat(cleanup): automatically cleanup if afterEach is detected

You can disable this with the RTL_SKIP_CLEANUP environment variable if
you so choose, but it's recommended to have cleanup work this way.

Closes #428

Author: Kent C. Dodds

cleanup-after-each.js

@@ -1,3 +1 @@
-afterEach(() => {
-  return require('./dist/cleanup-async')()
-})
+afterEach(() => require('./dist/cleanup-async').default())

src/__tests__/act.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import {render, cleanup, fireEvent} from '../'
-
-afterEach(cleanup)
+import {render, fireEvent} from '../'
 
 test('render calls useEffect immediately', () => {
   const effectCb = jest.fn()

src/__tests__/auto-cleanup.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import {render} from '../'
+
+// This just verifies that by importing RTL in an
+// environment which supports afterEach (like jests)
+// we'll get automatic cleanup between tests.
+test('first', () => {
+  render(<div>hi</div>)
+})
+
+test('second', () => {
+  expect(document.body.innerHTML).toEqual('')
+})

src/__tests__/cleanup-after-each.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {render} from '../index'
+import {render} from '../'
 import cleanupAsync from '../cleanup-async'
 
 afterEach(() => {
@@ -20,13 +20,13 @@ function App() {
   return 123
 }
 
-it('cleanup-after-each does not leave any hanging microtasks: part 1', () => {
+test('cleanup-after-each does not leave any hanging microtasks: part 1', () => {
   render(<App />)
   expect(document.body.textContent).toBe('123')
   expect(log).toEqual([])
 })
 
-it('cleanup-after-each does not leave any hanging microtasks: part 2', () => {
+test('cleanup-after-each does not leave any hanging microtasks: part 2', () => {
   expect(log).toEqual([0])
   expect(document.body.innerHTML).toBe('')
 })

src/__tests__/debug.js

@@ -1,12 +1,11 @@
 import React from 'react'
-import {render, cleanup} from '../'
+import {render} from '../'
 
 beforeEach(() => {
   jest.spyOn(console, 'log').mockImplementation(() => {})
 })
 
 afterEach(() => {
-  cleanup()
   console.log.mockRestore()
 })
 

src/__tests__/end-to-end.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import {render, wait, cleanup} from '../'
-
-afterEach(cleanup)
+import {render, wait} from '../'
 
 const fetchAMessage = () =>
   new Promise(resolve => {

src/__tests__/events.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {render, cleanup, fireEvent} from '../'
+import {render, fireEvent} from '../'
 
 const eventTypes = [
   {
@@ -128,8 +128,6 @@ const eventTypes = [
   },
 ]
 
-afterEach(cleanup)
-
 eventTypes.forEach(({type, events, elementType, init}) => {
   describe(`${type} Events`, () => {
     events.forEach(eventName => {

src/__tests__/multi-base.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {render, cleanup} from '../'
+import {render} from '../'
 
 // these are created once per test suite and reused for each case
 let treeA, treeB
@@ -15,8 +15,6 @@ afterAll(() => {
   treeB.parentNode.removeChild(treeB)
 })
 
-afterEach(cleanup)
-
 test('baseElement isolates trees from one another', () => {
   const {getByText: getByTextInA} = render(<div>Jekyll</div>, {
     baseElement: treeA,

src/__tests__/render.js

@@ -52,7 +52,7 @@ test('returns baseElement which defaults to document.body', () => {
   expect(baseElement).toBe(document.body)
 })
 
-it('cleansup document', () => {
+test('cleanup cleans up document', () => {
   const spy = jest.fn()
   const divId = 'my-div'
 
@@ -73,7 +73,7 @@ it('cleansup document', () => {
   expect(spy).toHaveBeenCalledTimes(1)
 })
 
-it('supports fragments', () => {
+test('supports fragments', () => {
   class Test extends React.Component {
     render() {
       return (
@@ -86,8 +86,6 @@ it('supports fragments', () => {
 
   const {asFragment} = render(<Test />)
   expect(asFragment()).toMatchSnapshot()
-  cleanup()
-  expect(document.body.innerHTML).toBe('')
 })
 
 test('renders options.wrapper around node', () => {

src/__tests__/stopwatch.js

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

src/index.js

@@ -142,6 +142,16 @@ fireEvent.select = (node, init) => {
   fireEvent.keyUp(node, init)
 }
 
+// if we're running in a test runner that supports afterEach
+// then we'll automatically run cleanup afterEach test
+// this ensures that tests run in isolation from each other
+if (typeof afterEach === 'function' && !process.env.RTL_SKIP_CLEANUP) {
+  afterEach(async () => {
+    await asyncAct(async () => {})
+    cleanup()
+  })
+}
+
 // just re-export everything from dom-testing-library
 export * from '@testing-library/dom'
 export {render, cleanup, fireEvent, act}

tests/setup-env.js

@@ -1,6 +1 @@
 import '@testing-library/jest-dom/extend-expect'
-
-afterEach(() => {
-  // have to do a dynamic import so we don't mess up jest mocking for old-act.js
-  require('../src').cleanup()
-})