Merge branch 'main' into feature/update-contributing-documentation

Author: MatanBobi

.codesandbox/ci.json

@@ -1,3 +1,4 @@
 {
-  "sandboxes": ["new", "github/kentcdodds/react-testing-library-examples"]
+  "sandboxes": ["new", "github/kentcdodds/react-testing-library-examples"],
+  "node": "12"
 }

.github/workflows/validate.yml

@@ -17,7 +17,7 @@ jobs:
     if: ${{ !contains(github.head_ref, 'all-contributors') }}
     strategy:
       matrix:
-        node: [10.13, 12, 14, 16]
+        node: [12, 14, 16]
         react: [latest, next, experimental]
     runs-on: ubuntu-latest
     steps:

package.json

@@ -6,7 +6,7 @@
   "types": "types/index.d.ts",
   "module": "dist/@testing-library/react.esm.js",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
   "scripts": {
     "prebuild": "rimraf dist",
@@ -44,13 +44,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.12.5",
-    "@testing-library/dom": "^7.28.1"
+    "@testing-library/dom": "^8.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.6",
     "@types/react-dom": "^17.0.0",
     "dotenv-cli": "^4.0.0",
-    "kcd-scripts": "^7.5.1",
+    "kcd-scripts": "^11.1.0",
     "npm-run-all": "^4.1.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -68,7 +68,10 @@
       "react/no-adjacent-inline-elements": "off",
       "import/no-unassigned-import": "off",
       "import/named": "off",
-      "testing-library/no-dom-import": "off"
+      "testing-library/no-container": "off",
+      "testing-library/no-dom-import": "off",
+      "testing-library/no-unnecessary-act": "off",
+      "testing-library/prefer-user-event": "off"
     }
   },
   "eslintIgnore": [

src/__tests__/cleanup.js

@@ -54,15 +54,16 @@ describe('fake timers and missing act warnings', () => {
     jest.useRealTimers()
   })
 
-  test('cleanup does not flush immediates', () => {
+  test('cleanup does not flush microtasks', () => {
     const microTaskSpy = jest.fn()
     function Test() {
       const counter = 1
       const [, setDeferredCounter] = React.useState(null)
       React.useEffect(() => {
         let cancelled = false
-        setImmediate(() => {
+        Promise.resolve().then(() => {
           microTaskSpy()
+          // eslint-disable-next-line jest/no-if -- false positive
           if (!cancelled) {
             setDeferredCounter(counter)
           }
@@ -95,12 +96,12 @@ describe('fake timers and missing act warnings', () => {
       const [, setDeferredCounter] = React.useState(null)
       React.useEffect(() => {
         let cancelled = false
-        setImmediate(() => {
+        setTimeout(() => {
           deferredStateUpdateSpy()
           if (!cancelled) {
             setDeferredCounter(counter)
           }
-        })
+        }, 0)
 
         return () => {
           cancelled = true
@@ -111,7 +112,7 @@ describe('fake timers and missing act warnings', () => {
     }
     render(<Test />)
 
-    jest.runAllImmediates()
+    jest.runAllTimers()
     cleanup()
 
     expect(deferredStateUpdateSpy).toHaveBeenCalledTimes(1)

src/__tests__/debug.js

@@ -43,8 +43,8 @@ test('allows same arguments as prettyDOM', () => {
   expect(console.log).toHaveBeenCalledTimes(1)
   expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
     Array [
-      "<div>
-    ...",
+      <div>
+    ...,
     ]
   `)
 })

src/__tests__/new-act.js

@@ -1,4 +1,4 @@
-let asyncAct
+let asyncAct, consoleErrorMock
 
 jest.mock('react-dom/test-utils', () => ({
   act: cb => {
@@ -9,11 +9,11 @@ jest.mock('react-dom/test-utils', () => ({
 beforeEach(() => {
   jest.resetModules()
   asyncAct = require('../act-compat').asyncAct
-  jest.spyOn(console, 'error').mockImplementation(() => {})
+  consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
 })
 
 afterEach(() => {
-  console.error.mockRestore()
+  consoleErrorMock.mockRestore()
 })
 
 test('async act works when it does not exist (older versions of react)', async () => {
@@ -49,7 +49,7 @@ test('async act recovers from errors', async () => {
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
-        "call console.error",
+        call console.error,
       ],
     ]
   `)
@@ -67,7 +67,7 @@ test('async act recovers from sync errors', async () => {
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
-        "call console.error",
+        call console.error,
       ],
     ]
   `)

src/__tests__/no-act.js

@@ -1,15 +1,15 @@
-let act, asyncAct, React
+let act, asyncAct, React, consoleErrorMock
 
 beforeEach(() => {
   jest.resetModules()
-  act = require('..').act
+  act = require('../pure').act
   asyncAct = require('../act-compat').asyncAct
   React = require('react')
-  jest.spyOn(console, 'error').mockImplementation(() => {})
+  consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
 })
 
 afterEach(() => {
-  console.error.mockRestore()
+  consoleErrorMock.mockRestore()
 })
 
 jest.mock('react-dom/test-utils', () => ({}))
@@ -83,7 +83,7 @@ test('async act recovers from sync errors', async () => {
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
-        "call console.error",
+        call console.error,
       ],
     ]
   `)

src/__tests__/old-act.js

@@ -1,13 +1,13 @@
-let asyncAct
+let asyncAct, consoleErrorMock
 
 beforeEach(() => {
   jest.resetModules()
   asyncAct = require('../act-compat').asyncAct
-  jest.spyOn(console, 'error').mockImplementation(() => {})
+  consoleErrorMock = jest.spyOn(console, 'error').mockImplementation(() => {})
 })
 
 afterEach(() => {
-  console.error.mockRestore()
+  consoleErrorMock.mockRestore()
 })
 
 jest.mock('react-dom/test-utils', () => ({
@@ -32,18 +32,18 @@ test('async act works even when the act is an old one', async () => {
     console.error('sigil')
   })
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
-        Array [
-          Array [
-            "sigil",
-          ],
-          Array [
-            "It looks like you're using a version of react-dom that supports the \\"act\\" function, but not an awaitable version of \\"act\\" which you will need. Please upgrade to at least [email protected] to remove this warning.",
-          ],
-          Array [
-            "sigil",
-          ],
-        ]
-    `)
+    Array [
+      Array [
+        sigil,
+      ],
+      Array [
+        It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least [email protected] to remove this warning.,
+      ],
+      Array [
+        sigil,
+      ],
+    ]
+  `)
   expect(callback).toHaveBeenCalledTimes(1)
 
   // and it doesn't warn you twice
@@ -71,10 +71,10 @@ test('async act recovers from async errors', async () => {
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
-        "It looks like you're using a version of react-dom that supports the \\"act\\" function, but not an awaitable version of \\"act\\" which you will need. Please upgrade to at least [email protected] to remove this warning.",
+        It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least [email protected] to remove this warning.,
       ],
       Array [
-        "call console.error",
+        call console.error,
       ],
     ]
   `)
@@ -92,7 +92,7 @@ test('async act recovers from sync errors', async () => {
   expect(console.error.mock.calls).toMatchInlineSnapshot(`
     Array [
       Array [
-        "call console.error",
+        call console.error,
       ],
     ]
   `)
@@ -109,11 +109,11 @@ test('async act can handle any sort of console.error', async () => {
     Array [
       Array [
         Object {
-          "error": "some error",
+          error: some error,
         },
       ],
       Array [
-        "It looks like you're using a version of react-dom that supports the \\"act\\" function, but not an awaitable version of \\"act\\" which you will need. Please upgrade to at least [email protected] to remove this warning.",
+        It looks like you're using a version of react-dom that supports the "act" function, but not an awaitable version of "act" which you will need. Please upgrade to at least [email protected] to remove this warning.,
       ],
     ]
   `)

src/__tests__/render.js

@@ -78,14 +78,14 @@ test('renders options.wrapper around node', () => {
 
   expect(screen.getByTestId('wrapper')).toBeInTheDocument()
   expect(container.firstChild).toMatchInlineSnapshot(`
-<div
-  data-testid="wrapper"
->
-  <div
-    data-testid="inner"
-  />
-</div>
-`)
+    <div
+      data-testid=wrapper
+    >
+      <div
+        data-testid=inner
+      />
+    </div>
+  `)
 })
 
 test('flushes useEffect cleanup functions sync on unmount()', () => {

tests/setup-env.js

@@ -1,8 +1,10 @@
 import '@testing-library/jest-dom/extend-expect'
 
+let consoleErrorMock
+
 beforeEach(() => {
   const originalConsoleError = console.error
-  jest
+  consoleErrorMock = jest
     .spyOn(console, 'error')
     .mockImplementation((message, ...optionalParams) => {
       // Ignore ReactDOM.render/ReactDOM.hydrate deprecation warning
@@ -14,8 +16,5 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  // maybe another test already restore console error mocks
-  if (typeof console.error.mockRestore === 'function') {
-    console.error.mockRestore()
-  }
+  consoleErrorMock.mockRestore()
 })

types/test.tsx

@@ -3,39 +3,39 @@ import {render, fireEvent, screen, waitFor} from '.'
 import * as pure from './pure'
 
 export async function testRender() {
-  const page = render(<button />)
+  const view = render(<button />)
 
   // single queries
-  page.getByText('foo')
-  page.queryByText('foo')
-  await page.findByText('foo')
+  view.getByText('foo')
+  view.queryByText('foo')
+  await view.findByText('foo')
 
   // multiple queries
-  page.getAllByText('bar')
-  page.queryAllByText('bar')
-  await page.findAllByText('bar')
+  view.getAllByText('bar')
+  view.queryAllByText('bar')
+  await view.findAllByText('bar')
 
   // helpers
-  const {container, rerender, debug} = page
+  const {container, rerender, debug} = view
   expectType<HTMLElement, typeof container>(container)
   return {container, rerender, debug}
 }
 
 export async function testPureRender() {
-  const page = pure.render(<button />)
+  const view = pure.render(<button />)
 
   // single queries
-  page.getByText('foo')
-  page.queryByText('foo')
-  await page.findByText('foo')
+  view.getByText('foo')
+  view.queryByText('foo')
+  await view.findByText('foo')
 
   // multiple queries
-  page.getAllByText('bar')
-  page.queryAllByText('bar')
-  await page.findAllByText('bar')
+  view.getAllByText('bar')
+  view.queryAllByText('bar')
+  await view.findAllByText('bar')
 
   // helpers
-  const {container, rerender, debug} = page
+  const {container, rerender, debug} = view
   expectType<HTMLElement, typeof container>(container)
   return {container, rerender, debug}
 }