我下载了
@vitest/browser
并将其设置为 webdriverio
。我可以让我的测试在浏览器中运行,它显示它们是通过还是失败,但它实际上并没有显示我渲染的组件!
import { render, screen, waitFor } from '@testing-library/react'
it('whatever', async () => {
render(<h1>dude</h1>)
})
一些配置:
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}`,
}),
],
“@testing-library/react”在每次测试后强制运行 cleanup() ,这会从浏览器渲染的根元素中删除已安装的组件,从而导致空白页面。这是清理调用的具体行:https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/index.js#L14
在每次测试之前导入“@testing-library/react/dont-cleanup-after-each”并运行 cleanup() 为我解决了问题。此导入本质上设置了一个环境变量,如下所示:
process.env.RTL_SKIP_AUTO_CLEANUP = true
我在脚本文件夹中创建了 setupTests.ts 文件,我在其中处理导入并运行 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;
});
不要忽视评论中的注释 - 导入顺序很重要。
需要在 vite.config.ts 中引用 setupTests.ts 文件,以便 Vitest 可以拾取它:
// relevant part of vite.config.ts:
// ... is used to indicate other config parts not shown here
export default defineConfig({
...,
test: {
...,
setupFiles: [
'scripts/setupTests',
],
},
...
});
或者,您可以手动设置环境变量:
// package.json
{
...,
"scripts": {
...,
"test:browser": "RTL_SKIP_AUTO_CLEANUP=true vitest --browser.enabled"
},
...,
}
但是,您仍然需要像解决方案#1 中那样创建 setupTests.ts 文件,因为您需要编写自己的清理逻辑。否则,测试将无法在干净的 DOM 上运行,从而导致浏览器堆叠每个渲染。
在我看来,第一个解决方案更好,因为它避免修改 package.json 并将测试设置逻辑集中在 setupTests.ts 中。