From 9f72bc55ae35987a218406789ee790bd00bf3a4a Mon Sep 17 00:00:00 2001 From: Valerii Sidorenko Date: Fri, 14 Jun 2024 13:45:13 +0200 Subject: [PATCH] chore: update testing library --- package-lock.json | 68 +++++++++++-------- package.json | 5 +- .../__tests__/ClipboardButton.test.tsx | 4 +- test-utils/utils.tsx | 6 +- 4 files changed, 47 insertions(+), 36 deletions(-) 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}