Use vitest-browser-react and browserUserEvent (#3629)

* Try out vitest-browser-react

* skip eslint

* Disable

* Revert

* Use `.fill`

* Fix node tests

* Use page object

* Use vitest browser api

* eslint

* increase timeout?

* increase again

* revert timout changes

* Fix tests

* tweak

* increase delay

* Address comments, pin eslint to fix build

* Using `expect.element`

* Update test/browser/column/renderEditCell.test.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

---------

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

eslint.config.js

@@ -707,7 +707,7 @@ export default [
       'testing-library/prefer-presence-queries': 1,
       'testing-library/prefer-query-by-disappearance': 1,
       'testing-library/prefer-query-matchers': 0,
-      'testing-library/prefer-screen-queries': 1,
+      'testing-library/prefer-screen-queries': 0,
       'testing-library/prefer-user-event': 1,
       'testing-library/render-result-naming-convention': 0
     }

package.json

@@ -87,7 +87,7 @@
     "@wyw-in-js/vite": "^0.5.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "browserslist": "^4.24.0",
-    "eslint": "^9.14.0",
+    "eslint": "9.14.0",
     "eslint-plugin-jest-dom": "^5.0.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110",
@@ -108,7 +108,8 @@
     "rollup-plugin-postcss": "^4.0.2",
     "typescript": "~5.6.2",
     "vite": "^5.4.5",
-    "vitest": "^2.1.1"
+    "vitest": "^2.1.1",
+    "vitest-browser-react": "^0.0.3"
   },
   "peerDependencies": {
     "react": "^18.0 || ^19.0",

test/browser/TextEditor.test.tsx

@@ -1,16 +1,24 @@
 import { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { page, userEvent } from '@vitest/browser/context';
 
 import DataGrid, { textEditor } from '../../src';
 import type { Column } from '../../src';
-import { getCells } from './utils';
+import { getCellsNew } from './utils';
 
 interface Row {
   readonly name: string;
 }
 
-const columns: readonly Column<Row>[] = [{ key: 'name', name: 'Name', renderEditCell: textEditor }];
+const columns: readonly Column<Row>[] = [
+  {
+    key: 'name',
+    name: 'Name',
+    renderEditCell: textEditor,
+    editorOptions: {
+      commitOnOutsideClick: false
+    }
+  }
+];
 const initialRows: readonly Row[] = [{ name: 'Tacitus Kilgore' }];
 
 function Test() {
@@ -20,10 +28,10 @@ function Test() {
 }
 
 test('TextEditor', async () => {
-  render(<Test />);
+  page.render(<Test />);
 
-  await userEvent.dblClick(getCells()[0]);
-  let input: HTMLInputElement | null = screen.getByRole<HTMLInputElement>('textbox');
+  await userEvent.dblClick(getCellsNew()[0]);
+  let input = page.getByRole('textbox').element() as HTMLInputElement;
   expect(input).toHaveClass('rdg-text-editor');
   // input value is row[column.key]
   expect(input).toHaveValue(initialRows[0].name);
@@ -36,13 +44,13 @@ test('TextEditor', async () => {
   // pressing escape closes the editor without committing
   await userEvent.keyboard('Test{escape}');
   expect(input).not.toBeInTheDocument();
-  expect(getCells()[0]).toHaveTextContent(/^Tacitus Kilgore$/);
+  await expect.element(getCellsNew()[0]).toHaveTextContent(/^Tacitus Kilgore$/);
 
   // blurring the input closes and commits the editor
-  await userEvent.dblClick(getCells()[0]);
-  input = screen.getByRole<HTMLInputElement>('textbox');
-  await userEvent.keyboard('Jim Milton');
-  fireEvent.blur(input);
+  await userEvent.dblClick(getCellsNew()[0]);
+  input = page.getByRole('textbox').element() as HTMLInputElement;
+  await userEvent.fill(input, 'Jim Milton');
+  await userEvent.tab();
   expect(input).not.toBeInTheDocument();
-  expect(getCells()[0]).toHaveTextContent(/^Jim Milton$/);
+  await expect.element(getCellsNew()[0]).toHaveTextContent(/^Jim Milton$/);
 });