React项目迁移Vitest遇@vitest/browser/context错误，求解决方案

错误原因 #

你使用的vitest-browser-react是专门为Vitest的**浏览器模式（Browser Mode）**设计的依赖，但当前你的Vitest配置存在两个冲突点：

• browser.enabled被设置为false，未启用浏览器模式
• 同时指定了environment: "jsdom"，测试运行在jsdom模拟的DOM环境（属于fork进程池，非浏览器模式）

当vitest-browser-react在非浏览器模式下被导入时，会因为找不到浏览器模式的上下文而抛出该错误。

解决方法 #

根据你的测试需求，选择以下两种方案之一：

方案1：启用浏览器模式运行测试（适合需要真实浏览器环境的场景） #

1. 修改Vitest配置文件（vitest.config.mts）：
   • 将browser.enabled改为true
   • 删除environment: "jsdom"配置项（浏览器模式不需要jsdom）
     修改后的配置：

   import { defineConfig } from 'vitest/config'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     test: {
       globals: true,
       browser: {
         enabled: true,
         name: 'chromium',
       },
       exclude: ['**/node_modules/**'],
       setupFiles: 'setup-file.ts'
     },
   })
   

2. 安装浏览器驱动：
   运行以下命令安装Chromium驱动（对应配置里的浏览器名称）：

   npx playwright install chromium
   

3. 保持现有测试代码不变，直接重新运行测试命令即可。

方案2：使用jsdom环境+常规React测试库（适合普通组件测试场景） #

如果不需要真实浏览器环境，用jsdom模拟DOM足够覆盖大部分组件测试，推荐替换为业界常用的@testing-library/react：

1. 安装依赖：

   npm install --save-dev @testing-library/react @testing-library/jest-dom
   

2. 修改测试代码：
   替换vitest-browser-react的导入，改用@testing-library/react的API：

   import { render, screen } from "@testing-library/react";
   import Loader from "../../components/loader";
   import { describe, expect, test } from "vitest";
   
   describe("Loader test", () => {
     test("should render loader", async () => {
       render(<Loader />);
       await expect(screen.getByTestId("loader-testid")).toBeInTheDocument();
     });
   });
   

3. 调整setup文件：
   修改setup-file.ts，添加@testing-library/jest-dom的扩展（可选，用于更多断言方法）：

   import '@testing-library/jest-dom/vitest'
   

4. 保持现有Vitest配置不变（browser.enabled: false和environment: "jsdom"保留），重新运行测试即可。

内容的提问来源于stack exchange，提问作者Leff