chore: update testing library (#1643)

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",

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(<ClipboardButton text="Text to copy" onCopy={onCopy} />);
         const button = screen.getByRole('button');
-        button.focus();
+        act(() => button.focus());
         await user.keyboard(key);
 
         expect(onCopy).toHaveBeenCalledWith('Text to copy', true);

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 <ThemeContext.Provider value={themeContextValue}>{children}</ThemeContext.Provider>;
 }
 
-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 (
             <Providers>
                 <Component>{children}</Component>