From 0d1e09aecacb18332f12499b221ddcbc3fbfcaff Mon Sep 17 00:00:00 2001 From: Dominic Saadi Date: Fri, 15 Dec 2023 00:08:47 -0800 Subject: [PATCH] Revert `@testing-library/jest-dom` v6 upgrade (#9713) This reverts https://github.com/redwoodjs/redwood/pull/9673 and https://github.com/redwoodjs/redwood/pull/9711. With v6 of `@testing-library/jest-dom`, `yarn rw type-check` fails in Redwood projects because it can't locate the types for `@testing-libary/jest-dom`. They absorbed the definitely types package (`@types/testing-library__jest-dom`) in this PR: https://github.com/testing-library/jest-dom/pull/511. Here's an example of a failing run: https://github.com/redwoodjs/redwood/actions/runs/7213177056/job/19668365614?pr=9708. The logical thing to do is remove `@testing-libary/jest-dom` from the `types` array in `web/tsconfig.json`, but when we do that we get a different failure from TS saying that it doesn't understand the extended matchers provided by `testing-library/jest-dom` like `toBeInTheDocument`. @Tobbe filed an issue in their repo here https://github.com/testing-library/jest-dom/issues/559. In the PR I linked to, the maintainer notes that... > But in my local testing with the changes in this PR, following the Readme was sufficient to get full auto-complete support even for JS-only users. As long as they have a jest-setup file that imports the bare export and add a dependency on @types/jest, recent versions of VS Code will figure it out. Users don't have jest setup files in their project (we just point to a jest preset) or `@types/jest` as an explicit dev dependency. I took a look at it but couldn't crack it today. Instead of holding up other PRs in CI, better to revert it for now and come back to later when we have more leads. --- package.json | 2 +- packages/auth/package.json | 2 +- .../auth/src/__tests__/AuthProvider.test.tsx | 2 +- packages/forms/package.json | 3 +- .../router/src/__tests__/location.test.tsx | 2 +- .../router/src/__tests__/nestedSets.test.tsx | 2 +- .../src/__tests__/route-announcer.test.tsx | 2 +- .../router/src/__tests__/route-focus.test.tsx | 2 +- .../src/__tests__/routeScrollReset.test.tsx | 2 +- packages/router/src/__tests__/router.test.tsx | 2 +- packages/router/src/__tests__/set.test.tsx | 2 +- .../src/__tests__/setContextReuse.test.tsx | 2 +- packages/testing/jest.setup.ts | 2 +- packages/testing/package.json | 2 +- packages/web/package.json | 3 +- .../components/FetchConfigProvider.test.tsx | 2 +- .../components/GraphQLHooksProvider.test.tsx | 2 +- .../src/components/cell/createCell.test.tsx | 2 +- .../cell/createSuspendingCell.test.tsx | 2 +- .../web/src/components/portalHead.test.tsx | 2 +- yarn.lock | 64 +++++++++++-------- 21 files changed, 58 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index d1e36025c99e..4cd31de36cf9 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "@faker-js/faker": "8.0.2", "@npmcli/arborist": "7.2.2", "@playwright/test": "1.40.1", - "@testing-library/jest-dom": "6.1.5", + "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "14.1.2", "@testing-library/user-event": "14.5.1", "@types/babel__generator": "7.6.7", diff --git a/packages/auth/package.json b/packages/auth/package.json index feb7157d523f..272209e1eef7 100644 --- a/packages/auth/package.json +++ b/packages/auth/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@babel/cli": "7.23.4", "@babel/core": "^7.22.20", - "@testing-library/jest-dom": "6.1.5", + "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "14.1.2", "jest": "29.7.0", "msw": "1.3.2", diff --git a/packages/auth/src/__tests__/AuthProvider.test.tsx b/packages/auth/src/__tests__/AuthProvider.test.tsx index ea0e601a3973..2bd325f615f0 100644 --- a/packages/auth/src/__tests__/AuthProvider.test.tsx +++ b/packages/auth/src/__tests__/AuthProvider.test.tsx @@ -10,7 +10,7 @@ import { configure, } from '@testing-library/react' import { renderHook, act } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { graphql } from 'msw' import { setupServer } from 'msw/node' diff --git a/packages/forms/package.json b/packages/forms/package.json index 53cc38b82475..febfbe572fd3 100644 --- a/packages/forms/package.json +++ b/packages/forms/package.json @@ -31,12 +31,13 @@ "@babel/cli": "7.23.4", "@babel/core": "^7.22.20", "@testing-library/dom": "9.3.3", - "@testing-library/jest-dom": "6.1.5", + "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "14.1.2", "@testing-library/user-event": "14.5.1", "@types/pascalcase": "1.0.3", "@types/react": "18.2.37", "@types/react-dom": "18.2.15", + "@types/testing-library__jest-dom": "5.14.9", "graphql": "16.8.1", "jest": "29.7.0", "nodemon": "3.0.2", diff --git a/packages/router/src/__tests__/location.test.tsx b/packages/router/src/__tests__/location.test.tsx index 805fc419d643..524bf3875a87 100644 --- a/packages/router/src/__tests__/location.test.tsx +++ b/packages/router/src/__tests__/location.test.tsx @@ -1,5 +1,5 @@ import { render } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { LocationProvider, useLocation } from '../location' diff --git a/packages/router/src/__tests__/nestedSets.test.tsx b/packages/router/src/__tests__/nestedSets.test.tsx index a16dcb6545dd..a251513aefa1 100644 --- a/packages/router/src/__tests__/nestedSets.test.tsx +++ b/packages/router/src/__tests__/nestedSets.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import type { ReactNode } from 'react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { act, render } from '@testing-library/react' import { navigate, Route, Router } from '../' diff --git a/packages/router/src/__tests__/route-announcer.test.tsx b/packages/router/src/__tests__/route-announcer.test.tsx index 0e0f1a8660c2..606dd45a2bbf 100644 --- a/packages/router/src/__tests__/route-announcer.test.tsx +++ b/packages/router/src/__tests__/route-announcer.test.tsx @@ -1,7 +1,7 @@ import React from 'react' import { render, waitFor, act } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { getAnnouncement } from '../a11yUtils' import { navigate } from '../history' diff --git a/packages/router/src/__tests__/route-focus.test.tsx b/packages/router/src/__tests__/route-focus.test.tsx index ca50c24106b8..59cecad3e3a2 100644 --- a/packages/router/src/__tests__/route-focus.test.tsx +++ b/packages/router/src/__tests__/route-focus.test.tsx @@ -1,5 +1,5 @@ import { render, waitFor } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { getFocus } from '../a11yUtils' import RouteFocus from '../route-focus' diff --git a/packages/router/src/__tests__/routeScrollReset.test.tsx b/packages/router/src/__tests__/routeScrollReset.test.tsx index 885ba12dc9d9..bf9475f62b0e 100644 --- a/packages/router/src/__tests__/routeScrollReset.test.tsx +++ b/packages/router/src/__tests__/routeScrollReset.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { act, cleanup, render, screen } from '@testing-library/react' import { navigate } from '../history' diff --git a/packages/router/src/__tests__/router.test.tsx b/packages/router/src/__tests__/router.test.tsx index ca436d3e3c0f..47c93faaf1ba 100644 --- a/packages/router/src/__tests__/router.test.tsx +++ b/packages/router/src/__tests__/router.test.tsx @@ -20,7 +20,7 @@ jest.mock('../util', () => { import React, { useEffect, useState } from 'react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { act, configure, diff --git a/packages/router/src/__tests__/set.test.tsx b/packages/router/src/__tests__/set.test.tsx index a1cc61e2781d..5e5fe6a24680 100644 --- a/packages/router/src/__tests__/set.test.tsx +++ b/packages/router/src/__tests__/set.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import type { ReactNode } from 'react' import { act, render, waitFor } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { navigate } from '../history' import { Route, Router } from '../router' diff --git a/packages/router/src/__tests__/setContextReuse.test.tsx b/packages/router/src/__tests__/setContextReuse.test.tsx index 5d6a698ec2f1..920f466d263e 100644 --- a/packages/router/src/__tests__/setContextReuse.test.tsx +++ b/packages/router/src/__tests__/setContextReuse.test.tsx @@ -5,7 +5,7 @@ import { act, render, waitFor } from '@testing-library/react' import { Route, Router, navigate } from '../' import { Set } from '../Set' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' const HomePage = () => { return

Home Page

diff --git a/packages/testing/jest.setup.ts b/packages/testing/jest.setup.ts index e445304cc298..6bbc20490012 100644 --- a/packages/testing/jest.setup.ts +++ b/packages/testing/jest.setup.ts @@ -1,4 +1,4 @@ -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import '@testing-library/jest-dom' import { startMSW } from './src/web/mockRequests' diff --git a/packages/testing/package.json b/packages/testing/package.json index 23c8828d0abf..6ae52e9f2acb 100644 --- a/packages/testing/package.json +++ b/packages/testing/package.json @@ -34,7 +34,7 @@ "@redwoodjs/project-config": "6.0.7", "@redwoodjs/router": "6.0.7", "@redwoodjs/web": "6.0.7", - "@testing-library/jest-dom": "6.1.5", + "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "14.1.2", "@testing-library/user-event": "14.5.1", "@types/aws-lambda": "8.10.126", diff --git a/packages/web/package.json b/packages/web/package.json index 1fee62116420..fa747370e7d3 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -52,10 +52,11 @@ "@apollo/experimental-nextjs-app-support": "0.5.1", "@babel/cli": "7.23.4", "@babel/core": "^7.22.20", - "@testing-library/jest-dom": "6.1.5", + "@testing-library/jest-dom": "5.17.0", "@testing-library/react": "14.1.2", "@types/react": "18.2.37", "@types/react-dom": "18.2.15", + "@types/testing-library__jest-dom": "5.14.9", "jest": "29.7.0", "nodemon": "3.0.2", "react": "0.0.0-experimental-e5205658f-20230913", diff --git a/packages/web/src/components/FetchConfigProvider.test.tsx b/packages/web/src/components/FetchConfigProvider.test.tsx index db47d6523911..d7342d0aa025 100644 --- a/packages/web/src/components/FetchConfigProvider.test.tsx +++ b/packages/web/src/components/FetchConfigProvider.test.tsx @@ -7,7 +7,7 @@ import React from 'react' import { render, screen, waitFor } from '@testing-library/react' import type { AuthContextInterface } from '@redwoodjs/auth' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' globalThis.RWJS_API_GRAPHQL_URL = 'https://api.example.com/graphql' diff --git a/packages/web/src/components/GraphQLHooksProvider.test.tsx b/packages/web/src/components/GraphQLHooksProvider.test.tsx index eaf75aa2897b..6153bd69d7a9 100644 --- a/packages/web/src/components/GraphQLHooksProvider.test.tsx +++ b/packages/web/src/components/GraphQLHooksProvider.test.tsx @@ -3,7 +3,7 @@ */ import { render, screen, waitFor } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { GraphQLHooksProvider, diff --git a/packages/web/src/components/cell/createCell.test.tsx b/packages/web/src/components/cell/createCell.test.tsx index 7b7aed4e1936..42e5095ad9ae 100644 --- a/packages/web/src/components/cell/createCell.test.tsx +++ b/packages/web/src/components/cell/createCell.test.tsx @@ -3,7 +3,7 @@ */ import { render, screen } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { GraphQLHooksProvider } from '../GraphQLHooksProvider' diff --git a/packages/web/src/components/cell/createSuspendingCell.test.tsx b/packages/web/src/components/cell/createSuspendingCell.test.tsx index 8135ef043d48..749636fd3d2c 100644 --- a/packages/web/src/components/cell/createSuspendingCell.test.tsx +++ b/packages/web/src/components/cell/createSuspendingCell.test.tsx @@ -4,7 +4,7 @@ import type { useReadQuery, useBackgroundQuery } from '@apollo/client' import { loadErrorMessages, loadDevMessages } from '@apollo/client/dev' import { render, screen } from '@testing-library/react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { GraphQLHooksProvider } from '../GraphQLHooksProvider' diff --git a/packages/web/src/components/portalHead.test.tsx b/packages/web/src/components/portalHead.test.tsx index 74f62e218ec2..74e8916c3d31 100644 --- a/packages/web/src/components/portalHead.test.tsx +++ b/packages/web/src/components/portalHead.test.tsx @@ -1,6 +1,6 @@ import React from 'react' -import '@testing-library/jest-dom/jest-globals' +import '@testing-library/jest-dom/extend-expect' import { render } from '@testing-library/react' import PortalHead from './PortalHead' diff --git a/yarn.lock b/yarn.lock index 0ced32c2be82..ce902f95529b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -86,10 +86,10 @@ __metadata: languageName: node linkType: hard -"@adobe/css-tools@npm:^4.3.1": - version: 4.3.2 - resolution: "@adobe/css-tools@npm:4.3.2" - checksum: 296a03dd29f227c60500d2da8c7f64991fecf1d8b456ce2b4adb8cec7363d9c08b5b03f1463673fc8cbfe54b538745588e7a13c736d2dd14a80c01a20f127f39 +"@adobe/css-tools@npm:^4.0.1": + version: 4.3.1 + resolution: "@adobe/css-tools@npm:4.3.1" + checksum: 05672719b544cc0c21ae3ed0eb6349bf458e9d09457578eeeb07cf0f696469ac6417e9c9be1b129e5d6a18098a061c1db55b2275591760ef30a79822436fcbfa languageName: node linkType: hard @@ -8668,7 +8668,7 @@ __metadata: "@babel/cli": 7.23.4 "@babel/core": ^7.22.20 "@babel/runtime-corejs3": 7.23.5 - "@testing-library/jest-dom": 6.1.5 + "@testing-library/jest-dom": 5.17.0 "@testing-library/react": 14.1.2 core-js: 3.34.0 jest: 29.7.0 @@ -9037,12 +9037,13 @@ __metadata: "@babel/core": ^7.22.20 "@babel/runtime-corejs3": 7.23.5 "@testing-library/dom": 9.3.3 - "@testing-library/jest-dom": 6.1.5 + "@testing-library/jest-dom": 5.17.0 "@testing-library/react": 14.1.2 "@testing-library/user-event": 14.5.1 "@types/pascalcase": 1.0.3 "@types/react": 18.2.37 "@types/react-dom": 18.2.15 + "@types/testing-library__jest-dom": 5.14.9 core-js: 3.34.0 graphql: 16.8.1 jest: 29.7.0 @@ -9509,7 +9510,7 @@ __metadata: "@redwoodjs/project-config": 6.0.7 "@redwoodjs/router": 6.0.7 "@redwoodjs/web": 6.0.7 - "@testing-library/jest-dom": 6.1.5 + "@testing-library/jest-dom": 5.17.0 "@testing-library/react": 14.1.2 "@testing-library/user-event": 14.5.1 "@types/aws-lambda": 8.10.126 @@ -9618,10 +9619,11 @@ __metadata: "@babel/core": ^7.22.20 "@babel/runtime-corejs3": 7.23.5 "@redwoodjs/auth": 6.0.7 - "@testing-library/jest-dom": 6.1.5 + "@testing-library/jest-dom": 5.17.0 "@testing-library/react": 14.1.2 "@types/react": 18.2.37 "@types/react-dom": 18.2.15 + "@types/testing-library__jest-dom": 5.14.9 core-js: 3.34.0 graphql: 16.8.1 graphql-sse: 2.4.0 @@ -11170,33 +11172,20 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:6.1.5": - version: 6.1.5 - resolution: "@testing-library/jest-dom@npm:6.1.5" +"@testing-library/jest-dom@npm:5.17.0": + version: 5.17.0 + resolution: "@testing-library/jest-dom@npm:5.17.0" dependencies: - "@adobe/css-tools": ^4.3.1 + "@adobe/css-tools": ^4.0.1 "@babel/runtime": ^7.9.2 + "@types/testing-library__jest-dom": ^5.9.1 aria-query: ^5.0.0 chalk: ^3.0.0 css.escape: ^1.5.1 dom-accessibility-api: ^0.5.6 lodash: ^4.17.15 redent: ^3.0.0 - peerDependencies: - "@jest/globals": ">= 28" - "@types/jest": ">= 28" - jest: ">= 28" - vitest: ">= 0.32" - peerDependenciesMeta: - "@jest/globals": - optional: true - "@types/jest": - optional: true - jest: - optional: true - vitest: - optional: true - checksum: f3643a56fcd970b5c7e8fd10faf3c4817d8ab0e74fb1198d726643bdc5ac675ceaac3b0068c5b4fbad254470e8f98ed50028741de875a29ceaa2f854570979c9 + checksum: 24e09c5779ea44644945ec26f2e4e5f48aecfe57d469decf2317a3253a5db28d865c55ad0ea4818d8d1df7572a6486c45daa06fa09644a833a7dd84563881939 languageName: node linkType: hard @@ -11981,6 +11970,16 @@ __metadata: languageName: node linkType: hard +"@types/jest@npm:*": + version: 29.5.11 + resolution: "@types/jest@npm:29.5.11" + dependencies: + expect: ^29.0.0 + pretty-format: ^29.0.0 + checksum: 524a3394845214581278bf4d75055927261fbeac7e1a89cd621bd0636da37d265fe0a85eac58b5778758faad1cbd7c7c361dfc190c78ebde03a91cce33463261 + languageName: node + linkType: hard + "@types/jest@npm:29.5.8": version: 29.5.8 resolution: "@types/jest@npm:29.5.8" @@ -12579,6 +12578,15 @@ __metadata: languageName: node linkType: hard +"@types/testing-library__jest-dom@npm:5.14.9, @types/testing-library__jest-dom@npm:^5.9.1": + version: 5.14.9 + resolution: "@types/testing-library__jest-dom@npm:5.14.9" + dependencies: + "@types/jest": "*" + checksum: 91f7b15e8813b515912c54da44464fb60ecf21162b7cae2272fcb3918074f4e1387dc2beca1f5041667e77b76b34253c39675ea4e0b3f28f102d8cc87fdba9fa + languageName: node + linkType: hard + "@types/tough-cookie@npm:*": version: 4.0.2 resolution: "@types/tough-cookie@npm:4.0.2" @@ -31800,7 +31808,7 @@ __metadata: "@faker-js/faker": 8.0.2 "@npmcli/arborist": 7.2.2 "@playwright/test": 1.40.1 - "@testing-library/jest-dom": 6.1.5 + "@testing-library/jest-dom": 5.17.0 "@testing-library/react": 14.1.2 "@testing-library/user-event": 14.5.1 "@types/babel__generator": 7.6.7