diff --git a/package-lock.json b/package-lock.json
index c8b2cd4d5e..8d1a7c443f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -49,8 +49,9 @@
"@storybook/preview-api": "^8.0.5",
"@storybook/react-webpack5": "^8.0.5",
"@storybook/test-runner": "^0.17.0",
- "@testing-library/jest-dom": "^6.3.0",
- "@testing-library/react": "^14.1.2",
+ "@testing-library/dom": "^10.1.0",
+ "@testing-library/jest-dom": "^6.4.6",
+ "@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/blueimp-md5": "^2.18.2",
"@types/chroma-js": "^2.4.3",
@@ -115,9 +116,9 @@
}
},
"node_modules/@adobe/css-tools": {
- "version": "4.3.3",
- "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
- "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.0.tgz",
+ "integrity": "sha512-Ff9+ksdQQB3rMncgqDK78uLznstjyfIf2Arnh22pW8kBpLs6rpKDwgnZT46hin5Hl1WzazzK64DOrhSwYpS7bQ==",
"dev": true
},
"node_modules/@ampproject/remapping": {
@@ -6487,22 +6488,22 @@
"dev": true
},
"node_modules/@testing-library/dom": {
- "version": "9.3.0",
- "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.0.tgz",
- "integrity": "sha512-Dffe68pGwI6WlLRYR2I0piIkyole9cSBH5jGQKCGMRpHW5RHCqAUaqc2Kv0tUyd4dU4DLPKhJIjyKOnjv4tuUw==",
+ "version": "10.1.0",
+ "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.1.0.tgz",
+ "integrity": "sha512-wdsYKy5zupPyLCW2Je5DLHSxSfbIp6h80WoHOQc+RPtmPGA52O9x5MJEkv92Sjonpq+poOAtUKhh1kBGAXBrNA==",
"dev": true,
"dependencies": {
"@babel/code-frame": "^7.10.4",
"@babel/runtime": "^7.12.5",
"@types/aria-query": "^5.0.1",
- "aria-query": "^5.0.0",
+ "aria-query": "5.3.0",
"chalk": "^4.1.0",
"dom-accessibility-api": "^0.5.9",
"lz-string": "^1.5.0",
"pretty-format": "^27.0.2"
},
"engines": {
- "node": ">=14"
+ "node": ">=18"
}
},
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
@@ -6558,18 +6559,18 @@
}
},
"node_modules/@testing-library/jest-dom": {
- "version": "6.3.0",
- "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.3.0.tgz",
- "integrity": "sha512-hJVIrkFizEQxoWsGBlycTcQhrpoCH4DhXfrnHFFXgkx3Xdm15zycsq5Ep+vpw4W8S0NJa8cxDHcuJib+1tEbhg==",
+ "version": "6.4.6",
+ "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.4.6.tgz",
+ "integrity": "sha512-8qpnGVincVDLEcQXWaHOf6zmlbwTKc6Us6PPu4CRnPXCzo2OGBS5cwgMMOWdxDpEz1mkbvXHpEy99M5Yvt682w==",
"dev": true,
"dependencies": {
- "@adobe/css-tools": "^4.3.2",
+ "@adobe/css-tools": "^4.4.0",
"@babel/runtime": "^7.9.2",
"aria-query": "^5.0.0",
"chalk": "^3.0.0",
"css.escape": "^1.5.1",
"dom-accessibility-api": "^0.6.3",
- "lodash": "^4.17.15",
+ "lodash": "^4.17.21",
"redent": "^3.0.0"
},
"engines": {
@@ -6658,21 +6659,30 @@
}
},
"node_modules/@testing-library/react": {
- "version": "14.1.2",
- "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.1.2.tgz",
- "integrity": "sha512-z4p7DVBTPjKM5qDZ0t5ZjzkpSNb+fZy1u6bzO7kk8oeGagpPCAtgh4cx1syrfp7a+QWkM021jGqjJaxJJnXAZg==",
+ "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"
+ },
+ "peerDependenciesMeta": {
+ "@types/react": {
+ "optional": true
+ },
+ "@types/react-dom": {
+ "optional": true
+ }
}
},
"node_modules/@testing-library/user-event": {
@@ -6698,9 +6708,9 @@
}
},
"node_modules/@types/aria-query": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
- "integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
+ "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
},
"node_modules/@types/babel__core": {
@@ -8561,12 +8571,12 @@
}
},
"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==",
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
+ "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
"dev": true,
"dependencies": {
- "deep-equal": "^2.0.5"
+ "dequal": "^2.0.3"
}
},
"node_modules/arr-diff": {
diff --git a/package.json b/package.json
index 865f62934a..89ec028f1e 100644
--- a/package.json
+++ b/package.json
@@ -146,8 +146,9 @@
"@storybook/preview-api": "^8.0.5",
"@storybook/react-webpack5": "^8.0.5",
"@storybook/test-runner": "^0.17.0",
- "@testing-library/jest-dom": "^6.3.0",
- "@testing-library/react": "^14.1.2",
+ "@testing-library/dom": "^10.1.0",
+ "@testing-library/jest-dom": "^6.4.6",
+ "@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.2",
"@types/blueimp-md5": "^2.18.2",
"@types/chroma-js": "^2.4.3",
diff --git a/src/components/ClipboardButton/__tests__/ClipboardButton.test.tsx b/src/components/ClipboardButton/__tests__/ClipboardButton.test.tsx
index 627b8c1e16..ef7cc39be7 100644
--- a/src/components/ClipboardButton/__tests__/ClipboardButton.test.tsx
+++ b/src/components/ClipboardButton/__tests__/ClipboardButton.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import userEvent from '@testing-library/user-event';
-import {render, screen} from '../../../../test-utils/utils';
+import {act, render, screen} from '../../../../test-utils/utils';
import {ClipboardButton} from '../ClipboardButton';
describe('ClipboardButton', () => {
@@ -28,7 +28,7 @@ describe('ClipboardButton', () => {
render();
const button = screen.getByRole('button');
- button.focus();
+ act(() => button.focus());
await user.keyboard(key);
expect(onCopy).toHaveBeenCalledWith('Text to copy', true);
diff --git a/test-utils/utils.tsx b/test-utils/utils.tsx
index b673908ce1..12c9b7aefa 100644
--- a/test-utils/utils.tsx
+++ b/test-utils/utils.tsx
@@ -14,12 +14,12 @@ const themeContextValue: ThemeContextProps = {
themeValue: 'light',
};
-function Providers({children}: {children: React.ReactElement}) {
+function Providers({children}: {children: React.ReactNode}) {
return {children};
}
-function createWrapper(Component: React.JSXElementConstructor<{children: React.ReactElement}>) {
- return function Wrapper({children}: {children: React.ReactElement}) {
+function createWrapper(Component: React.JSXElementConstructor<{children: React.ReactNode}>) {
+ return function Wrapper({children}: {children: React.ReactNode}) {
return (
{children}