Try out vitest-browser-react

Author: amanmahajan7

package.json

@@ -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,6 +1,6 @@
 import { useState } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from '@vitest/browser/context';
+import { render } from 'vitest-browser-react';
 
 import DataGrid, { textEditor } from '../../src';
 import type { Column } from '../../src';
@@ -10,7 +10,16 @@ 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 +29,10 @@ function Test() {
 }
 
 test('TextEditor', async () => {
-  render(<Test />);
+  const screen = render(<Test />);
 
   await userEvent.dblClick(getCells()[0]);
-  let input: HTMLInputElement | null = screen.getByRole<HTMLInputElement>('textbox');
+  let input = screen.getByRole('textbox').element() as HTMLInputElement;
   expect(input).toHaveClass('rdg-text-editor');
   // input value is row[column.key]
   expect(input).toHaveValue(initialRows[0].name);
@@ -40,9 +49,9 @@ test('TextEditor', async () => {
 
   // blurring the input closes and commits the editor
   await userEvent.dblClick(getCells()[0]);
-  input = screen.getByRole<HTMLInputElement>('textbox');
+  input = screen.getByRole('textbox').element() as HTMLInputElement;
   await userEvent.keyboard('Jim Milton');
-  fireEvent.blur(input);
-  expect(input).not.toBeInTheDocument();
+  await userEvent.tab();
+  await expect.element(input).not.toBeInTheDocument();
   expect(getCells()[0]).toHaveTextContent(/^Jim Milton$/);
 });

test/setup.ts

@@ -1,6 +1,11 @@
 import { configure } from '@testing-library/react';
+import { configure as vitestReactConfigure } from 'vitest-browser-react/pure';
 
 configure({
   reactStrictMode: true,
   throwSuggestions: true
 });
+
+vitestReactConfigure({
+  reactStrictMode: true
+});