diff --git a/package.json b/package.json index 2e65ee2a0..81a3dd843 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@storybook/test": "^7.6.17", "@testing-library/cypress": "^7.0.6", "@testing-library/jest-dom": "^5.16.4", - "@testing-library/react": "^13.0.1", + "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.1.0", "@types/eslint": "^7.28.0", "@types/fs-extra": "^11", diff --git a/packages/react/focus-scope/src/FocusScope.test.tsx b/packages/react/focus-scope/src/FocusScope.test.tsx index 6cbe92884..9d43f549c 100644 --- a/packages/react/focus-scope/src/FocusScope.test.tsx +++ b/packages/react/focus-scope/src/FocusScope.test.tsx @@ -35,21 +35,27 @@ describe('FocusScope', () => { }); it('should focus the next element in the scope on tab', () => { - tabbableFirst.focus(); - userEvent.tab(); - waitFor(() => expect(tabbableSecond).toHaveFocus()); + React.act(() => { + tabbableFirst.focus(); + userEvent.tab(); + waitFor(() => expect(tabbableSecond).toHaveFocus()); + }); }); it('should focus the last element in the scope on shift+tab from the first element in scope', () => { - tabbableFirst.focus(); - userEvent.tab({ shift: true }); - waitFor(() => expect(tabbableLast).toHaveFocus()); + React.act(() => { + tabbableFirst.focus(); + userEvent.tab({ shift: true }); + waitFor(() => expect(tabbableLast).toHaveFocus()); + }); }); it('should focus the first element in scope on tab from the last element in scope', async () => { - tabbableLast.focus(); - userEvent.tab(); - waitFor(() => expect(tabbableFirst).toHaveFocus()); + React.act(() => { + tabbableLast.focus(); + userEvent.tab(); + waitFor(() => expect(tabbableFirst).toHaveFocus()); + }); }); }); @@ -77,15 +83,19 @@ describe('FocusScope', () => { }); it('should skip the element with a negative tabindex on tab', () => { - tabbableLast.focus(); - userEvent.tab(); - waitFor(() => expect(tabbableSecond).toHaveFocus()); + React.act(() => { + tabbableLast.focus(); + userEvent.tab(); + waitFor(() => expect(tabbableSecond).toHaveFocus()); + }); }); it('should skip the element with a negative tabindex on shift+tab', () => { - tabbableSecond.focus(); - userEvent.tab({ shift: true }); - waitFor(() => expect(tabbableLast).toHaveFocus()); + React.act(() => { + tabbableSecond.focus(); + userEvent.tab({ shift: true }); + waitFor(() => expect(tabbableLast).toHaveFocus()); + }); }); }); @@ -109,10 +119,12 @@ describe('FocusScope', () => { it('should properly blur the last element in the scope before cycling back', async () => { // Tab back and then tab forward to cycle through the scope - tabbableFirst.focus(); - userEvent.tab({ shift: true }); - userEvent.tab(); - waitFor(() => expect(handleLastFocusableElementBlur).toHaveBeenCalledTimes(1)); + React.act(() => { + tabbableFirst.focus(); + userEvent.tab({ shift: true }); + userEvent.tab(); + waitFor(() => expect(handleLastFocusableElementBlur).toHaveBeenCalledTimes(1)); + }); }); }); }); diff --git a/yarn.lock b/yarn.lock index 899007e7b..756af1588 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5919,6 +5919,22 @@ __metadata: languageName: node linkType: hard +"@testing-library/dom@npm:^10.0.0": + version: 10.1.0 + resolution: "@testing-library/dom@npm:10.1.0" + dependencies: + "@babel/code-frame": "npm:^7.10.4" + "@babel/runtime": "npm:^7.12.5" + "@types/aria-query": "npm:^5.0.1" + aria-query: "npm:5.3.0" + chalk: "npm:^4.1.0" + dom-accessibility-api: "npm:^0.5.9" + lz-string: "npm:^1.5.0" + pretty-format: "npm:^27.0.2" + checksum: 10/6d6ef942deedf547180c76d4cc2c43fe8e52a98ef68be6ba7382a43d3b1e1e5696d9c32ae0b2df12c92ea50023187d132ad2542fc118ba4b900f149e97d019e0 + languageName: node + linkType: hard + "@testing-library/dom@npm:^7.22.3, @testing-library/dom@npm:^7.29.6": version: 7.31.2 resolution: "@testing-library/dom@npm:7.31.2" @@ -5935,22 +5951,6 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^8.5.0": - version: 8.20.1 - resolution: "@testing-library/dom@npm:8.20.1" - dependencies: - "@babel/code-frame": "npm:^7.10.4" - "@babel/runtime": "npm:^7.12.5" - "@types/aria-query": "npm:^5.0.1" - aria-query: "npm:5.1.3" - chalk: "npm:^4.1.0" - dom-accessibility-api: "npm:^0.5.9" - lz-string: "npm:^1.5.0" - pretty-format: "npm:^27.0.2" - checksum: 10/6c7a92fcc89931ef62a9a92dacec09b3e5ee5c3aba2171aa8de6c7504927b7c9364d73d2ed87b72447d6783108c1c92c207d16f788de64c69bc97059d7105e3c - languageName: node - linkType: hard - "@testing-library/dom@npm:^9.3.1": version: 9.3.4 resolution: "@testing-library/dom@npm:9.3.4" @@ -6030,17 +6030,21 @@ __metadata: languageName: node linkType: hard -"@testing-library/react@npm:^13.0.1": - version: 13.4.0 - resolution: "@testing-library/react@npm:13.4.0" +"@testing-library/react@npm:^15.0.7": + version: 15.0.7 + resolution: "@testing-library/react@npm:15.0.7" dependencies: "@babel/runtime": "npm:^7.12.5" - "@testing-library/dom": "npm:^8.5.0" + "@testing-library/dom": "npm:^10.0.0" "@types/react-dom": "npm:^18.0.0" peerDependencies: + "@types/react": ^18.0.0 react: ^18.0.0 react-dom: ^18.0.0 - checksum: 10/788249aad25a0161b197b7d387011e2578701ab18451b69a987eb073b2d24eb1041f242581c3dd4800f5abcf4f11811f5f6b1e682a45f1840a08fdde3ce559b7 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/a9342ad09b019b0f99688fb50265899bc93adfe23c22aa6743fd920635b43fdc66877e66d95f240923aa6f7d3aa360837f5b053fb363a31975788974dff7bc93 languageName: node linkType: hard @@ -7340,6 +7344,15 @@ __metadata: languageName: node linkType: hard +"aria-query@npm:5.3.0, aria-query@npm:^5.0.0, aria-query@npm:^5.3.0": + version: 5.3.0 + resolution: "aria-query@npm:5.3.0" + dependencies: + dequal: "npm:^2.0.3" + checksum: 10/c3e1ed127cc6886fea4732e97dd6d3c3938e64180803acfb9df8955517c4943760746ffaf4020ce8f7ffaa7556a3b5f85c3769a1f5ca74a1288e02d042f9ae4e + languageName: node + linkType: hard + "aria-query@npm:^4.2.2": version: 4.2.2 resolution: "aria-query@npm:4.2.2" @@ -7350,15 +7363,6 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0": - version: 5.3.0 - resolution: "aria-query@npm:5.3.0" - dependencies: - dequal: "npm:^2.0.3" - checksum: 10/c3e1ed127cc6886fea4732e97dd6d3c3938e64180803acfb9df8955517c4943760746ffaf4020ce8f7ffaa7556a3b5f85c3769a1f5ca74a1288e02d042f9ae4e - languageName: node - linkType: hard - "array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1": version: 1.0.1 resolution: "array-buffer-byte-length@npm:1.0.1" @@ -15138,7 +15142,7 @@ __metadata: "@storybook/test": "npm:^7.6.17" "@testing-library/cypress": "npm:^7.0.6" "@testing-library/jest-dom": "npm:^5.16.4" - "@testing-library/react": "npm:^13.0.1" + "@testing-library/react": "npm:^15.0.7" "@testing-library/user-event": "npm:^14.1.0" "@types/eslint": "npm:^7.28.0" "@types/fs-extra": "npm:^11"