Update Vitest (#3867)

* Vitest 4 beta

* Use SHA

* Set up workflow

* first test

* run workflow on lael

* format

* Tweak

* manually run workflow

* typo

* main

* Tweak

* fix syntax

* revert

* Fix step

* Update command

* Do we need this command?

* Revert "Do we need this command?"

This reverts commit 7a66594.

* Does this remove label?

* set env

* try `actions-ecosystem/action-remove-labels`

* New approach

* Does this work

* Update visual regression screenshots

Co-authored-by: amanmahajan7

* Does this work?

* Try this

* Update visual regression screenshots

Co-authored-by: amanmahajan7

* Simplify

* remove name

* Update visual regression screenshots

Co-authored-by: amanmahajan7

* Tweaks

* Fix permissions

* Tweak

* test

* Does this work?

* Update screenshots

Co-authored-by: amanmahajan7

* Tweaks

* Tweak coverage

* Tweak coverage

* Does this work?

* Does this work?

* Does this work?

* Does this work?

* Fix watch

* different coverage directories?

* Fix typo

* Another

* `beta.12`

* Run VRT in FF also

* install ff

* Update screenshots

Co-authored-by: amanmahajan7

* Fix tests

* update package

* update test

* Update screenshots

Co-authored-by: amanmahajan7

* add formatter

* Update screenshots

Co-authored-by: amanmahajan7

* pin

* Still need this :(

* unpin

* Update deps

* Import from `vitest/browser`

* update deps

* Add back clsx

* Fix biome/eslint

* update deps

* Use async render

* Move async

* Fix eslint

* Enable tracing

* Remove VRT changes

* Revert .gitignore changes

* Fix types

* fix 2 tests

* set scale

* Fix tests for now

* Revert commands

* typo

* Update tsconfig.test.json

Co-authored-by: Nicolas Stepien <[email protected]>

* Update package.json

Co-authored-by: Nicolas Stepien <[email protected]>

* Revert "Update package.json"

This reverts commit 41445b1.

* remove @vitest/browser

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Nicolas Stepien <[email protected]>
Co-authored-by: Nicolas Stepien <[email protected]>

Author: 3 people

.gitignore

@@ -9,3 +9,6 @@ __screenshots__
 npm-debug.log
 **.orig
 .idea
+.vitest-attachments
+
+__traces__

README.md

@@ -579,8 +579,8 @@ function MyGrid() {
   return <DataGrid aria-label="my-grid" columns={columns} rows={rows} />;
 }
 
-test('grid', () => {
-  render(<MyGrid />);
+test('grid', async () => {
+  await render(<MyGrid />);
   const grid = screen.getByRole('grid', { name: 'my-grid' });
 });
 ```

package.json

@@ -64,8 +64,8 @@
     "@typescript-eslint/eslint-plugin": "^8.39.1",
     "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "5.0.2",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-istanbul": "^3.2.4",
+    "@vitest/browser-playwright": "^4.0.1",
+    "@vitest/coverage-istanbul": "^4.0.1",
     "@vitest/eslint-plugin": "^1.3.4",
     "@wyw-in-js/rollup": "^0.7.0",
     "@wyw-in-js/vite": "^0.7.0",
@@ -78,7 +78,7 @@
     "eslint-plugin-testing-library": "^7.10.0",
     "jspdf": "^3.0.1",
     "jspdf-autotable": "^5.0.2",
-    "playwright": "^1.54.2",
+    "playwright": "^1.56.1",
     "postcss": "^8.5.2",
     "prettier": "3.6.2",
     "react": "^19.2.0",
@@ -87,8 +87,8 @@
     "rolldown-plugin-dts": "^0.16.1",
     "typescript": "~5.9.2",
     "vite": "npm:rolldown-vite@^7.1.3",
-    "vitest": "^3.2.4",
-    "vitest-browser-react": "^1.0.1"
+    "vitest": "^4.0.1",
+    "vitest-browser-react": "^2.0.0"
   },
   "peerDependencies": {
     "react": "^19.2",

test/browser/TextEditor.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { page, userEvent } from '@vitest/browser/context';
+import { page, userEvent } from 'vitest/browser';
 
 import { DataGrid, textEditor } from '../../src';
 import type { Column } from '../../src';
@@ -27,7 +27,7 @@ function Test() {
 }
 
 test('TextEditor', async () => {
-  page.render(<Test />);
+  await page.render(<Test />);
   const cell = page.getByRole('gridcell');
   await expect.element(cell).toHaveTextContent(/^Tacitus Kilgore$/);
   await userEvent.dblClick(cell);

test/browser/TreeDataGrid.test.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { page, userEvent } from '@vitest/browser/context';
+import { page, userEvent } from 'vitest/browser';
 
 import type { Column } from '../../src';
 import { SelectColumn, textEditor, TreeDataGrid } from '../../src';
@@ -136,7 +136,7 @@ function rowGrouper(rows: readonly Row[], columnKey: string) {
 }
 
 function setup(groupBy: string[], groupIdGetter?: (groupKey: string, parentId?: string) => string) {
-  page.render(<TestGrid groupBy={groupBy} groupIdGetter={groupIdGetter} />);
+  return page.render(<TestGrid groupBy={groupBy} groupIdGetter={groupIdGetter} />);
 }
 
 async function testHeaderCellsContent(expected: readonly string[]) {
@@ -147,27 +147,27 @@ async function testHeaderCellsContent(expected: readonly string[]) {
 }
 
 test('should not group if groupBy is empty', async () => {
-  setup([]);
+  await setup([]);
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '7');
   await testHeaderCellsContent(['', 'Sport', 'Country', 'Year', 'Id']);
   await testRowCount(7);
 });
 
 test('should not group if column does not exist', async () => {
-  setup(['abc']);
+  await setup(['abc']);
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '7');
   await testRowCount(7);
 });
 
 test('should group by single column', async () => {
-  setup(['country']);
+  await setup(['country']);
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '9');
   await testHeaderCellsContent(['', 'Country', 'Sport', 'Year', 'Id']);
   await testRowCount(5);
 });
 
 test('should group by multiple columns', async () => {
-  setup(['country', 'year']);
+  await setup(['country', 'year']);
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '13');
   await testHeaderCellsContent(['', 'Country', 'Year', 'Sport', 'Id']);
   await testRowCount(5);
@@ -177,7 +177,7 @@ test('should use groupIdGetter when provided', async () => {
   const groupIdGetter = vi.fn((groupKey: string, parentId?: string) =>
     parentId !== undefined ? `${groupKey}#${parentId}` : groupKey
   );
-  setup(['country', 'year'], groupIdGetter);
+  await setup(['country', 'year'], groupIdGetter);
   expect(groupIdGetter).toHaveBeenCalled();
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '13');
   await testHeaderCellsContent(['', 'Country', 'Year', 'Sport', 'Id']);
@@ -193,20 +193,20 @@ test('should use groupIdGetter when provided', async () => {
 });
 
 test('should ignore duplicate groupBy columns', async () => {
-  setup(['year', 'year', 'year']);
+  await setup(['year', 'year', 'year']);
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '10');
   await testRowCount(6);
 });
 
 test('should use groupBy order while grouping', async () => {
-  setup(['year', 'country']);
+  await setup(['year', 'country']);
   await expect.element(getTreeGrid()).toHaveAttribute('aria-rowcount', '14');
   await testHeaderCellsContent(['', 'Year', 'Country', 'Sport', 'Id']);
   await testRowCount(6);
 });
 
 test('should toggle group when group cell is clicked', async () => {
-  setup(['year']);
+  await setup(['year']);
   await testRowCount(6);
   const groupCell = getCell('2021');
   await userEvent.click(groupCell);
@@ -216,7 +216,7 @@ test('should toggle group when group cell is clicked', async () => {
 });
 
 test('should toggle group using keyboard', async () => {
-  setup(['year']);
+  await setup(['year']);
   await testRowCount(6);
   const groupCell = getCell('2021');
   await userEvent.click(groupCell);
@@ -231,7 +231,7 @@ test('should toggle group using keyboard', async () => {
 });
 
 test('should set aria-attributes', async () => {
-  setup(['year', 'country']);
+  await setup(['year', 'country']);
 
   const groupRow1 = getRowByCellName('2020');
   await expect.element(groupRow1).toHaveAttribute('aria-level', '1');
@@ -264,7 +264,7 @@ test('should set aria-attributes', async () => {
 });
 
 test('should select rows in a group', async () => {
-  setup(['year', 'country']);
+  await setup(['year', 'country']);
 
   const headerCheckbox = getSelectAllCheckbox();
   await expect.element(headerCheckbox).not.toBeChecked();
@@ -316,7 +316,7 @@ test('should select rows in a group', async () => {
 });
 
 test('cell navigation in a treegrid', async () => {
-  setup(['country', 'year']);
+  await setup(['country', 'year']);
   await testRowCount(5);
   const focusSink = page.getBySelector(`.${focusSinkClassname}`);
 
@@ -399,7 +399,7 @@ test('cell navigation in a treegrid', async () => {
 });
 
 test('copy/paste when grouping is enabled', async () => {
-  setup(['year']);
+  await setup(['year']);
   await userEvent.click(getCell('2021'));
   await userEvent.copy();
   expect(onCellCopySpy).not.toHaveBeenCalled();
@@ -434,7 +434,7 @@ test('copy/paste when grouping is enabled', async () => {
 });
 
 test('update row using cell renderer', async () => {
-  setup(['year']);
+  await setup(['year']);
   await userEvent.click(getCell('2021'));
   await userEvent.click(getCell('USA'));
   await userEvent.keyboard('{arrowright}{arrowright}');
@@ -444,7 +444,7 @@ test('update row using cell renderer', async () => {
 });
 
 test('custom renderGroupCell', async () => {
-  setup(['country']);
+  await setup(['country']);
   await expect.element(getRowByCellName('USA').getByRole('gridcell').nth(4)).toHaveTextContent('1');
   await expect
     .element(getRowByCellName('Canada').getByRole('gridcell').nth(4))

test/browser/column/cellClass.test.ts

@@ -15,7 +15,7 @@ test('cellClass is undefined', async () => {
       name: 'ID'
     }
   ];
-  setup({ columns, rows });
+  await setup({ columns, rows });
   const [cell1, cell2] = getCellsNew('0', '1');
   await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
   await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
@@ -29,7 +29,7 @@ test('cellClass is a string', async () => {
       cellClass: 'my-cell'
     }
   ];
-  setup({ columns, rows });
+  await setup({ columns, rows });
   const [cell1, cell2] = getCellsNew('0', '1');
   await expect.element(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true });
   await expect.element(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true });
@@ -43,7 +43,7 @@ test('cellClass returns a string', async () => {
       cellClass: (row) => `my-cell-${row.id}`
     }
   ];
-  setup({ columns, rows });
+  await setup({ columns, rows });
   const [cell1, cell2] = getCellsNew('0', '1');
   await expect.element(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true });
   await expect.element(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true });
@@ -57,7 +57,7 @@ test('cellClass returns undefined', async () => {
       cellClass: () => undefined
     }
   ];
-  setup({ columns, rows });
+  await setup({ columns, rows });
   const [cell1, cell2] = getCellsNew('0', '1');
   await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
   await expect.element(cell2).toHaveClass(cellClassname, { exact: true });

test/browser/column/colSpan.test.ts

@@ -1,10 +1,10 @@
-import { userEvent } from '@vitest/browser/context';
+import { userEvent } from 'vitest/browser';
 
 import type { Column } from '../../../src';
 import { getCellsAtRowIndex, getHeaderCells, setup, validateCellPosition } from '../utils';
 
 describe('colSpan', () => {
-  function setupColSpanGrid(colCount = 15) {
+  function setupColSpan(colCount = 15) {
     type Row = number;
     const columns: Column<Row, Row>[] = [];
     const rows: readonly Row[] = Array.from({ length: 10 }, (_, i) => i);
@@ -34,11 +34,11 @@ describe('colSpan', () => {
         }
       });
     }
-    setup({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] });
+    return setup({ columns, rows, bottomSummaryRows: [1, 2], topSummaryRows: [1, 2] });
   }
 
-  it('should merges cells', () => {
-    setupColSpanGrid();
+  it('should merges cells', async () => {
+    await setupColSpan();
     // header
     expect(getHeaderCells()).toHaveLength(13);
 
@@ -93,7 +93,7 @@ describe('colSpan', () => {
   });
 
   it('should navigate between merged cells', async () => {
-    setupColSpanGrid();
+    await setupColSpan();
     // header row
     await userEvent.click(getHeaderCells()[7]);
     await validateCellPosition(7, 0);
@@ -171,7 +171,7 @@ describe('colSpan', () => {
   });
 
   it('should scroll to the merged cell when selected', async () => {
-    setupColSpanGrid(30);
+    await setupColSpan(30);
     await userEvent.click(getCellsAtRowIndex(10)[23]); // last visible cell (1920/80)
     const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView');
     const testScrollIntoView = () => {

test/browser/column/draggable.test.ts

@@ -1,4 +1,4 @@
-import { userEvent } from '@vitest/browser/context';
+import { userEvent } from 'vitest/browser';
 
 import type { Column } from '../../../src';
 import { getHeaderCellsNew, setup } from '../utils';
@@ -27,7 +27,7 @@ const columns: readonly Column<never>[] = [
 
 test('draggable columns', async () => {
   const onColumnsReorder = vi.fn();
-  setup({ columns, rows: [], onColumnsReorder });
+  await setup({ columns, rows: [], onColumnsReorder });
   const [cell1, cell2, cell3, cell4] = getHeaderCellsNew('col1', 'col2', 'col3', 'col4');
 
   await expect.element(cell1).not.toHaveAttribute('draggable');

test/browser/column/frozen.test.ts

@@ -1,4 +1,4 @@
-import { page } from '@vitest/browser/context';
+import { page } from 'vitest/browser';
 
 import type { Column } from '../../../src';
 import { cellClassname, cellFrozenClassname } from '../../../src/style/cell';
@@ -27,7 +27,7 @@ test('frozen column have a specific class, and are stable-sorted before non-froz
     }
   ];
 
-  setup({ columns, rows: [] });
+  await setup({ columns, rows: [] });
   await expect.element(page.getByRole('row')).toHaveTextContent('col1col3col2col4');
   const [cell1, cell2, cell3, cell4] = getHeaderCellsNew('col1', 'col2', 'col3', 'col4');
 

test/browser/column/grouping.test.ts

@@ -1,4 +1,4 @@
-import { page, userEvent } from '@vitest/browser/context';
+import { page, userEvent } from 'vitest/browser';
 
 import type { ColumnOrColumnGroup } from '../../../src';
 import {
@@ -95,7 +95,7 @@ const columns: readonly ColumnOrColumnGroup<NonNullable<unknown>>[] = [
 ];
 
 test('grouping', async () => {
-  setup({ columns, rows: [{}] });
+  await setup({ columns, rows: [{}] });
 
   const grid = getGrid();
   await expect.element(grid).toHaveAttribute('aria-colcount', '12');
@@ -253,7 +253,7 @@ test('grouping', async () => {
 });
 
 test('keyboard navigation', async () => {
-  setup({ columns, rows: [{}] }, true);
+  await setup({ columns, rows: [{}] }, true);
 
   // no initial selection
   await expect.element(getSelectedCell()).not.toBeInTheDocument();