diff --git a/package-lock.json b/package-lock.json index 84e8aad052..737d3385bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,7 +58,7 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@testing-library/jest-dom": "^6.4.8", - "@testing-library/react": "^14.3.1", + "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", "@types/crypto-js": "^4.2.0", "@types/css-mediaquery": "^0.1.2", @@ -7541,119 +7541,30 @@ } }, "node_modules/@testing-library/react": { - "version": "14.3.1", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.3.1.tgz", - "integrity": "sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==", + "version": "16.0.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.0.0.tgz", + "integrity": "sha512-guuxUKRWQ+FgNX0h0NS0FIq3Q3uLtWVpBzcLOggmfMoUpgBnzBzvLLd4fbm6yS8ydJd94cIfY4yP9qUQjM2KwQ==", "dev": true, "dependencies": { - "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^9.0.0", - "@types/react-dom": "^18.0.0" + "@babel/runtime": "^7.12.5" }, "engines": { - "node": ">=14" + "node": ">=18" }, "peerDependencies": { + "@testing-library/dom": "^10.0.0", + "@types/react": "^18.0.0", + "@types/react-dom": "^18.0.0", "react": "^18.0.0", "react-dom": "^18.0.0" - } - }, - "node_modules/@testing-library/react/node_modules/@testing-library/dom": { - "version": "9.3.4", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", - "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==", - "dev": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=14" - } - }, - "node_modules/@testing-library/react/node_modules/ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/aria-query": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", - "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", - "dev": true, - "dependencies": { - "deep-equal": "^2.0.5" - } - }, - "node_modules/@testing-library/react/node_modules/chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/react/node_modules/color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "node_modules/@testing-library/react/node_modules/has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/react/node_modules/supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } } }, "node_modules/@testing-library/user-event": { @@ -7691,7 +7602,8 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", - "dev": true + "dev": true, + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -11352,7 +11264,8 @@ "version": "0.5.16", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", - "dev": true + "dev": true, + "peer": true }, "node_modules/dom-converter": { "version": "0.2.0", @@ -17642,6 +17555,7 @@ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, + "peer": true, "bin": { "lz-string": "bin/bin.js" } diff --git a/package.json b/package.json index 5ee12bde4d..0e286292bc 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,7 @@ "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@testing-library/jest-dom": "^6.4.8", - "@testing-library/react": "^14.3.1", + "@testing-library/react": "^16.0.0", "@testing-library/user-event": "^14.5.2", "@types/crypto-js": "^4.2.0", "@types/css-mediaquery": "^0.1.2", diff --git a/src/components/PasswordReset/tests/Request.test.tsx b/src/components/PasswordReset/tests/Request.test.tsx index 894b2bccca..7a31a7f820 100644 --- a/src/components/PasswordReset/tests/Request.test.tsx +++ b/src/components/PasswordReset/tests/Request.test.tsx @@ -52,9 +52,7 @@ describe("ResetRequest", () => { // Agent const field = screen.getByTestId(PasswordRequestIds.FieldEmailOrUsername); - await act(async () => { - await agent.type(field, "a"); - }); + await agent.type(field, "a"); // After expect(button).toBeEnabled(); @@ -74,12 +72,8 @@ describe("ResetRequest", () => { // Agent const field = screen.getByTestId(PasswordRequestIds.FieldEmailOrUsername); - await act(async () => { - await agent.type(field, "a"); - }); - await act(async () => { - await agent.click(screen.getByRole("button")); - }); + await agent.type(field, "a"); + await agent.click(screen.getByRole("button")); // After expect( diff --git a/src/components/PasswordReset/tests/ResetPage.test.tsx b/src/components/PasswordReset/tests/ResetPage.test.tsx index 748f37cd9c..f2468f343e 100644 --- a/src/components/PasswordReset/tests/ResetPage.test.tsx +++ b/src/components/PasswordReset/tests/ResetPage.test.tsx @@ -74,10 +74,8 @@ describe("PasswordReset", () => { PasswordResetTestIds.ConfirmPassword ); - await act(async () => { - await user.type(passwdField, shortPassword); - await user.type(passwdConfirm, shortPassword); - }); + await user.type(passwdField, shortPassword); + await user.type(passwdConfirm, shortPassword); const reqErrors = screen.queryAllByTestId( PasswordResetTestIds.PasswordReqError @@ -103,10 +101,8 @@ describe("PasswordReset", () => { PasswordResetTestIds.ConfirmPassword ); - await act(async () => { - await user.type(passwdField, passwordEntry); - await user.type(passwdConfirm, confirmEntry); - }); + await user.type(passwdField, passwordEntry); + await user.type(passwdConfirm, confirmEntry); const reqErrors = screen.queryAllByTestId( PasswordResetTestIds.PasswordReqError @@ -132,10 +128,8 @@ describe("PasswordReset", () => { PasswordResetTestIds.ConfirmPassword ); - await act(async () => { - await user.type(passwdField, passwordEntry); - await user.type(passwdConfirm, confirmEntry); - }); + await user.type(passwdField, passwordEntry); + await user.type(passwdConfirm, confirmEntry); const reqErrors = screen.queryAllByTestId( PasswordResetTestIds.PasswordReqError @@ -162,16 +156,12 @@ describe("PasswordReset", () => { PasswordResetTestIds.ConfirmPassword ); - await act(async () => { - await user.type(passwdField, passwordEntry); - await user.type(passwdConfirm, confirmEntry); - }); + await user.type(passwdField, passwordEntry); + await user.type(passwdConfirm, confirmEntry); const submitButton = screen.getByTestId(PasswordResetTestIds.SubmitButton); mockPasswordReset.mockResolvedValueOnce(false); - await act(async () => { - await user.click(submitButton); - }); + await user.click(submitButton); const resetErrors = screen.queryAllByTestId( PasswordResetTestIds.PasswordResetFail diff --git a/src/components/ProjectSettings/tests/index.test.tsx b/src/components/ProjectSettings/tests/index.test.tsx index b90aaa3321..31138ed374 100644 --- a/src/components/ProjectSettings/tests/index.test.tsx +++ b/src/components/ProjectSettings/tests/index.test.tsx @@ -128,9 +128,7 @@ describe("ProjectSettings", () => { const tabs = Object.values(ProjectSettingsTab); expect(screen.queryAllByRole("tab")).toHaveLength(tabs.length); for (const tab of tabs) { - await act(async () => { - await agent.click(screen.getByTestId(tab)); - }); + await agent.click(screen.getByTestId(tab)); isPanelVisible(tab); } }); @@ -145,9 +143,7 @@ describe("ProjectSettings", () => { const tabs = whichTabs(perm, hasSchedule); expect(screen.queryAllByRole("tab")).toHaveLength(tabs.length); for (const tab of tabs) { - await act(async () => { - await agent.click(screen.getByTestId(tab)); - }); + await agent.click(screen.getByTestId(tab)); whichSettings(perm, hasSchedule, tab).forEach((s) => screen.getByTestId(s) ); @@ -166,9 +162,7 @@ describe("ProjectSettings", () => { const tabs = whichTabs(perm, hasSchedule); expect(screen.queryAllByRole("tab")).toHaveLength(tabs.length); for (const tab of tabs) { - await act(async () => { - await agent.click(screen.getByTestId(tab)); - }); + await agent.click(screen.getByTestId(tab)); whichSettings(perm, hasSchedule, tab).forEach((s) => screen.getByTestId(s) ); diff --git a/src/components/SiteSettings/tests/index.test.tsx b/src/components/SiteSettings/tests/index.test.tsx index a8a4aa4cd7..92259da8c4 100644 --- a/src/components/SiteSettings/tests/index.test.tsx +++ b/src/components/SiteSettings/tests/index.test.tsx @@ -53,21 +53,15 @@ describe("SiteSettings", () => { await renderSiteSettings(); // Banners tab - await act(async () => { - await agent.click(screen.getByTestId(SiteSettingsTab.Banners)); - }); + await agent.click(screen.getByTestId(SiteSettingsTab.Banners)); isPanelVisible(SiteSettingsTab.Banners); // Projects tab - await act(async () => { - await agent.click(screen.getByTestId(SiteSettingsTab.Projects)); - }); + await agent.click(screen.getByTestId(SiteSettingsTab.Projects)); isPanelVisible(SiteSettingsTab.Projects); // Users tab - await act(async () => { - await agent.click(screen.getByTestId(SiteSettingsTab.Users)); - }); + await agent.click(screen.getByTestId(SiteSettingsTab.Users)); isPanelVisible(SiteSettingsTab.Users); }); }); diff --git a/src/components/TreeView/tests/TreeSearch.test.tsx b/src/components/TreeView/tests/TreeSearch.test.tsx index aabb4d167f..4d92610547 100644 --- a/src/components/TreeView/tests/TreeSearch.test.tsx +++ b/src/components/TreeView/tests/TreeSearch.test.tsx @@ -112,9 +112,7 @@ describe("TreeSearch", () => { render(); expect(getSearchInput().value).toEqual(""); const searchText = "flibbertigibbet"; - await act(async () => { - await userEvent.type(getSearchInput(), `${searchText}{enter}`); - }); + await userEvent.type(getSearchInput(), `${searchText}{enter}`); expect(getSearchInput().value).toEqual(searchText); // verify that no attempt to switch domains happened expect(MOCK_ANIMATE).toHaveBeenCalledTimes(0); @@ -124,9 +122,7 @@ describe("TreeSearch", () => { render(); expect(getSearchInput().value).toEqual(""); setupSpies(domMap[mapIds.lastKid]); - await act(async () => { - await userEvent.type(getSearchInput(), `${mapIds.lastKid}{enter}`); - }); + await userEvent.type(getSearchInput(), `${mapIds.lastKid}{enter}`); expect(getSearchInput().value).toEqual(""); // verify that we would switch to the domain requested expect(MOCK_ANIMATE).toHaveBeenCalledWith(domMap[mapIds.lastKid]); diff --git a/src/components/UserSettings/tests/UserSettings.test.tsx b/src/components/UserSettings/tests/UserSettings.test.tsx index 28a89cb176..d04bf50b7c 100644 --- a/src/components/UserSettings/tests/UserSettings.test.tsx +++ b/src/components/UserSettings/tests/UserSettings.test.tsx @@ -83,8 +83,10 @@ describe("UserSettings", () => { const emailField = screen.getByTestId(UserSettingsIds.FieldEmail); expect(emailField).toHaveValue(user.email); + const nameField = screen.getByTestId(UserSettingsIds.FieldName); expect(nameField).toHaveValue(user.name); + const phoneField = screen.getByTestId(UserSettingsIds.FieldPhone); expect(phoneField).toHaveValue(user.phone); }); @@ -98,13 +100,9 @@ describe("UserSettings", () => { const typeAndCheckEnabled = async (id: UserSettingsIds): Promise => { expect(submitButton).toBeDisabled(); const field = screen.getByTestId(id); - await act(async () => { - await agent.type(field, "?"); - }); + await agent.type(field, "?"); expect(submitButton).toBeEnabled(); - await act(async () => { - await agent.type(field, "{backspace}"); - }); + await agent.type(field, "{backspace}"); }; await typeAndCheckEnabled(UserSettingsIds.FieldEmail); @@ -114,20 +112,16 @@ describe("UserSettings", () => { it("disables button when change is saved", async () => { const agent = userEvent.setup(); - const stringToType = "?"; + const stringToType = "a"; // Valid final character of an email address. const user = mockUser(); await renderUserSettingsGetUser(); const submitButton = screen.getByTestId(UserSettingsIds.ButtonSubmit); const typeAndCheckEnabled = async (id: UserSettingsIds): Promise => { expect(submitButton).toBeDisabled(); - await act(async () => { - await agent.type(screen.getByTestId(id), stringToType); - }); + await agent.type(screen.getByTestId(id), stringToType); expect(submitButton).toBeEnabled(); - await act(async () => { - await agent.click(submitButton); - }); + await agent.click(submitButton); expect(submitButton).toBeDisabled(); }; @@ -148,13 +142,10 @@ describe("UserSettings", () => { const agent = userEvent.setup(); await renderUserSettings(); - await act(async () => { - await agent.type(screen.getByTestId(UserSettingsIds.FieldName), "a"); - }); + await agent.type(screen.getByTestId(UserSettingsIds.FieldName), "a"); expect(mockUpdateUser).toHaveBeenCalledTimes(0); - await act(async () => { - await agent.click(screen.getByTestId(UserSettingsIds.ButtonSubmit)); - }); + + await agent.click(screen.getByTestId(UserSettingsIds.ButtonSubmit)); expect(mockUpdateUser).toHaveBeenCalledTimes(1); }); @@ -162,13 +153,10 @@ describe("UserSettings", () => { const agent = userEvent.setup(); await renderUserSettings(mockUser()); - await act(async () => { - await agent.type(screen.getByTestId(UserSettingsIds.FieldEmail), "a"); - }); + await agent.type(screen.getByTestId(UserSettingsIds.FieldEmail), "a"); mockIsEmailTaken.mockResolvedValueOnce(true); - await act(async () => { - await agent.click(screen.getByTestId(UserSettingsIds.ButtonSubmit)); - }); + + await agent.click(screen.getByTestId(UserSettingsIds.ButtonSubmit)); expect(mockUpdateUser).toHaveBeenCalledTimes(0); }); });