release: 9.0.0

.all-contributorsrc

@@ -1589,6 +1589,15 @@
       "contributions": [
         "doc"
       ]
+    },
+    {
+      "login": "DaniAcu",
+      "name": "Daniel Acuña",
+      "avatar_url": "https://avatars.githubusercontent.com/u/26409015?v=4",
+      "profile": "https://github.com/DaniAcu",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "repoHost": "https://github.com",

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "installCommand": "install:csb",
   "sandboxes": ["github/kentcdodds/react-testing-library-examples"],
-  "node": "12"
+  "node": "14"
 }

.github/workflows/validate.yml

@@ -26,7 +26,7 @@ jobs:
       # Otherwise we would not know if the problem is tied to the Node.js version
       fail-fast: false
       matrix:
-        node: [12, 14, 16]
+        node: [14, 16, 18]
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs

package.json

@@ -21,7 +21,7 @@
   "author": "Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com)",
   "license": "MIT",
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "browserslist": [
     "and_chr 103",
@@ -40,7 +40,7 @@
     "safari 15.5",
     "samsung 17.0",
     "samsung 16.0",
-    "node 12.0"
+    "node 14.0"
   ],
   "scripts": {
     "build": "kcd-scripts build  --no-ts-defs --ignore \"**/__tests__/**,**/__node_tests__/**,**/__mocks__/**\" && kcd-scripts build --no-ts-defs --bundle --no-clean",
@@ -74,19 +74,23 @@
     "jest-in-case": "^1.0.2",
     "jest-snapshot-serializer-ansi": "^1.0.0",
     "jest-watch-select-projects": "^2.0.0",
-    "jsdom": "^16.4.0",
-    "kcd-scripts": "^11.0.0",
+    "jsdom": "20.0.0",
+    "kcd-scripts": "^13.0.0",
     "typescript": "^4.1.2"
   },
   "eslintConfig": {
     "extends": [
       "./node_modules/kcd-scripts/eslint.js",
       "plugin:import/typescript"
     ],
+    "parserOptions": {
+      "ecmaVersion": 2020
+    },
     "rules": {
       "@typescript-eslint/prefer-optional-chain": "off",
       "@typescript-eslint/no-explicit-any": "off",
       "@typescript-eslint/no-unsafe-member-access": "off",
+      "@typescript-eslint/no-unnecessary-boolean-literal-compare": "off",
       "@typescript-eslint/prefer-includes": "off",
       "import/prefer-default-export": "off",
       "import/no-unassigned-import": "off",

src/__tests__/config.js

@@ -11,14 +11,15 @@ describe('configuration API', () => {
       return {}
     })
   })
-  afterEach(() => {
-    configure(originalConfig)
-  })
 
   beforeEach(() => {
     configure({other: 123})
   })
 
+  afterEach(() => {
+    configure(originalConfig)
+  })
+
   describe('getConfig', () => {
     test('returns existing configuration', () => {
       const conf = getConfig()

src/__tests__/element-queries.js

@@ -788,35 +788,28 @@ test('queryAllByRole returns semantic html elements', () => {
     </form>
   `)
 
-  expect(queryAllByRole(/table/i)).toHaveLength(1)
-  expect(queryAllByRole(/tabl/i, {exact: false})).toHaveLength(1)
-  expect(queryAllByRole(/columnheader/i)).toHaveLength(1)
-  expect(queryAllByRole(/rowheader/i)).toHaveLength(1)
-  expect(queryAllByRole(/grid/i)).toHaveLength(1)
-  expect(queryAllByRole(/form/i)).toHaveLength(0)
-  expect(queryAllByRole(/button/i)).toHaveLength(1)
-  expect(queryAllByRole(/heading/i)).toHaveLength(6)
+  expect(queryAllByRole('table')).toHaveLength(1)
+  expect(queryAllByRole('columnheader')).toHaveLength(1)
+  expect(queryAllByRole('rowheader')).toHaveLength(1)
+  expect(queryAllByRole('grid')).toHaveLength(1)
+  expect(queryAllByRole('form')).toHaveLength(0)
+  expect(queryAllByRole('button')).toHaveLength(1)
+  expect(queryAllByRole('heading')).toHaveLength(6)
   expect(queryAllByRole('list')).toHaveLength(2)
-  expect(queryAllByRole(/listitem/i)).toHaveLength(3)
-  expect(queryAllByRole(/textbox/i)).toHaveLength(2)
-  expect(queryAllByRole(/checkbox/i)).toHaveLength(1)
-  expect(queryAllByRole(/radio/i)).toHaveLength(1)
+  expect(queryAllByRole('listitem')).toHaveLength(3)
+  expect(queryAllByRole('textbox')).toHaveLength(2)
+  expect(queryAllByRole('checkbox')).toHaveLength(1)
+  expect(queryAllByRole('radio')).toHaveLength(1)
   expect(queryAllByRole('row')).toHaveLength(3)
-  expect(queryAllByRole(/rowgroup/i)).toHaveLength(2)
-  expect(queryAllByRole(/(table)|(textbox)/i)).toHaveLength(3)
-  expect(queryAllByRole(/img/i)).toHaveLength(1)
+  expect(queryAllByRole('rowgroup')).toHaveLength(2)
+  expect(queryAllByRole('img')).toHaveLength(1)
   expect(queryAllByRole('meter')).toHaveLength(1)
   expect(queryAllByRole('progressbar')).toHaveLength(0)
   expect(queryAllByRole('progressbar', {queryFallbacks: true})).toHaveLength(1)
   expect(queryAllByRole('combobox')).toHaveLength(1)
   expect(queryAllByRole('listbox')).toHaveLength(1)
 })
 
-test('queryByRole matches case with non-string matcher', () => {
-  const {queryByRole} = render(`<span role="1" />`)
-  expect(queryByRole(1)).toBeTruthy()
-})
-
 test('getAll* matchers return an array', () => {
   const {
     getAllByAltText,
@@ -827,7 +820,7 @@ test('getAll* matchers return an array', () => {
     getAllByText,
     getAllByRole,
   } = render(`
-    <div role="container">
+    <div role="section">
       <img
         data-testid="poster"
         alt="finding nemo poster"
@@ -864,7 +857,7 @@ test('getAll* matchers return an array', () => {
   expect(getAllByDisplayValue('Japanese cars')).toHaveLength(1)
   expect(getAllByDisplayValue(/cars$/)).toHaveLength(2)
   expect(getAllByText(/^where/i)).toHaveLength(1)
-  expect(getAllByRole(/container/i)).toHaveLength(1)
+  expect(getAllByRole('section')).toHaveLength(1)
   expect(getAllByRole('meter')).toHaveLength(1)
   expect(getAllByRole('progressbar', {queryFallbacks: true})).toHaveLength(1)
 })
@@ -879,7 +872,7 @@ test('getAll* matchers throw for 0 matches', () => {
     getAllByText,
     getAllByRole,
   } = render(`
-    <div role="container">
+    <div role="section">
       <label>No Matches Please</label>
     </div>,
   `)

src/__tests__/fake-timers.js

@@ -70,6 +70,7 @@ test('recursive timers do not cause issues', async () => {
   let recurse = true
   function startTimer() {
     setTimeout(() => {
+      // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
       if (recurse) startTimer()
     }, 1)
   }

src/__tests__/get-by-errors.js

@@ -36,8 +36,8 @@ cases(
       html: `<div title="his"></div><div title="history"></div>`,
     },
     getByRole: {
-      query: /his/,
-      html: `<div role="his"></div><div role="history"></div>`,
+      query: 'button',
+      html: `<button>one</button><div role="button">two</button>`,
     },
     getByTestId: {
       query: /his/,
@@ -87,8 +87,8 @@ cases(
       html: `<div title="his"></div><div title="history"></div>`,
     },
     queryByRole: {
-      query: /his/,
-      html: `<div role="his"></div><div role="history"></div>`,
+      query: 'button',
+      html: `<button>one</button><div role="button">two</button>`,
     },
     queryByTestId: {
       query: /his/,

src/__tests__/role.js

@@ -274,6 +274,7 @@ test('accessible name filter implements TextMatch', () => {
   expect(
     getByRole('heading', {
       name: (name, element) => {
+        // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
         return element.nodeName === 'H2' && name === 'Your Signature'
       },
     }),
@@ -564,11 +565,11 @@ describe('configuration', () => {
       queryByRole('button', {name: 'Hello, Dave!'})
 
       expect(console.error).toHaveBeenCalledTimes(2)
-      expect(console.error.mock.calls[0][0]).toMatch(
-        'Error: Not implemented: window.computedStyle(elt, pseudoElt)',
+      expect(console.error.mock.calls[0][0].message).toMatch(
+        'Not implemented: window.computedStyle(elt, pseudoElt)',
       )
-      expect(console.error.mock.calls[1][0]).toMatch(
-        'Error: Not implemented: window.computedStyle(elt, pseudoElt)',
+      expect(console.error.mock.calls[1][0].message).toMatch(
+        'Not implemented: window.computedStyle(elt, pseudoElt)',
       )
     } finally {
       jest.restoreAllMocks()

src/__tests__/suggestions.js

@@ -612,8 +612,8 @@ test('should suggest hidden option if element is not in the accessibility tree',
   suggestion.toString()
 
   expect(console.warn.mock.calls).toMatchInlineSnapshot(`
-    Array [
-      Array [
+    [
+      [
         Element is inaccessible. This means that the element and all its children are invisible to screen readers.
         If you are using the aria-hidden prop, make sure this is the right choice for your case.
         ,
@@ -649,9 +649,9 @@ test('should find label text using the aria-labelledby', () => {
       warning: '',
     },
     `
-    Object {
-      queryArgs: Array [
-        Object {},
+    {
+      queryArgs: [
+        {},
       ],
       queryMethod: getByLabelText,
       queryName: LabelText,

src/__tests__/text-matchers.js

@@ -291,10 +291,6 @@ cases(
       dom: `<input value="User ${LRM}name" />`,
       queryFn: 'queryAllByDisplayValue',
     },
-    queryAllByRole: {
-      dom: `<input role="User ${LRM}name" />`,
-      queryFn: 'queryAllByRole',
-    },
   },
 )
 

src/__tests__/wait-for-element-to-be-removed.js

@@ -98,6 +98,7 @@ test('rethrows non-testing-lib errors', () => {
   const error = new Error('my own error')
   return expect(
     waitForElementToBeRemoved(() => {
+      // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
       if (throwIt) {
         throw error
       }

src/__tests__/wait-for.js

@@ -275,7 +275,7 @@ test('does not work after it resolves', async () => {
       context = 'act'
       try {
         const result = callback()
-        // eslint-disable-next-line jest/no-if
+        // eslint-disable-next-line jest/no-if, jest/no-conditional-in-test -- false-positive
         if (typeof result?.then === 'function') {
           const thenable = result
           return {
@@ -319,6 +319,7 @@ test('does not work after it resolves', async () => {
 
   await waitFor(
     () => {
+      // eslint-disable-next-line jest/no-conditional-in-test -- false-positive
       if (data === null) {
         throw new Error('not found')
       }

src/helpers.ts

@@ -10,6 +10,7 @@ function jestFakeTimersAreEnabled() {
       // legacy timers
       (setTimeout as any)._isMockFunction === true ||
       // modern timers
+      // eslint-disable-next-line prefer-object-has-own -- not supported by our support matrix
       Object.prototype.hasOwnProperty.call(setTimeout, 'clock')
     )
   }

src/queries/label-text.ts

@@ -71,20 +71,23 @@ const queryAllByLabelText: AllByText = (
           if (
             matcher(label.content, label.formControl, text, matchNormalizer) &&
             label.formControl
-          )
+          ) {
             labelledElements.push(label.formControl)
+          }
         })
       const labelsValue = labelList
         .filter(label => Boolean(label.content))
         .map(label => label.content)
       if (
         matcher(labelsValue.join(' '), labelledElement, text, matchNormalizer)
-      )
+      ) {
         labelledElements.push(labelledElement)
+      }
       if (labelsValue.length > 1) {
         labelsValue.forEach((labelValue, index) => {
-          if (matcher(labelValue, labelledElement, text, matchNormalizer))
+          if (matcher(labelValue, labelledElement, text, matchNormalizer)) {
             labelledElements.push(labelledElement)
+          }
 
           const labelsFiltered = [...labelsValue]
           labelsFiltered.splice(index, 1)
@@ -97,8 +100,9 @@ const queryAllByLabelText: AllByText = (
                 text,
                 matchNormalizer,
               )
-            )
+            ) {
               labelledElements.push(labelledElement)
+            }
           }
         })
       }