test: upgrade testing library packages

securityscorecard · Dec 5, 2024 · e09f61c · e09f61c
1 parent 0782879
commit e09f61c
Show file tree

Hide file tree

Showing 28 changed files with 298 additions and 303 deletions.
diff --git a/package.json b/package.json
@@ -139,10 +139,9 @@
     "@storybook/react-vite": "^8.4.4",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/theming": "^8.4.4",
-    "@testing-library/dom": ">=7.21.4",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^13.5.0",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.1",
@@ -152,7 +151,6 @@
     "@types/react-table": "7.7.14",
     "@types/rollup-plugin-auto-external": "^2.0.5",
     "@types/styled-components": "^5.1.24",
-    "@types/testing-library__jest-dom": "^5.14.3",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
     "@typescript-eslint/parser": "^7.14.1",
     "@vitejs/plugin-react": "^4.3.1",
@@ -168,15 +166,15 @@
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-fp": "^2.3.0",
     "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-jest-dom": "^4.0.1",
+    "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-jsx-a11y": "^6.3.0",
     "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-ramda": "^2.5.1",
     "eslint-plugin-react": "7.34.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-plugin-storybook": "^0.9.0",
-    "eslint-plugin-testing-library": "^5.1.0",
+    "eslint-plugin-testing-library": "^7.1.0",
     "happy-dom": "^15.11.7",
     "history": "^5.3.0",
     "http-server": "^14.1.1",

diff --git a/src/components/Accordion/Accordion.test.tsx b/src/components/Accordion/Accordion.test.tsx
@@ -42,30 +42,30 @@ describe('Accordion', () => {
     { id: 3, title: 'Item 3', content: 'Content 3' },
   ];
 
-  it('should open accordion item on click', () => {
+  it('should open accordion item on click', async () => {
     render(<Accordion items={items} />);
 
     expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
-    userEvent.click(screen.getByText('Item 1'));
+    await userEvent.click(screen.getByText('Item 1'));
     expect(screen.getByText('Content 1')).toBeVisible();
   });
 
-  it('should close accordion item if another item is opened', () => {
+  it('should close accordion item if another item is opened', async () => {
     render(<Accordion items={items} />);
 
-    userEvent.click(screen.getByText('Item 1'));
+    await userEvent.click(screen.getByText('Item 1'));
     expect(screen.getByText('Content 1')).toBeVisible();
 
-    userEvent.click(screen.getByText('Item 2'));
+    await userEvent.click(screen.getByText('Item 2'));
     expect(screen.getByText('Content 2')).toBeVisible();
     expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
   });
 
   it('should open multiple accordion items if if `isCollapsedOnOpen` is set to `false`', async () => {
     render(<Accordion items={items} isCollapsedOnOpen={false} />);
 
-    userEvent.click(screen.getByText('Item 1'));
-    userEvent.click(screen.getByText('Item 2'));
+    await userEvent.click(screen.getByText('Item 1'));
+    await userEvent.click(screen.getByText('Item 2'));
 
     expect(await screen.findByText('Content 1')).toBeVisible();
     expect(await screen.findByText('Content 2')).toBeVisible();
@@ -89,7 +89,7 @@ describe('Accordion', () => {
     expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
   });
 
-  it('should handle click events correctly, updating the state based on whether the item is already open and the `isCollapsedOnOpen` setting', () => {
+  it('should handle click events correctly, updating the state based on whether the item is already open and the `isCollapsedOnOpen` setting', async () => {
     const onChangeMock = vi.fn();
     render(
       <Accordion
@@ -99,10 +99,10 @@ describe('Accordion', () => {
       />,
     );
 
-    userEvent.click(screen.getByText('Item 1'));
+    await userEvent.click(screen.getByText('Item 1'));
     expect(onChangeMock).toHaveBeenCalledWith([2, 1]); // Item 2 was initially open, now Item 1 is also open
 
-    userEvent.click(screen.getByText('Item 2'));
+    await userEvent.click(screen.getByText('Item 2'));
     expect(onChangeMock).toHaveBeenCalledWith([1]); // Item 2 is now closed, Item 1 remains open
   });
 });
diff --git a/src/components/Datatable/ControlsModule/ControlsModule.test.tsx b/src/components/Datatable/ControlsModule/ControlsModule.test.tsx
@@ -228,7 +228,7 @@ describe('Datatable/ControlsModule', () => {
       expect(DatatableStore.getRawState().filters).toMatchObject(filterState);
       expect(DatatableStore.getRawState().hasAppliedFilters).toBe(true);
     });
-    it('should store filtering state when on filter Apply button', () => {
+    it('should store filtering state when on filter Apply button', async () => {
       renderWithProviders(
         <ControlsModule
           {...defaultControlsConfig}
@@ -240,7 +240,7 @@ describe('Datatable/ControlsModule', () => {
         />,
       );
 
-      userEvent.type(screen.getByPlaceholderText('String'), 'text');
+      await userEvent.type(screen.getByPlaceholderText('String'), 'text');
       fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
 
       expect(DatatableStore.getRawState().filters).toMatchObject([
@@ -255,7 +255,7 @@ describe('Datatable/ControlsModule', () => {
       ]);
       expect(DatatableStore.getRawState().hasAppliedFilters).toBe(true);
     });
-    it('should clear filtering state when on filter Clear all button', () => {
+    it('should clear filtering state when on filter Clear all button', async () => {
       renderWithProviders(
         <ControlsModule
           {...defaultControlsConfig}
@@ -267,7 +267,7 @@ describe('Datatable/ControlsModule', () => {
         />,
       );
 
-      userEvent.type(screen.getByPlaceholderText('String'), 'text');
+      await userEvent.type(screen.getByPlaceholderText('String'), 'text');
       fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
       fireEvent.click(screen.getByRole('button', { name: /Clear all/i }));
 
@@ -286,7 +286,10 @@ describe('Datatable/ControlsModule', () => {
         />,
       );
 
-      userEvent.type(screen.getByPlaceholderText('Search'), `${query}{enter}`);
+      await userEvent.type(
+        screen.getByPlaceholderText('Search'),
+        `${query}{enter}`,
+      );
 
       await waitFor(() =>
         expect(DatatableStore.getRawState().query).toBe(query),
@@ -304,7 +307,7 @@ describe('Datatable/ControlsModule', () => {
         />,
       );
 
-      userEvent.type(screen.getByRole('searchbox'), `${query}{enter}`);
+      await userEvent.type(screen.getByRole('searchbox'), `${query}{enter}`);
       fireEvent.click(
         screen.getByRole('button', { name: /Clear search value/i }),
       );

diff --git a/src/components/Datatable/Datatable.test.tsx b/src/components/Datatable/Datatable.test.tsx
@@ -83,7 +83,7 @@ describe('Datatable', () => {
     expect(onDataFetchMock).not.toHaveBeenCalled();
   });
   describe('on request cancelation', () => {
-    it('should call "onCancelLoading"', () => {
+    it('should call "onCancelLoading"', async () => {
       const onCancelLoading = vi.fn();
       renderWithProviders(
         <Datatable<Data>
@@ -99,7 +99,7 @@ describe('Datatable', () => {
 
       expect(DatatableStore.getRawState().isCanceled).toBe(false);
 
-      userEvent.click(
+      await userEvent.click(
         screen.getAllByRole('button', {
           name: /Cancel/i,
         })[0],
@@ -113,7 +113,7 @@ describe('Datatable', () => {
   it('should reset selected rows when data changes', async () => {
     renderWithProviders(<TestDatatableComponent />);
 
-    userEvent.click(
+    await userEvent.click(
       screen.getAllByRole('checkbox', {
         name: /Toggle select/i,
       })[2],
@@ -124,11 +124,11 @@ describe('Datatable', () => {
     await waitFor(() =>
       expect(elementCounter).toHaveTextContent(/^1 of 3 selected$/),
     );
-    userEvent.click(screen.getByRole('button', { name: /Remove/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Remove/i }));
 
     await waitFor(() => expect(elementCounter).toHaveTextContent(/^2$/));
 
-    userEvent.click(
+    await userEvent.click(
       screen.getAllByRole('checkbox', {
         name: /Toggle select/i,
       })[2],