如何在Vitest中避免加载多个React实例？

你遇到的问题是典型的yarn link本地联调场景下的依赖冲突——UI项目和Web项目各自加载了独立的React实例，导致hooks调用时出现上下文错误。以下是几个可行的解决方法：

1. 给Vitest测试环境单独配置依赖别名 #

Vitest的全局resolve.alias仅作用于Vite的构建流程，测试环境的模块解析需要在test字段下单独配置。修改你的vitest.config.ts：

import { defineConfig } from 'vitest/config'
import path from 'path';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: [
      "src/test/setupTests.ts"
    ],
    // 关键：测试环境的依赖解析配置
    resolve: {
      alias: {
        "react": path.resolve(__dirname, "node_modules/react"),
        "react-dom": path.resolve(__dirname, "node_modules/react-dom"),
        // 其他共享依赖也可以在这里指定，比如@mui、styled-components等
      }
    }
  },
  // 保留构建环境的别名配置
  resolve: {
    alias: { /* 你的原有构建别名配置 */ }
  }
});

2. 临时移除UI项目的本地React依赖 #

进入UI项目的目录，执行以下命令移除本地的React和ReactDOM：

yarn remove react react-dom

这样UI项目在被Web项目link引用时，会自动向上查找Web项目node_modules中的React实例。测试完成后，再重新安装UI项目的依赖即可。

如果不想删除依赖，也可以直接重命名UI项目node_modules里的react和react-dom文件夹（比如改成react_bak），达到同样的效果。

3. 改用Yarn Workspace作为长期解决方案 #

如果频繁需要本地联调两个项目，推荐将Web和UI项目放到同一个Yarn Workspace中。这样所有子项目会共享根目录的node_modules，从根源避免多实例问题。

在根目录创建package.json：

{
  "private": true,
  "workspaces": [
    "./web-project",
    "./ui-project"
  ]
}

然后在根目录执行yarn install，Yarn会自动处理依赖关联，无需再使用yarn link。

内容的提问来源于stack exchange，提问作者Ryan Pierce Williams