React组件测试遇Expression expected错误及No tests were found问题

一、解决"Expression expected"错误 #

你通过编辑器功能栏的render();选项操作时出现这个错误，是因为这个快捷操作是针对普通React组件文件设计的，不适合在测试文件中使用。你的测试代码里手动写的render(<Welcome />)语法是正确的，直接保留这段代码即可，不要再用编辑器的这个快捷选项。

二、解决"No tests were found"问题 #

按以下步骤排查修复：

1. 修正Vite配置中的setupFiles路径
   把vite.config.js里的绝对路径换成相对路径，避免系统路径差异导致的问题：

   test: {
     globals: true,
     environment: "jsdom",
     setupFiles: "./src/test/setup.js" // 替换为相对路径
   },
   

2. 确认测试依赖已安装
   确保项目已安装所有必要的测试包，执行以下命令安装：

   npm install -D vitest @testing-library/react @testing-library/jest-dom jsdom
   

3. 在package.json中添加测试命令
   打开package.json，在scripts字段中添加测试命令：

   "scripts": {
     "test": "vitest"
   }
   

   之后通过终端运行npm run test来执行测试，比编辑器快捷按钮更稳定。
4. 验证文件路径与命名
   • 确认Welcome.test.js的命名符合Vitest的默认识别规则（*.test.js/*.spec.js）
   • 检查Welcome组件的导入路径../Page/Welcome/Welcome.jsx是否正确，路径错误会导致测试无法正常执行。

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