Vitest浏览器模式不显示任何内容

Question

我下载了

@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}`,
      }),
    ],

Answer 1

问题描述

“@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

来源：https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/dont-cleanup-after-each.js

解决方案#1

我在脚本文件夹中创建了 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',
    ],
  },
  ...
});

解决方案#2

或者，您可以手动设置环境变量：

// package.json
{
  ...,
  "scripts": {
    ...,
    "test:browser": "RTL_SKIP_AUTO_CLEANUP=true vitest --browser.enabled"
  },
  ...,
}

但是，您仍然需要像解决方案#1 中那样创建 setupTests.ts 文件，因为您需要编写自己的清理逻辑。否则，测试将无法在干净的 DOM 上运行，从而导致浏览器堆叠每个渲染。

在我看来，第一个解决方案更好，因为它避免修改 package.json 并将测试设置逻辑集中在 setupTests.ts 中。