Vitest 错误：React 刷新前导码未加载。有问题

Question

我是测试新手，我尝试使用 vitest 来测试我的 Mern 社交媒体应用程序。寻找使用 vitest 测试 React 组件的参考资料，我发现这篇文章https://eternaldev.com/blog/testing-a-react-application-with-vitest。接下来，当我尝试渲染组件时，我收到错误React刷新前导码未加载。运行测试时出现问题。以下是相关代码：

注册.test.tsx

import { expect, test, describe } from 'vitest';
import { render, screen } from '@testing-library/react';
// import Register from '../../components/Authentication/Register';
import Fake from '../../Fake';

describe('Registration Component Full functionality testing', () => {

    test("should be showing Signup heading", () => {

        render(<Fake />);
        expect(screen.getByText(/Fake/i)).toBeDefined()
    })
})

假的.tsx

import React from 'react'

const Fake: React.FC = () => {
    return (
        <div>Fake</div>
    )
}

export default Fake

vite.config.ts

/// <reference types="vitest" />
/// <reference types="vite/client" />

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './setupTest.ts'
  }
})

如果需要，我愿意分享有关我的代码库的更多信息。谢谢。

我试图在使用 vitest 编码的测试中渲染反应组件，但收到错误反应刷新前导码未加载。这样做是有问题的。我期待任何知道答案的人都能提供一个结构化的答案，并解释遗漏或错误的内容。

Answer 1

我有同样的问题，我已经尝试了上面的两种方法，但它不起作用。

我发现这个讨论可以帮助找到解决方案，运行浏览器模式错误“@vitejs/plugin-react 无法检测前导码”

在我检查了版本 3 @vitejs/plugin-react 后，结果发现有这个错误。

解决方案很简单

从 ：

"@vitejs/plugin-react": "3.0.1"

更改为4+版本：

"@vitejs/plugin-react": "4.2.1"