I downloaded @vitest/browser and set it up for webdriverio. I can get my test to run in the browser and it shows whether they passed or failed but it doesn’t actually show the component I’ve rendered!
import { render, screen, waitFor } from '@testing-library/react'
it('whatever', async () => {
render(<h1>dude</h1>)
})
Some config:
const vitestConfig: { test: ViteConfigWithVitest['test'] } = {
test: {
browser: {
provider: 'webdriverio',
enabled: true,
name: 'chrome',
},
...
plugins: [
nxViteTsPaths(),
react(),
vanillaExtractPlugin(),
topLevelAwait({
// The export name of top-level await promise for each chunk module
promiseExportName: '__tla',
// The function to generate import names of top-level await promise in each chunk module
promiseImportName: (i) => `__tla_${i}`,
}),
],
Problem Description
“@testing-library/react” forcefully runs cleanup() after each test, which removes the mounted component from the browser-rendered root element, resulting in a blank page. Here is the specific line with the cleanup call: https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/index.js#L14
Importing ‘@testing-library/react/dont-cleanup-after-each’ and running cleanup() before each test resolved the issue for me. This import essentially sets up an environment variable, as shown here:
process.env.RTL_SKIP_AUTO_CLEANUP = true
Source: https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/dont-cleanup-after-each.js
Solution #1
I created setupTests.ts file in scripts folder, where I handle the import and run cleanup():
// scripts/setupTests.ts file
import '@testing-library/jest-dom/vitest';
import '@testing-library/react/dont-cleanup-after-each';
// NOTE: the import order is important:
// @testing-library/react must be imported after
// @testing-library/react/dont-cleanup-after-each
import { cleanup } from '@testing-library/react';
import { afterEach, beforeEach } from 'vitest';
// runs a clean before each test case (e.g. clearing jsdom)
beforeEach(() => {
cleanup();
});
afterEach(() => {
// No additional actions needed after each test
return;
});
Do not overlook the NOTE in the comments – the import order is important.
The setupTests.ts file needs to be referenced in vite.config.ts so that Vitest can pick it up:
// relevant part of vite.config.ts:
// ... is used to indicate other config parts not shown here
export default defineConfig({
...,
test: {
...,
setupFiles: [
'scripts/setupTests',
],
},
...
});
Solution #2
Alternatively, you can set the environment variable manually:
// package.json
{
...,
"scripts": {
...,
"test:browser": "RTL_SKIP_AUTO_CLEANUP=true vitest --browser.enabled"
},
...,
}
However, you will still need to create a setupTests.ts file as in Solution #1, since you will need to write your own cleanup logic. Otherwise, the tests will not operate on a clean DOM, causing the browser to stack each render.
In my opinion, the first solution is preferable, as it avoids modifying package.json and keeps your test setup logic centralized in setupTests.ts.
user28002875 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.