fix: обновление зависимостей

.storybook/main.js

@@ -1,17 +1,17 @@
 module.exports = {
-  "stories": [
-    "../src/components/**/*.stories.mdx",
-    "../src/components/**/*.stories.ts",
-    "../src/components/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: [
+    '../src/components/**/*.stories.mdx',
+    '../src/components/**/*.stories.ts',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app"
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
   ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
-  }
-}
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+};

.storybook/preview.js

@@ -1,13 +1,12 @@
-
 import '../src/styles/styles.css';
 import './styles.css';
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};

.storybook/styles.css

@@ -1,3 +1,3 @@
 html {
-  background-color: #ECEBEB;
+  background-color: #ecebeb;
 }

jest.config.js

@@ -1,6 +1,6 @@
 /** @type {import('jest').Config} */
 const config = {
-  testEnvironment: "node",
+  testEnvironment: 'node',
 };
 
 module.exports = config;

package.json

@@ -3,18 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "classnames": "^2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
+    "typescript": "^4.9.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -28,7 +27,10 @@
   "jest": {
     "moduleNameMapper": {
       "\\.(css|less|scss)$": "identity-obj-proxy",
-      "^.+\\.svg$": "jest-svg-transformer"
+      "^.+\\.svg$": "jest-svg-transformer",
+      "^puppeteer-core/internal/puppeteer-core\\.js$": "<rootDir>/node_modules/puppeteer-core/lib/cjs/puppeteer/puppeteer-core.js",
+      "^puppeteer-core/internal/node/PuppeteerNode\\.js$": "<rootDir>/node_modules/puppeteer-core/lib/cjs/puppeteer/node/PuppeteerNode.js",
+      "^puppeteer-core/internal/revisions\\.js$": "<rootDir>/node_modules/puppeteer-core/lib/cjs/puppeteer/revisions.js"
     }
   },
   "eslintConfig": {
@@ -74,24 +76,21 @@
     "@storybook/preset-create-react-app": "^4.1.2",
     "@storybook/react": "^6.5.10",
     "@storybook/testing-library": "^0.0.13",
-    "@types/jest": "^29.4.0",
-    "@types/jest-image-snapshot": "^6.1.0",
-    "@types/js-yaml": "^4.0.5",
-    "@types/serve-handler": "^6.1.1",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "jest": "^29.4.1",
-    "jest-dev-server": "6.2.0",
-    "jest-environment-jsdom": "^29.4.1",
-    "jest-image-snapshot": "^6.1.0",
+    "@types/jest": "^30.0.0",
+    "@types/jest-image-snapshot": "^6.4.1",
+    "@types/serve-handler": "^6.1.4",
+    "jest": "^30.2.0",
+    "jest-dev-server": "^11.0.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-image-snapshot": "^6.5.1",
     "jest-svg-transformer": "^1.0.0",
-    "prop-types": "^15.8.1",
     "puppeteer": "^19.6.2",
     "sass": "^1.54.3",
     "serve-handler": "6.1.5",
-    "webpack": "^5.74.0"
-  },
-  "resolutions": {
-    "jest": "29.4.1",
-    "jest-environment-jsdom": "29.4.1"
+    "webpack": "^5.74.0",
+    "resolutions": {
+      "jest": "29.4.1",
+      "jest-environment-jsdom": "29.4.1"
+    }
   }
 }

src/__test__/Button.test.tsx

@@ -67,7 +67,7 @@ describe('Тестирование компонента Button', () => {
     expect(buttonElement).not.toBeDisabled();
   });
 
-  test('При передаче loading=true при клике на кнопку onClick не вызывается', () => {
+  test('При передаче loading=true при клике на кнопку onClick не вызывается', async () => {
     const mockOnClick = jest.fn();
     render(
       <Button data-testid={Locators.BUTTON} onClick={mockOnClick} loading>
@@ -76,12 +76,12 @@ describe('Тестирование компонента Button', () => {
     );
 
     const buttonElement = screen.getByTestId(Locators.BUTTON);
-    userEvent.click(buttonElement);
+    await userEvent.click(buttonElement);
 
-    expect(mockOnClick).not.toBeCalled();
+    expect(mockOnClick).not.toHaveBeenCalled();
   });
 
-  test('Переданный onClick вызывается при клике', () => {
+  test('Переданный onClick вызывается при клике', async () => {
     const mockOnClick = jest.fn();
     render(
       <Button onClick={mockOnClick} data-testid={Locators.BUTTON}>
@@ -90,12 +90,12 @@ describe('Тестирование компонента Button', () => {
     );
 
     const buttonElement = screen.getByTestId(Locators.BUTTON);
-    userEvent.click(buttonElement);
+    await userEvent.click(buttonElement);
 
-    expect(mockOnClick).toBeCalledTimes(1);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
 
-  test('При disabled=true не вызывается onClick', () => {
+  test('При disabled=true не вызывается onClick', async () => {
     const mockOnClick = jest.fn();
     const { rerender } = render(
       <Button data-testid={Locators.BUTTON} onClick={mockOnClick} disabled>
@@ -104,18 +104,18 @@ describe('Тестирование компонента Button', () => {
     );
 
     const buttonElement = screen.getByTestId(Locators.BUTTON);
-    userEvent.click(buttonElement);
+    await userEvent.click(buttonElement);
 
-    expect(mockOnClick).not.toBeCalled();
+    expect(mockOnClick).not.toHaveBeenCalled();
 
     rerender(
       <Button data-testid={Locators.BUTTON} onClick={mockOnClick}>
         {BUTTON_TEXT}
       </Button>
     );
-    userEvent.click(buttonElement);
+    await userEvent.click(buttonElement);
 
-    expect(mockOnClick).toBeCalledTimes(1);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
 
   test('При disabled=true проставляется атрибут disabled=true у кнопки', () => {
@@ -147,7 +147,7 @@ describe('Тестирование компонента Button', () => {
     expect(buttonElement).toHaveClass(testClassName);
   });
 
-  test('Пробрасываются все пропсы, которые принимает нативная кнопка', () => {
+  test('Пробрасываются все пропсы, которые принимает нативная кнопка', async () => {
     const onHover = jest.fn();
     const onUnHover = jest.fn();
     const onFocus = jest.fn();
@@ -173,17 +173,17 @@ describe('Тестирование компонента Button', () => {
 
     const buttonElement = screen.getByTestId(Locators.BUTTON);
 
-    userEvent.hover(buttonElement);
-    expect(onHover).toBeCalledTimes(1);
+    await userEvent.hover(buttonElement);
+    expect(onHover).toHaveBeenCalledTimes(1);
 
-    userEvent.unhover(buttonElement);
-    expect(onUnHover).toBeCalledTimes(1);
+    await userEvent.unhover(buttonElement);
+    expect(onUnHover).toHaveBeenCalledTimes(1);
 
-    userEvent.tab();
-    expect(onFocus).toBeCalledTimes(1);
+    await userEvent.tab();
+    expect(onFocus).toHaveBeenCalledTimes(1);
 
-    userEvent.tab();
-    expect(onBlur).toBeCalledTimes(1);
+    await userEvent.tab();
+    expect(onBlur).toHaveBeenCalledTimes(1);
 
     expect(buttonElement).toHaveAttribute('id', id);
     expect(buttonElement).toHaveAttribute('name', name);

src/__test__/Card.test.tsx

@@ -20,7 +20,7 @@ describe('Тестирование компонента Card', () => {
   test('Пропс title в виде элемента передается и отображается', () => {
     render(
       <Card
-      // @ts-ignore
+        // @ts-ignore
         title={<span data-testid={Locators.CARD_TITLE} />}
         subtitle={CARD_SUBTITLE}
         image="--"
@@ -65,7 +65,7 @@ describe('Тестирование компонента Card', () => {
     );
 
     // eslint-disable-next-line testing-library/no-node-access
-    const imageElement = baseElement.querySelector('img')
+    const imageElement = baseElement.querySelector('img');
 
     expect(imageElement).toHaveAttribute('src', testImageSrc);
   });
@@ -87,25 +87,23 @@ describe('Тестирование компонента Card', () => {
     expect(content).not.toBeInTheDocument();
   });
 
-  test('При клике вызывается onClick, если передан', () => {
+  test('При клике вызывается onClick, если передан', async () => {
     const mockOnClick = jest.fn();
-    const { container} = render(
-
-        <Card
-          onClick={mockOnClick}
-          title={CARD_TITLE}
-          subtitle={CARD_SUBTITLE}
-          image="-"
-        />
-
+    const { container } = render(
+      <Card
+        onClick={mockOnClick}
+        title={CARD_TITLE}
+        subtitle={CARD_SUBTITLE}
+        image="-"
+      />
     );
 
     // eslint-disable-next-line testing-library/no-node-access
     const cardElement = container.firstChild;
 
     expect(cardElement).toBeInTheDocument();
-    userEvent.click(cardElement as Element);
-    expect(mockOnClick).toBeCalledTimes(1);
+    await userEvent.click(cardElement as Element);
+    expect(mockOnClick).toHaveBeenCalledTimes(1);
   });
 
   test('Пропс actionSlot передаются и отображается', () => {
@@ -126,13 +124,7 @@ describe('Тестирование компонента Card', () => {
   });
 
   test('Для title и subtitle используется компонент Text', () => {
-    render(
-      <Card
-        image="-"
-        title={CARD_TITLE}
-        subtitle={CARD_SUBTITLE}
-      />
-    );
+    render(<Card image="-" title={CARD_TITLE} subtitle={CARD_SUBTITLE} />);
 
     const texts = screen.getAllByTestId(Locators.TEXT);
     expect(texts.length).toBe(2);

src/__test__/CheckBox.test.tsx

@@ -28,7 +28,7 @@ describe('Тестирование компонента CheckBox', () => {
     expect(checkBoxElement).not.toHaveAttribute('checked', 'false');
   });
 
-  test('При клике на чекбокс вызывается onChange со значением', () => {
+  test('При клике на чекбокс вызывается onChange со значением', async () => {
     const mockOnChange = jest.fn();
     const { rerender } = render(
       <CheckBox
@@ -40,8 +40,8 @@ describe('Тестирование компонента CheckBox', () => {
 
     const checkBoxElement = screen.getByTestId(Locators.CHECKBOX);
 
-    userEvent.click(checkBoxElement);
-    expect(mockOnChange).toBeCalledWith(false);
+    await userEvent.click(checkBoxElement);
+    expect(mockOnChange).toHaveBeenCalledWith(false);
 
     rerender(
       <CheckBox
@@ -51,20 +51,26 @@ describe('Тестирование компонента CheckBox', () => {
       />
     );
 
-    userEvent.click(checkBoxElement);
-    expect(mockOnChange).toBeCalledWith(true);
+    await userEvent.click(checkBoxElement);
+    expect(mockOnChange).toHaveBeenCalledWith(true);
   });
 
   test('Компонент CheckBox использует html-тег input', () => {
-    render(<CheckBox checked={true} onChange={() => {}} data-testid={Locators.CHECKBOX} />);
+    render(
+      <CheckBox
+        checked={true}
+        onChange={() => {}}
+        data-testid={Locators.CHECKBOX}
+      />
+    );
 
     const inputElement = screen.getByTestId(Locators.CHECKBOX);
 
     expect(inputElement.tagName).toBe('INPUT');
     expect(inputElement).toHaveAttribute('type', 'checkbox');
   });
 
-  test('При передаче disabled=true не вызывается onChange', () => {
+  test('При передаче disabled=true не вызывается onChange', async () => {
     const mockOnChange = jest.fn();
     const { rerender } = render(
       <CheckBox
@@ -77,8 +83,8 @@ describe('Тестирование компонента CheckBox', () => {
 
     const checkBoxElement = screen.getByTestId(Locators.CHECKBOX);
 
-    userEvent.click(checkBoxElement);
-    expect(mockOnChange).not.toBeCalled();
+    await userEvent.click(checkBoxElement);
+    expect(mockOnChange).not.toHaveBeenCalled();
 
     rerender(
       <CheckBox
@@ -88,8 +94,8 @@ describe('Тестирование компонента CheckBox', () => {
       />
     );
 
-    userEvent.click(checkBoxElement);
-    expect(mockOnChange).toBeCalled();
+    await userEvent.click(checkBoxElement);
+    expect(mockOnChange).toHaveBeenCalled();
   });
 
   test('При передаче disabled проставляется атрибут disabled на чекбоксе', () => {