test: Update tests to be compatible with Jest 27 (#639)

* chore(deps-dev): bump kcd-scripts from 10.0.0 to 11.1.0

Bumps [kcd-scripts](https://github.com/kentcdodds/kcd-scripts) from 10.0.0 to 11.1.0.
- [Release notes](https://github.com/kentcdodds/kcd-scripts/releases)
- [Changelog](https://github.com/kentcdodds/kcd-scripts/blob/main/CHANGELOG.md)
- [Commits](kentcdodds/kcd-scripts@v10.0.0...v11.1.0)

---
updated-dependencies:
- dependency-name: kcd-scripts
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* test: Update tests to be compatible with Jest 27

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Author: mpeyper

package.json

@@ -61,7 +61,7 @@
     "docz-theme-default": "1.2.0",
     "docz-utils": "2.3.0",
     "eslint": "7.28.0",
-    "kcd-scripts": "10.0.0",
+    "kcd-scripts": "11.1.0",
     "prettier": "^2.2.1",
     "react": "17.0.2",
     "react-dom": "^17.0.1",

src/__tests__/defaultRenderer.pure.test.ts

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { ReactHooksRenderer } from '../types/react'
+
+describe('default renderer', () => {
+  beforeEach(() => {
+    jest.resetModules()
+  })
+
+  test('should resolve native renderer as default renderer', () => {
+    const expectedRenderer = require('../native/pure') as ReactHooksRenderer
+    const actualRenderer = require('../pure') as ReactHooksRenderer
+
+    expect(actualRenderer).toEqual(expectedRenderer)
+  })
+
+  test('should resolve dom renderer as default renderer', () => {
+    jest.doMock('react-test-renderer', () => {
+      throw new Error('missing dependency')
+    })
+
+    const expectedRenderer = require('../dom/pure') as ReactHooksRenderer
+    const actualRenderer = require('../pure') as ReactHooksRenderer
+
+    expect(actualRenderer).toEqual(expectedRenderer)
+  })
+
+  test('should throw error if a default renderer cannot be resolved', () => {
+    jest.doMock('react-test-renderer', () => {
+      throw new Error('missing dependency')
+    })
+
+    jest.doMock('react-dom', () => {
+      throw new Error('missing dependency')
+    })
+
+    const expectedMessage =
+      "Could not auto-detect a React renderer. Are you sure you've installed one of the following\n  - react-dom\n  - react-test-renderer\nIf you are using a bundler, please update your imports to use a specific renderer.\nFor instructions see: https://react-hooks-testing-library.com/installation#being-specific"
+
+    expect(() => require('../pure')).toThrowError(new Error(expectedMessage))
+  })
+})

src/__tests__/defaultRenderer.test.ts

@@ -1,41 +1,8 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import { ReactHooksRenderer } from '../types/react'
+import * as actualRenderer from '..'
+import * as expectedRenderer from '../native'
 
 describe('default renderer', () => {
-  beforeEach(() => {
-    jest.resetModules()
-  })
-
   test('should resolve native renderer as default renderer', () => {
-    const expectedRenderer = require('../native/pure') as ReactHooksRenderer
-    const actualRenderer = require('..') as ReactHooksRenderer
-
     expect(actualRenderer).toEqual(expectedRenderer)
   })
-
-  test('should resolve dom renderer as default renderer', () => {
-    jest.doMock('react-test-renderer', () => {
-      throw new Error('missing dependency')
-    })
-
-    const expectedRenderer = require('../dom/pure') as ReactHooksRenderer
-    const actualRenderer = require('..') as ReactHooksRenderer
-
-    expect(actualRenderer).toEqual(expectedRenderer)
-  })
-
-  test('should throw error if a default renderer cannot be resolved', () => {
-    jest.doMock('react-test-renderer', () => {
-      throw new Error('missing dependency')
-    })
-
-    jest.doMock('react-dom', () => {
-      throw new Error('missing dependency')
-    })
-
-    const expectedMessage =
-      "Could not auto-detect a React renderer. Are you sure you've installed one of the following\n  - react-dom\n  - react-test-renderer\nIf you are using a bundler, please update your imports to use a specific renderer.\nFor instructions see: https://react-hooks-testing-library.com/installation#being-specific"
-
-    expect(() => require('..')).toThrowError(new Error(expectedMessage))
-  })
 })

src/dom/__tests__/autoCleanup.disabled.test.ts

@@ -6,12 +6,8 @@ import { ReactHooksRenderer } from '../../types/react'
 // then we DON'T auto-wire up the afterEach for folks
 describe('skip auto cleanup (disabled) tests', () => {
   let cleanupCalled = false
-  let renderHook: ReactHooksRenderer['renderHook']
-
-  beforeAll(() => {
-    process.env.RHTL_SKIP_AUTO_CLEANUP = 'true'
-    renderHook = (require('..') as ReactHooksRenderer).renderHook
-  })
+  process.env.RHTL_SKIP_AUTO_CLEANUP = 'true'
+  const renderHook = (require('..') as ReactHooksRenderer).renderHook
 
   test('first', () => {
     const hookWithCleanup = () => {

src/dom/__tests__/autoCleanup.noAfterEach.test.ts

@@ -6,13 +6,9 @@ import { ReactHooksRenderer } from '../../types/react'
 // then we DON'T auto-wire up the afterEach for folks
 describe('skip auto cleanup (no afterEach) tests', () => {
   let cleanupCalled = false
-  let renderHook: ReactHooksRenderer['renderHook']
-
-  beforeAll(() => {
-    // @ts-expect-error Turning off AfterEach -- ignore Jest LifeCycle Type
-    afterEach = false
-    renderHook = (require('..') as ReactHooksRenderer).renderHook
-  })
+  // @ts-expect-error Turning off AfterEach -- ignore Jest LifeCycle Type
+  afterEach = false
+  const renderHook = (require('..') as ReactHooksRenderer).renderHook
 
   test('first', () => {
     const hookWithCleanup = () => {

src/dom/__tests__/autoCleanup.noProcessEnv.test.ts

@@ -4,24 +4,15 @@ import { ReactHooksRenderer } from '../../types/react'
 
 // This verifies that if process.env is unavailable
 // then we still auto-wire up the afterEach for folks
-describe('skip auto cleanup (no process.env) tests', () => {
-  const originalEnv = process.env
+describe('auto cleanup (no process.env) tests', () => {
   let cleanupCalled = false
-  let renderHook: ReactHooksRenderer['renderHook']
-
-  beforeAll(() => {
-    process.env = {
-      ...process.env,
-      get RHTL_SKIP_AUTO_CLEANUP(): string | undefined {
-        throw new Error('expected')
-      }
+  process.env = {
+    ...process.env,
+    get RHTL_SKIP_AUTO_CLEANUP(): string | undefined {
+      throw new Error('expected')
     }
-    renderHook = (require('..') as ReactHooksRenderer).renderHook
-  })
-
-  afterAll(() => {
-    process.env = originalEnv
-  })
+  }
+  const renderHook = (require('..') as ReactHooksRenderer).renderHook
 
   test('first', () => {
     const hookWithCleanup = () => {

src/dom/__tests__/autoCleanup.pure.test.ts

@@ -1,16 +1,10 @@
 import { useEffect } from 'react'
-
-import { ReactHooksRenderer } from '../../types/react'
+import { renderHook } from '../pure'
 
 // This verifies that if pure imports are used
 // then we DON'T auto-wire up the afterEach for folks
 describe('skip auto cleanup (pure) tests', () => {
   let cleanupCalled = false
-  let renderHook: ReactHooksRenderer['renderHook']
-
-  beforeAll(() => {
-    renderHook = (require('../pure') as ReactHooksRenderer).renderHook
-  })
 
   test('first', () => {
     const hookWithCleanup = () => {

src/dom/__tests__/errorHook.test.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { renderHook, act } from '..'
+import { renderHook } from '..'
 
 describe('error hook tests', () => {
   function useError(throwError?: boolean) {

src/dom/__tests__/errorSuppression.disabled.test.ts

@@ -2,11 +2,8 @@
 // then we DON'T auto-wire up the afterEach for folks
 describe('error output suppression (disabled) tests', () => {
   const originalConsoleError = console.error
-
-  beforeAll(() => {
-    process.env.RHTL_DISABLE_ERROR_FILTERING = 'true'
-    require('..')
-  })
+  process.env.RHTL_DISABLE_ERROR_FILTERING = 'true'
+  require('..')
 
   test('should not patch console.error', () => {
     expect(console.error).toBe(originalConsoleError)

src/dom/__tests__/errorSuppression.noAfterEach.test.ts

@@ -2,12 +2,9 @@
 // then we DON'T auto-wire up the afterEach for folks
 describe('error output suppression (noAfterEach) tests', () => {
   const originalConsoleError = console.error
-
-  beforeAll(() => {
-    // @ts-expect-error Turning off AfterEach -- ignore Jest LifeCycle Type
-    afterEach = false
-    require('..')
-  })
+  // @ts-expect-error Turning off AfterEach -- ignore Jest LifeCycle Type
+  afterEach = false
+  require('..')
 
   test('should not patch console.error', () => {
     expect(console.error).toBe(originalConsoleError)