Skip to content

Vitest 5 #4146

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
nstepien wants to merge 6 commits into
base: main
Choose a base branch
from
+301 −310
Draft

Vitest 5 #4146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ad9d786
Vitest 5
nstepien Aug 19, 2026
5dac1dd
legacy-peer-deps for now
nstepien Aug 19, 2026
f74f9bb
add TODO
nstepien Aug 19, 2026
4e65509
remove redundant comment
nstepien Aug 19, 2026
9803b59
Merge remote-tracking branch 'origin/main' into vitest-5
nstepien Aug 19, 2026
191135e
update stackTraceLimit comment
nstepien Aug 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ npm-debug.log
.idea

# Vitest
/.vitest-attachments
/.vitest
/coverage
/test/**/__screenshots__
/test/**/__traces__
/test/**/screenshots/**/*-win32.png
2 changes: 2 additions & 0 deletions .npmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
# TODO: delete file
legacy-peer-deps=true
525 changes: 261 additions & 264 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,8 @@
"@types/react-dom": "^19.2.3",
"@typescript/native": "npm:typescript@^7.0.2",
"@vitejs/plugin-react": "^6.0.3",
"@vitest/browser-playwright": "^4.1.5",
"@vitest/coverage-istanbul": "^4.1.5",
"@vitest/browser-playwright": "^5.0.0-rc.2",
"@vitest/coverage-istanbul": "^5.0.0-rc.2",
"@vitest/eslint-plugin": "^1.6.16",
"clsx": "^2.1.1",
"ecij": "^0.4.1",
Expand All @@ -77,7 +77,7 @@
"typescript": "npm:@typescript/typescript6@^6.0.2",
"typescript-eslint": "^8.59.0",
"vite": "^8.1.0",
"vitest": "^4.1.5",
"vitest": "^5.0.0-rc.2",
"vitest-browser-react": "^2.2.0"
},
"peerDependencies": {
Expand Down
12 changes: 6 additions & 6 deletions test/browser/column/endFrozen.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,9 +162,9 @@ test('end-frozen cells in top summary rows carry the end-frozen class', async ()

// the summary cell in the end-frozen column must carry the end-frozen class
const summaryCell = page.getCell({ name: 'total' });
await expect.element(summaryCell).toHaveClass(cellClassname, cellFrozenEndClassname, {
exact: true
});
await expect
.element(summaryCell)
.toHaveClass(cellClassname, cellFrozenEndClassname, { exact: true });
});

test('end-frozen cells in bottom summary rows carry the end-frozen class', async () => {
Expand Down Expand Up @@ -194,9 +194,9 @@ test('end-frozen cells in bottom summary rows carry the end-frozen class', async
});

const summaryCell = page.getCell({ name: 'bottom-total' });
await expect.element(summaryCell).toHaveClass(cellClassname, cellFrozenEndClassname, {
exact: true
});
await expect
.element(summaryCell)
.toHaveClass(cellClassname, cellFrozenEndClassname, { exact: true });
});

test('reordering input columns past end-frozen preserves band integrity', async () => {
Expand Down
18 changes: 9 additions & 9 deletions test/browser/column/renderEditCell.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ describe('Editor', () => {
await userEvent.keyboard('2');
await safeTab();
await expect.element(col1Editor).not.toBeInTheDocument();
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^12$/);
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent('12');
});

it('should open and commit changes on enter', async () => {
Expand All @@ -35,7 +35,7 @@ describe('Editor', () => {
await userEvent.keyboard('{enter}');
await expect.element(col1Editor).toHaveValue(1);
await userEvent.keyboard('3{enter}');
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^13$/);
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent('13');
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveFocus();
await expect.element(col1Editor).not.toBeInTheDocument();
});
Expand All @@ -45,7 +45,7 @@ describe('Editor', () => {
await userEvent.click(getCellsAtRowIndex(0).nth(0));
// TODO: await userEvent.keyboard('123{enter}'); fails in FF
await userEvent.keyboard('{enter}123{enter}');
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^1123$/);
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent('1123');
});

it('should close editor and discard changes on escape', async () => {
Expand All @@ -54,7 +54,7 @@ describe('Editor', () => {
await expect.element(col1Editor).toHaveValue(1);
await userEvent.keyboard('2222{escape}');
await expect.element(col1Editor).not.toBeInTheDocument();
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^1$/);
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent('1');
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveFocus();
});

Expand All @@ -65,7 +65,7 @@ describe('Editor', () => {
await userEvent.keyboard('2222');
await userEvent.click(page.getByText('outside'));
await expect.element(col1Editor).not.toBeInTheDocument();
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent(/^12222$/);
await expect.element(getCellsAtRowIndex(0).nth(0)).toHaveTextContent('12222');
});

it('should commit quickly enough on outside clicks so click event handlers access the latest rows state', async () => {
Expand Down Expand Up @@ -150,7 +150,7 @@ describe('Editor', () => {
await expect.element(col2Editor).toHaveValue('a1');
await userEvent.keyboard('23');
// The cell value should update as the editor value is changed
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent(/^a123$/);
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent('a123');
// clicking in a portal does not count as an outside click
await userEvent.click(col2Editor);
await expect.element(col2Editor).toBeInTheDocument();
Expand Down Expand Up @@ -195,7 +195,7 @@ describe('Editor', () => {
await userEvent.click(getCellsAtRowIndex(0).nth(1));
// TODO: await userEvent.keyboard('yz{enter}'); fails in FF
await userEvent.keyboard('{enter}yz{enter}');
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent(/^a1yz$/);
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent('a1yz');
await userEvent.keyboard('x');
await expect.element(col2Editor).not.toBeInTheDocument();
});
Expand All @@ -213,7 +213,7 @@ describe('Editor', () => {
);
await userEvent.dblClick(getCellsAtRowIndex(0).nth(1));
await userEvent.keyboard('a{arrowleft}b{arrowright}c{arrowdown}'); // should commit changes on arrowdown
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent(/^a1bac$/);
await expect.element(getCellsAtRowIndex(0).nth(1)).toHaveTextContent('a1bac');
});

it('should close the editor when closeOnExternalRowChange is true or undefined and row is changed from outside', async () => {
Expand Down Expand Up @@ -269,7 +269,7 @@ describe('Editor', () => {
}
scrollGrid({ top: 1500 });
await userEvent.click(page.getCell({ name: 'name43' }));
await expect.element(page.getActiveCell()).toHaveTextContent(/^name43$/);
await expect.element(page.getActiveCell()).toHaveTextContent('name43');
scrollGrid({ top: 0 });
await expect.element(page.getCell({ name: 'name0abc' })).toBeVisible();
});
Expand Down
6 changes: 3 additions & 3 deletions test/browser/renderTextEditor.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ function Test() {
test('renderTextEditor', async () => {
await page.render(<Test />);
const cell = page.getCell();
await expect.element(cell).toHaveTextContent(/^Tacitus Kilgore$/);
await expect.element(cell).toHaveTextContent('Tacitus Kilgore');
await userEvent.dblClick(cell);
const input = page.getByRole('textbox');
await expect.element(input).toHaveClass('rdg-text-editor');
Expand All @@ -44,12 +44,12 @@ test('renderTextEditor', async () => {
// pressing escape closes the editor without committing
await userEvent.keyboard('Test{escape}');
await expect.element(input).not.toBeInTheDocument();
await expect.element(cell).toHaveTextContent(/^Tacitus Kilgore$/);
await expect.element(cell).toHaveTextContent('Tacitus Kilgore');

// blurring the input closes and commits the editor
await userEvent.dblClick(cell);
await userEvent.fill(input, 'Jim Milton');
await safeTab();
await expect.element(input).not.toBeInTheDocument();
await expect.element(cell).toHaveTextContent(/^Jim Milton$/);
await expect.element(cell).toHaveTextContent('Jim Milton');
});
13 changes: 8 additions & 5 deletions test/browser/sorting.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,18 +67,21 @@ test('multi column sort', async () => {
const headerCell1 = page.getHeaderCell({ name: 'colA', exact: false });
const headerCell2 = page.getHeaderCell({ name: 'colB', exact: false });
const headerCell3 = page.getHeaderCell({ name: 'colC', exact: false });
const priority1 = headerCell1.getBySelector('span:has(> .rdg-sort-arrow)');
const priority2 = headerCell2.getBySelector('span:has(> .rdg-sort-arrow)');
const priority3 = headerCell3.getBySelector('span:has(> .rdg-sort-arrow)');
await userEvent.click(headerCell1);
await userEvent.keyboard('{Control>}');
await userEvent.click(headerCell2);
await userEvent.click(headerCell3);

// aria-sort is only added for single sort
await expect.element(headerCell1).not.toHaveAttribute('aria-sort');
await expect.element(headerCell1).toHaveTextContent('1'); // priority
await expect.element(priority1).toHaveTextContent('1');
await expect.element(headerCell2).not.toHaveAttribute('aria-sort');
await expect.element(headerCell2).toHaveTextContent('2');
await expect.element(priority2).toHaveTextContent('2');
await expect.element(headerCell3).not.toHaveAttribute('aria-sort');
await expect.element(headerCell3).toHaveTextContent('3');
await expect.element(priority3).toHaveTextContent('3');
await testSortColumns([
{ columnKey: 'colA', direction: 'ASC' },
{ columnKey: 'colB', direction: 'DESC' },
Expand All @@ -96,14 +99,14 @@ test('multi column sort', async () => {
{ columnKey: 'colA', direction: 'ASC' },
{ columnKey: 'colC', direction: 'ASC' }
]);
await expect.element(headerCell3).toHaveTextContent('2');
await expect.element(priority3).toHaveTextContent('2');

// clicking on a column without ctrlKey should remove multisort
await userEvent.keyboard('{/Control}');
await userEvent.click(headerCell2);
await testSortColumns([{ columnKey: 'colB', direction: 'DESC' }]);
await expect.element(headerCell2).toHaveAttribute('aria-sort');
await expect.element(headerCell2).not.toHaveTextContent('2');
await expect.element(priority2).toHaveTextContent('');
});

test('multi column sort with metakey', async () => {
Expand Down
7 changes: 7 additions & 0 deletions test/setupBrowser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@ import 'vitest-browser-react';
import { configure } from 'vitest-browser-react/pure';
import { locators, userEvent, type Locator, type LocatorByRoleOptions } from 'vitest/browser';

// avoid priting huge stack traces
// chromium defaults to 10
// firefox defaults to 128
// webkit defaults to 100
// @ts-expect-error
Error.stackTraceLimit = 10;

@nstepien nstepien Aug 19, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/stackTraceLimit


configure({
reactStrictMode: true
});
Expand Down
18 changes: 1 addition & 17 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,22 +127,9 @@ export default defineConfig(({ isPreview }): ViteUserConfig => ({
commands: { resizeColumn, dragFill },
expect: {
toMatchScreenshot: {
resolveScreenshotPath({
root,
testFileDirectory,
testFileName,
arg,
browserName,
platform,
ext
}) {
return `${root}/${testFileDirectory}/screenshots/${testFileName}/${arg}-${browserName}-${platform}${ext}`;
}
screenshotDirectory: 'screenshots'
}
},
locators: {
exact: true
},
instances: [
{
browser: 'chromium',
Expand Down Expand Up @@ -174,7 +161,6 @@ export default defineConfig(({ isPreview }): ViteUserConfig => ({
},
projects: [
{
extends: true,
test: {
name: 'browser',
include: ['browser/**/*.test.*'],
Expand All @@ -183,7 +169,6 @@ export default defineConfig(({ isPreview }): ViteUserConfig => ({
}
},
{
extends: true,
test: {
name: 'visual',
include: ['visual/*.test.*'],
Expand All @@ -192,7 +177,6 @@ export default defineConfig(({ isPreview }): ViteUserConfig => ({
}
},
{
extends: true,
test: {
name: 'node',
include: ['node/**/*.test.*'],
Expand Down