Migrate remaining tests to vitest-browser-react and browserUserEvent (#3640)

https://github.com/vitest-dev/vitest-browser-react
https://vitest.dev/guide/browser/interactivity-api.html

Author: amanmahajan7

eslint.config.js

@@ -573,10 +573,6 @@ export default defineConfig([
           name: 'react-dom',
           importNames: ['default'],
           message: 'Use named imports instead.'
-        },
-        {
-          name: '@testing-library/dom',
-          message: 'Import @testing-library/react instead.'
         }
       ],
       '@typescript-eslint/no-shadow': 0,
@@ -702,7 +698,7 @@ export default defineConfig([
       'testing-library/prefer-explicit-assert': 1,
       'testing-library/prefer-find-by': 1,
       'testing-library/prefer-implicit-assert': 0,
-      'testing-library/prefer-presence-queries': 1,
+      'testing-library/prefer-presence-queries': 0,
       'testing-library/prefer-query-by-disappearance': 1,
       'testing-library/prefer-query-matchers': 0,
       'testing-library/prefer-screen-queries': 0,

package.json

@@ -62,9 +62,6 @@
     "@microsoft/api-extractor": "^7.50.0",
     "@tanstack/react-router": "^1.114.16",
     "@tanstack/router-plugin": "^1.114.16",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.13.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",

test/browser/TreeDataGrid.test.tsx

@@ -8,7 +8,7 @@ interface Row {
 
 const rows: readonly Row[] = [{ id: 0 }, { id: 1 }];
 
-test('cellClass is undefined', async () => {
+test('cellClass is undefined', () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
@@ -17,11 +17,11 @@ test('cellClass is undefined', async () => {
   ];
   setup({ columns, rows });
   const [cell1, cell2] = getCells();
-  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
-  await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
+  expect(cell1).toHaveClass(cellClassname, { exact: true });
+  expect(cell2).toHaveClass(cellClassname, { exact: true });
 });
 
-test('cellClass is a string', async () => {
+test('cellClass is a string', () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
@@ -31,11 +31,11 @@ test('cellClass is a string', async () => {
   ];
   setup({ columns, rows });
   const [cell1, cell2] = getCells();
-  await expect.element(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true });
-  await expect.element(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true });
+  expect(cell1).toHaveClass(`${cellClassname} my-cell`, { exact: true });
+  expect(cell2).toHaveClass(`${cellClassname} my-cell`, { exact: true });
 });
 
-test('cellClass returns a string', async () => {
+test('cellClass returns a string', () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
@@ -45,11 +45,11 @@ test('cellClass returns a string', async () => {
   ];
   setup({ columns, rows });
   const [cell1, cell2] = getCells();
-  await expect.element(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true });
-  await expect.element(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true });
+  expect(cell1).toHaveClass(`${cellClassname} my-cell-0`, { exact: true });
+  expect(cell2).toHaveClass(`${cellClassname} my-cell-1`, { exact: true });
 });
 
-test('cellClass returns undefined', async () => {
+test('cellClass returns undefined', () => {
   const columns: readonly Column<Row>[] = [
     {
       key: 'id',
@@ -59,6 +59,6 @@ test('cellClass returns undefined', async () => {
   ];
   setup({ columns, rows });
   const [cell1, cell2] = getCells();
-  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
-  await expect.element(cell2).toHaveClass(cellClassname, { exact: true });
+  expect(cell1).toHaveClass(cellClassname, { exact: true });
+  expect(cell2).toHaveClass(cellClassname, { exact: true });
 });

test/browser/column/cellClass.test.ts

@@ -1,7 +1,7 @@
 import { userEvent } from '@vitest/browser/context';
 
 import type { Column } from '../../../src';
-import { getCellsAtRowIndexOld, getHeaderCells, setup, validateCellPositionOld } from '../utils';
+import { getCellsAtRowIndex, getHeaderCells, setup, validateCellPosition } from '../utils';
 
 describe('colSpan', () => {
   function setupColSpanGrid(colCount = 15) {
@@ -43,7 +43,7 @@ describe('colSpan', () => {
     expect(getHeaderCells()).toHaveLength(13);
 
     // top summary rows
-    const topSummarryRow1 = getCellsAtRowIndexOld(0);
+    const topSummarryRow1 = getCellsAtRowIndex(0);
     expect(topSummarryRow1).toHaveLength(14);
     // 7th-8th cells are merged
     expect(topSummarryRow1[7]).toHaveAttribute('aria-colindex', '8');
@@ -52,10 +52,10 @@ describe('colSpan', () => {
       'grid-column-start': '8',
       'grid-column-end': '10'
     });
-    expect(getCellsAtRowIndexOld(1)).toHaveLength(15);
+    expect(getCellsAtRowIndex(1)).toHaveLength(15);
 
     // rows
-    const row1 = getCellsAtRowIndexOld(3);
+    const row1 = getCellsAtRowIndex(3);
     expect(row1).toHaveLength(14);
     // 7th-8th cells are merged
     expect(row1[6]).toHaveAttribute('aria-colindex', '7');
@@ -68,7 +68,7 @@ describe('colSpan', () => {
     expect(row1[7]).not.toHaveAttribute('aria-colspan');
 
     // 3rd-5th, 7th-8th cells are merged
-    const row2 = getCellsAtRowIndexOld(4);
+    const row2 = getCellsAtRowIndex(4);
     expect(row2).toHaveLength(12);
     expect(row2[2]).toHaveAttribute('aria-colindex', '3');
     expect(row2[2]).toHaveStyle({
@@ -84,95 +84,95 @@ describe('colSpan', () => {
     });
     expect(row2[5]).toHaveAttribute('aria-colindex', '9');
 
-    expect(getCellsAtRowIndexOld(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns
-    expect(getCellsAtRowIndexOld(7)).toHaveLength(10);
+    expect(getCellsAtRowIndex(6)).toHaveLength(14); // colSpan 6 won't work as there are 5 frozen columns
+    expect(getCellsAtRowIndex(7)).toHaveLength(10);
 
     // bottom summary row
-    expect(getCellsAtRowIndexOld(12)).toHaveLength(14);
-    expect(getCellsAtRowIndexOld(13)).toHaveLength(15);
+    expect(getCellsAtRowIndex(12)).toHaveLength(14);
+    expect(getCellsAtRowIndex(13)).toHaveLength(15);
   });
 
   it('should navigate between merged cells', async () => {
     setupColSpanGrid();
     // header row
     await userEvent.click(getHeaderCells()[7]);
-    validateCellPositionOld(7, 0);
+    validateCellPosition(7, 0);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(8, 0);
+    validateCellPosition(8, 0);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(11, 0);
+    validateCellPosition(11, 0);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(12, 0);
+    validateCellPosition(12, 0);
     await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
-    validateCellPositionOld(7, 0);
+    validateCellPosition(7, 0);
 
     // top summary rows
-    await userEvent.click(getCellsAtRowIndexOld(0)[6]);
-    validateCellPositionOld(6, 1);
+    await userEvent.click(getCellsAtRowIndex(0)[6]);
+    validateCellPosition(6, 1);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(7, 1);
+    validateCellPosition(7, 1);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(9, 1);
+    validateCellPosition(9, 1);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(10, 1);
+    validateCellPosition(10, 1);
     await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
-    validateCellPositionOld(6, 1);
+    validateCellPosition(6, 1);
 
     // viewport rows
-    await userEvent.click(getCellsAtRowIndexOld(3)[1]);
-    validateCellPositionOld(1, 4);
+    await userEvent.click(getCellsAtRowIndex(3)[1]);
+    validateCellPosition(1, 4);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(2, 4);
+    validateCellPosition(2, 4);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(3, 4);
+    validateCellPosition(3, 4);
     await userEvent.keyboard('{arrowdown}');
-    validateCellPositionOld(2, 5);
+    validateCellPosition(2, 5);
     await userEvent.keyboard('{arrowleft}');
-    validateCellPositionOld(1, 5);
+    validateCellPosition(1, 5);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(2, 5);
+    validateCellPosition(2, 5);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(5, 5);
+    validateCellPosition(5, 5);
     await userEvent.keyboard('{arrowleft}');
-    validateCellPositionOld(2, 5);
+    validateCellPosition(2, 5);
     await userEvent.keyboard('{arrowdown}');
-    validateCellPositionOld(2, 6);
+    validateCellPosition(2, 6);
     await userEvent.keyboard('{arrowdown}{arrowdown}');
-    validateCellPositionOld(0, 8);
+    validateCellPosition(0, 8);
     await userEvent.keyboard('{arrowLeft}');
-    validateCellPositionOld(0, 8);
+    validateCellPosition(0, 8);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(5, 8);
+    validateCellPosition(5, 8);
     await userEvent.tab({ shift: true });
     await userEvent.tab({ shift: true });
-    validateCellPositionOld(14, 7);
+    validateCellPosition(14, 7);
     await userEvent.tab();
-    validateCellPositionOld(0, 8);
-    await userEvent.click(getCellsAtRowIndexOld(10)[11]);
-    validateCellPositionOld(11, 11);
+    validateCellPosition(0, 8);
+    await userEvent.click(getCellsAtRowIndex(10)[11]);
+    validateCellPosition(11, 11);
     await userEvent.tab();
-    validateCellPositionOld(12, 11);
+    validateCellPosition(12, 11);
     await userEvent.tab();
-    validateCellPositionOld(0, 12);
+    validateCellPosition(0, 12);
     await userEvent.tab({ shift: true });
-    validateCellPositionOld(12, 11);
+    validateCellPosition(12, 11);
 
     // bottom summary rows
-    await userEvent.click(getCellsAtRowIndexOld(12)[6]);
-    validateCellPositionOld(6, 13);
+    await userEvent.click(getCellsAtRowIndex(12)[6]);
+    validateCellPosition(6, 13);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(7, 13);
+    validateCellPosition(7, 13);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(9, 13);
+    validateCellPosition(9, 13);
     await userEvent.keyboard('{arrowright}');
-    validateCellPositionOld(10, 13);
+    validateCellPosition(10, 13);
     await userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}');
-    validateCellPositionOld(6, 13);
+    validateCellPosition(6, 13);
   });
 
   it('should scroll to the merged cell when selected', async () => {
     setupColSpanGrid(30);
-    await userEvent.click(getCellsAtRowIndexOld(10)[23]); // last visible cell (1920/80)
+    await userEvent.click(getCellsAtRowIndex(10)[23]); // last visible cell (1920/80)
     const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView');
     const testScrollIntoView = () => {
       expect(spy).toHaveBeenCalled();
@@ -182,13 +182,13 @@ describe('colSpan', () => {
     testScrollIntoView();
     await navigate(1);
     testScrollIntoView(); // should bring the merged cell into view
-    validateCellPositionOld(27, 11);
+    validateCellPosition(27, 11);
     await navigate(7);
     testScrollIntoView();
-    validateCellPositionOld(6, 12); // should navigate to the next row
+    validateCellPosition(6, 12); // should navigate to the next row
     await navigate(7, true);
     testScrollIntoView();
-    validateCellPositionOld(27, 11); // should navigate to the previous row
+    validateCellPosition(27, 11); // should navigate to the previous row
     await navigate(27);
     testScrollIntoView();
     await navigate(1);

test/browser/column/colSpan.test.ts

@@ -30,10 +30,10 @@ test('draggable columns', async () => {
   setup({ columns, rows: [], onColumnsReorder });
   const [cell1, cell2, cell3, cell4] = getHeaderCells();
 
-  await expect.element(cell1).not.toHaveAttribute('draggable');
-  await expect.element(cell2).toHaveAttribute('draggable');
-  await expect.element(cell3).toHaveAttribute('draggable');
-  await expect.element(cell4).toHaveAttribute('draggable');
+  expect(cell1).not.toHaveAttribute('draggable');
+  expect(cell2).toHaveAttribute('draggable');
+  expect(cell3).toHaveAttribute('draggable');
+  expect(cell4).toHaveAttribute('draggable');
 
   expect(onColumnsReorder).not.toHaveBeenCalled();
 

test/browser/column/draggable.test.ts

@@ -2,7 +2,7 @@ import type { Column } from '../../../src';
 import { cellClassname, cellFrozenClassname } from '../../../src/style/cell';
 import { getHeaderCells, setup } from '../utils';
 
-test('frozen column have a specific class, and are stable-sorted before non-frozen columns', async () => {
+test('frozen column have a specific class, and are stable-sorted before non-frozen columns', () => {
   const columns: readonly Column<never>[] = [
     {
       key: 'col1',
@@ -28,17 +28,13 @@ test('frozen column have a specific class, and are stable-sorted before non-froz
   setup({ columns, rows: [] });
   const [cell1, cell2, cell3, cell4] = getHeaderCells();
 
-  await expect
-    .element(cell1)
-    .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
-  await expect
-    .element(cell2)
-    .toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
-  await expect.element(cell3).toHaveClass(cellClassname, { exact: true });
-  await expect.element(cell4).toHaveClass(cellClassname, { exact: true });
+  expect(cell1).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
+  expect(cell2).toHaveClass(`${cellClassname} ${cellFrozenClassname}`, { exact: true });
+  expect(cell3).toHaveClass(cellClassname, { exact: true });
+  expect(cell4).toHaveClass(cellClassname, { exact: true });
 
-  await expect.element(cell1).toHaveTextContent('col1');
-  await expect.element(cell2).toHaveTextContent('col3');
-  await expect.element(cell3).toHaveTextContent('col2');
-  await expect.element(cell4).toHaveTextContent('col4');
+  expect(cell1).toHaveTextContent('col1');
+  expect(cell2).toHaveTextContent('col3');
+  expect(cell3).toHaveTextContent('col2');
+  expect(cell4).toHaveTextContent('col4');
 });

test/browser/column/frozen.test.ts

@@ -2,7 +2,7 @@ import type { Column, ColumnGroup } from '../../../src';
 import { cellClassname } from '../../../src/style/cell';
 import { getHeaderCells, setup } from '../utils';
 
-test('headerCellClass is either nullish or a string', async () => {
+test('headerCellClass is either nullish or a string', () => {
   const columns: readonly Column<never>[] = [
     {
       key: 'id',
@@ -17,11 +17,11 @@ test('headerCellClass is either nullish or a string', async () => {
 
   setup({ columns, rows: [] });
   const [cell1, cell2] = getHeaderCells();
-  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
-  await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
+  expect(cell1).toHaveClass(cellClassname, { exact: true });
+  expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
 });
 
-test('columnGroup.headerCellClass is either nullish or a string', async () => {
+test('columnGroup.headerCellClass is either nullish or a string', () => {
   const columns: readonly ColumnGroup<never>[] = [
     {
       name: 'Group 1',
@@ -36,6 +36,6 @@ test('columnGroup.headerCellClass is either nullish or a string', async () => {
 
   setup({ columns, rows: [] });
   const [cell1, cell2] = getHeaderCells();
-  await expect.element(cell1).toHaveClass(cellClassname, { exact: true });
-  await expect.element(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
+  expect(cell1).toHaveClass(cellClassname, { exact: true });
+  expect(cell2).toHaveClass(`${cellClassname} my-header`, { exact: true });
 });

test/browser/column/headerCellClass.test.ts

@@ -1,7 +1,7 @@
 import type { Column } from '../../../src';
 import { getHeaderCells, setup } from '../utils';
 
-test('name is either a string or an element', async () => {
+test('name is either a string or an element', () => {
   function Header() {
     return 'Fancy';
   }
@@ -19,6 +19,6 @@ test('name is either a string or an element', async () => {
 
   setup({ columns, rows: [] });
   const [cell1, cell2] = getHeaderCells();
-  await expect.element(cell1).toHaveTextContent('ID');
-  await expect.element(cell2).toHaveTextContent('Fancy');
+  expect(cell1).toHaveTextContent('ID');
+  expect(cell2).toHaveTextContent('Fancy');
 });