[email protected], @testing-library/react@15, Node.js 22 (adazzle#3500)

* [email protected], @testing-library/react@15

* import act from tsl

* adopt Node.js 22

* fix rollup build

Author: nstepien

.eslintrc.cjs

@@ -681,11 +681,6 @@ const rules = {
       name: '@testing-library/dom',
       message: 'Import @testing-library/react instead.'
     },
-    {
-      name: '@testing-library/react',
-      importNames: ['render'],
-      message: 'Use the render helper from test/utils instead.'
-    },
     {
       name: 'lodash',
       message: 'Import lodash-es instead.'

.github/workflows/ci.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '21.x'
+          node-version: '22.x'
           check-latest: true
       - uses: actions/cache@v4
         with:
@@ -25,19 +25,19 @@ jobs:
       - name: npm install
         run: npm i
       - name: Biome
-        run: npm run biome:ci
+        run: node --run biome:ci
       - name: ESLint
-        run: npm run eslint
+        run: node --run eslint
       - name: Prettier
-        run: npm run prettier:check
+        run: node --run prettier:check
       - name: Typecheck
-        run: npm run typecheck
+        run: node --run typecheck
       - name: Bundle
         run: |
-          npm run build
-          npm run build:types
+          node --run build
+          node --run build:types
       - name: Test
-        run: npm t
+        run: npm --run test
         timeout-minutes: 4
       - name: Upload coverage
         uses: codecov/codecov-action@v4
@@ -50,7 +50,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '21.x'
+          node-version: '22.x'
           check-latest: true
       - uses: actions/cache@v4
         with:
@@ -63,7 +63,7 @@ jobs:
       - name: Build
         run: |
           npm i
-          npm run build:website
+          node --run build:website
       - name: Set up git user
         if: github.event_name == 'push'
         run: |

package.json

@@ -44,11 +44,11 @@
     "check": "biome check . --error-on-warnings",
     "biome:ci": "biome ci . --error-on-warnings",
     "eslint": "eslint --ext js,ts,tsx --max-warnings 0 --cache --color src test website vite.config.ts",
-    "eslint:fix": "npm run eslint -- --fix",
+    "eslint:fix": "node --run eslint -- --fix",
     "prettier:check": "prettier --check .",
     "prettier:format": "prettier --write .",
     "typecheck": "tsc",
-    "prepublishOnly": "npm install && npm run build && npm run build:types",
+    "prepublishOnly": "npm install && node --run build && node --run build:types",
     "postpublish": "git push --follow-tags origin HEAD"
   },
   "dependencies": {
@@ -69,12 +69,12 @@
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@testing-library/jest-dom": "^6.2.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/react": "^15.0.5",
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^20.10.3",
-    "@types/react": "^18.2.35",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
     "@vitejs/plugin-react": "^4.2.1",
@@ -88,7 +88,7 @@
     "eslint-plugin-jest-dom": "^5.0.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-sonarjs": "^0.25.1",
     "eslint-plugin-testing-library": "^6.2.0",
     "jsdom": "^24.0.0",
@@ -97,10 +97,10 @@
     "lodash-es": "^4.17.21",
     "postcss": "^8.4.25",
     "prettier": "3.2.5",
-    "react": "^18.1.0",
+    "react": "^18.3.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^6.11.1",
     "rollup": "^4.0.2",
     "rollup-plugin-postcss": "^4.0.2",

rollup.config.js

@@ -3,7 +3,7 @@ import wyw from '@wyw-in-js/rollup';
 import postcss from 'rollup-plugin-postcss';
 import { babel } from '@rollup/plugin-babel';
 import nodeResolve from '@rollup/plugin-node-resolve';
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json' with { type: 'json' };
 
 const extensions = ['.ts', '.tsx'];
 

test/TextEditor.test.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid, { textEditor } from '../src';
 import type { Column } from '../src';
-import { getCells, render } from './utils';
+import { getCells } from './utils';
 
 interface Row {
   readonly name: string;

test/TreeDataGrid.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { screen, within } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { groupBy as rowGrouper } from 'lodash-es';
 
@@ -15,8 +15,7 @@ import {
   getRows,
   getSelectedCell,
   getTreeGrid,
-  pasteSelectedCell,
-  render
+  pasteSelectedCell
 } from './utils';
 
 const rowSelectedClassname = 'rdg-row-selected';

test/column/renderCell.test.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid from '../../src';
 import type { Column } from '../../src';
-import { getCells, getCellsAtRowIndex, render, setup } from '../utils';
+import { getCells, getCellsAtRowIndex, setup } from '../utils';
 
 interface Row {
   id: number;

test/column/renderEditCell.test.tsx

@@ -1,11 +1,11 @@
 import { useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { act, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid from '../../src';
 import type { Column, DataGridProps } from '../../src';
-import { getCellsAtRowIndex, getSelectedCell, render, scrollGrid } from '../utils';
+import { getCellsAtRowIndex, getSelectedCell, scrollGrid } from '../utils';
 
 interface Row {
   col1: number;

test/columnOrder.test.tsx

@@ -1,6 +1,8 @@
+import { render } from '@testing-library/react';
+
 import DataGrid, { SelectColumn, TreeDataGrid } from '../src';
 import type { Column } from '../src';
-import { getHeaderCells, render } from './utils';
+import { getHeaderCells } from './utils';
 
 const frozen1: Column<unknown> = {
   key: 'f1',

test/copyPaste.test.tsx

@@ -1,15 +1,10 @@
 import { useState } from 'react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid from '../src';
 import type { Column, PasteEvent } from '../src';
-import {
-  copySelectedCell,
-  getCellsAtRowIndex,
-  getSelectedCell,
-  pasteSelectedCell,
-  render
-} from './utils';
+import { copySelectedCell, getCellsAtRowIndex, getSelectedCell, pasteSelectedCell } from './utils';
 
 interface Row {
   col: string;

test/dragFill.test.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid from '../src';
 import type { Column, FillEvent } from '../src';
-import { getCellsAtRowIndex, getRows, render } from './utils';
+import { getCellsAtRowIndex, getRows } from './utils';
 
 interface Row {
   col: string;

test/events.test.tsx

@@ -1,9 +1,9 @@
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid from '../src';
 import type { Column, DataGridProps } from '../src';
-import { getCellsAtRowIndex, render } from './utils';
+import { getCellsAtRowIndex } from './utils';
 
 interface Row {
   col1: number;

test/keyboardNavigation.test.tsx

@@ -1,12 +1,11 @@
-import { StrictMode } from 'react';
+import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import type { Column } from '../src';
 import DataGrid, { SelectColumn } from '../src';
 import {
   getCellsAtRowIndex,
   getSelectedCell,
-  render,
   scrollGrid,
   setup,
   validateCellPosition
@@ -294,11 +293,7 @@ test('reset selected cell when column is removed', async () => {
   await userEvent.keyboard('{arrowdown}{arrowright}');
   validateCellPosition(1, 1);
 
-  rerender(
-    <StrictMode>
-      <Test columns={[columns[0]]} />
-    </StrictMode>
-  );
+  rerender(<Test columns={[columns[0]]} />);
 
   expect(getSelectedCell()).not.toBeInTheDocument();
 });
@@ -320,11 +315,7 @@ test('reset selected cell when row is removed', async () => {
   await userEvent.keyboard('{arrowdown}{arrowdown}{arrowright}');
   validateCellPosition(1, 2);
 
-  rerender(
-    <StrictMode>
-      <Test rows={[rows[0]]} />
-    </StrictMode>
-  );
+  rerender(<Test rows={[rows[0]]} />);
 
   expect(getSelectedCell()).not.toBeInTheDocument();
 });

test/renderers.test.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid, { DataGridDefaultRenderersProvider, renderSortIcon, SelectColumn } from '../src';
 import type { Column, DataGridProps, RenderSortStatusProps, SortColumn } from '../src';
-import { getHeaderCells, getRows, render, setup } from './utils';
+import { getHeaderCells, getRows, setup } from './utils';
 
 interface Row {
   id: number;

test/rowSelection.test.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { screen, within } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid, { SelectColumn } from '../src';
 import type { Column } from '../src';
-import { getCellsAtRowIndex, getRows, render } from './utils';
+import { getCellsAtRowIndex, getRows } from './utils';
 
 interface Row {
   id: number;

test/scrollToCell.test.tsx

@@ -1,11 +1,10 @@
 import { useRef } from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import type { Column, DataGridHandle } from '../src';
 import DataGrid from '../src';
 import type { PartialPosition } from '../src/ScrollToCell';
-import { render } from './utils';
 
 type Row = undefined;
 

test/setup.ts

@@ -1,7 +1,9 @@
-import { act } from 'react-dom/test-utils';
-import { configure } from '@testing-library/react';
+import { act, configure } from '@testing-library/react';
 
-configure({ throwSuggestions: true });
+configure({
+  reactStrictMode: true,
+  throwSuggestions: true
+});
 
 // Allow node-environment tests to properly fail when accessing DOM APIs,
 // as @testing-library/jest-dom may polyfill some DOM APIs like `window.CSS`

test/sorting.test.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
-import { screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import DataGrid from '../src';
 import type { Column, SortColumn } from '../src/types';
-import { getHeaderCells, render } from './utils';
+import { getHeaderCells } from './utils';
 
 const columns: readonly Column<unknown>[] = [
   { key: 'colA', name: 'colA' },

test/utils.tsx

@@ -1,14 +1,8 @@
-import { StrictMode } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { act, fireEvent, render as rtlRender, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 
 import DataGrid from '../src/';
 import type { DataGridProps } from '../src/';
 
-export function render(child: React.ReactElement) {
-  return rtlRender(<StrictMode>{child}</StrictMode>);
-}
-
 export function setup<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>) {
   return render(<DataGrid {...props} />);
 }