将React Testing Library测试从CRA迁移至Vitest时的报错问题

报错1：Error: Cannot find module 'react-dom/client' #

问题原因 #

@testing-library/react@13.x 及以上版本仅兼容React 18+，React 17版本不存在react-dom/client导出路径，直接在React 17项目中使用高版本Testing Library React就会触发该模块找不到的错误。

解决方案 #

二选一即可：

• 保留React 17版本：将@testing-library/react降级到适配React 17的稳定版本，执行安装命令：

  pnpm add -D @testing-library/react@12.1.5
  

• 升级到React 18：将react、react-dom升级到18.x版本，该方案已验证可解决此报错，后续继续处理第二个兼容问题即可。

报错2：resetClipboardStubOnView 函数访问window.navigator.clipboard抛出异常 #

问题原因 #

Vitest默认使用的jsdom环境从v16版本开始，不再默认内置navigator.clipboard API的模拟实现，而@testing-library/user-event@14.2.x旧版本在测试重置逻辑中会直接访问该属性，未做空值兼容，因此触发异常。

解决步骤 #

1. 安装jsdom环境依赖：

   pnpm add -D jsdom
   

2. 在Vitest配置文件（vite.config.js/vitest.config.js）中显式指定测试环境为jsdom：

   import { defineConfig } from 'vitest/config'
   
   export default defineConfig({
     test: {
       environment: 'jsdom',
       setupFiles: ['./src/setupTests.js'], // 指向测试初始化文件
       // 其余原有测试配置
     }
   })
   

3. 在测试初始化文件src/setupTests.js中手动补全clipboard的桩实现，同时配置常规的Testing Library清理逻辑：

   import { afterEach, vi } from 'vitest'
   import { cleanup } from '@testing-library/react'
   
   // 补全jsdom缺失的剪贴板API模拟
   Object.assign(window.navigator, {
     clipboard: {
       writeText: vi.fn().mockResolvedValue(undefined),
       readText: vi.fn().mockResolvedValue(''),
     }
   })
   
   // 每个测试用例执行完成后自动清理DOM挂载
   afterEach(() => {
     cleanup()
   })
   

4. 升级存在兼容缺陷的@testing-library/user-event到稳定新版本，规避旧版本的环境兼容问题：

   pnpm add -D @testing-library/user-event@14.5.2
   

5. 清除Vitest缓存后重新运行测试验证修复结果：

   pnpm vitest run --no-cache
   

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