Vite项目中Jest测试报错：test和expect未定义的解决方法

问题场景 #

在基于Vite的network-app项目中运行Jest测试时，App.test.jsx文件内的test和expect函数提示未定义。

项目配置与测试代码 #

Package.json #

{
  "name": "network-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
       "dev": "vite",
       "build": "vite build",
       "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
       "preview": "vite preview",
       "test": "jest"
  },
  "dependencies": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"
  },
  "devDependencies": {
       "@testing-library/jest-dom": "^5.16.5",
       "@testing-library/react": "^14.0.0",
       "@testing-library/user-event": "^14.4.3",
       "@types/jest": "^29.5.1",
       "@types/react": "^18.0.28",
       "@types/react-dom": "^18.0.11",
       "@vitejs/plugin-react": "^4.0.0",
       "eslint": "^8.38.0",
       "eslint-plugin-react": "^7.32.2",
       "eslint-plugin-react-hooks": "^4.6.0",
       "eslint-plugin-react-refresh": "^0.3.4",
       "jest": "^29.5.0",
       "vite": "^4.3.2"
 }
}

App.test.jsx #

test('Renders main page correctly', () => {
    expect(true).toBeTruthy();
});

解决方案 #

方案1：配置Jest全局变量与ES模块支持 #

项目启用了"type": "module"，导致Jest默认全局变量未被识别。需创建Jest配置文件并配合Babel处理ES模块：

1. 安装必要依赖：

npm install --save-dev babel-jest @babel/preset-env @babel/preset-react

2. 创建jest.config.js：

export default {
  testEnvironment: 'jsdom', // 适配React浏览器环境
  transform: {
    '^.+\\.(js|jsx)$': 'babel-jest' // 用Babel转换JS/JSX文件
  }
};

3. 创建.babelrc配置文件：

{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }],
    "@babel/preset-react"
  ]
}

配置完成后，Jest会自动注入test、expect等全局变量，同时正确处理ES模块和JSX语法。

方案2：显式导入测试函数 #

若不想配置Babel，可在测试文件顶部直接导入Jest的测试函数：

import { test, expect } from '@jest/globals';

test('Renders main page correctly', () => {
    expect(true).toBeTruthy();
});

方案3：确认Jest环境配置 #

确保Jest使用jsdom环境适配React组件测试，这会让全局变量在测试环境中正常生效。如果已有jest.config.js，检查testEnvironment字段是否设置为jsdom。

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