第2章环境搭建

第2章：环境搭建——用Vite创建React项目，安装Jest和React Testing Library

好，咱们正式开始动手了。这一章的目标很明确：搭好一套能跑测试的React开发环境。我见过不少同学在环境配置上卡了一整天，其实没那么复杂。跟着我来，半小时内搞定。

2.1 为什么选Vite？

说实话，几年前我还在用Create React App（CRA）搭项目。那时候CRA确实是主流，但它的开发服务器启动慢，热更新也慢。尤其是项目大了以后，改一行代码等好几秒，真的很影响心情。

Vite就不一样了。它基于ES Module，开发时按需编译，启动速度几乎是秒开。我在一个中型项目上做过对比，Vite的冷启动比CRA快了将近10倍。你想想看，每次重启开发服务器省下十几秒，一天下来能省多少时间？

而且Vite对TypeScript、JSX的支持是原生的，不需要额外配置。这对我们做测试驱动开发来说，少了很多折腾配置的烦恼。

2.2 创建项目

先确保你装了Node.js，版本建议16以上。我个人习惯用最新的LTS版本，稳定又安全。

打开终端，执行下面这条命令：

npm create vite@latest react-tdd-course -- --template react

这里解释一下参数：react-tdd-course是项目名，你可以换成自己喜欢的。--template react指定了使用React模板。Vite还支持Vue、Svelte等模板，但我们做React TDD，选react就对了。

命令执行完后，你会看到这样的输出：

Scaffolding project in /your/path/react-tdd-course...
Done. Now run:

  cd react-tdd-course
  npm install
  npm run dev

嗯，到这里项目骨架就搭好了。先别急着启动，我们还需要装测试相关的依赖。

2.3 安装Jest和React Testing Library

接下来安装测试工具。这里我要强调一点：Jest和React Testing Library是黄金搭档。Jest负责运行测试和断言，React Testing Library负责渲染组件和模拟用户交互。

执行以下命令：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom @testing-library/user-event babel-jest @babel/preset-env @babel/preset-react

这些包分别干什么用的？我简单列一下：

包名	作用
jest	测试运行器和断言库
@testing-library/react	渲染React组件，提供查询方法
@testing-library/jest-dom	扩展Jest的匹配器，比如toBeInTheDocument()
@testing-library/user-event	模拟用户操作，比如点击、输入
babel-jest + 预设	让Jest能理解JSX和ES Module语法

注意： 我曾经遇到过一个问题——忘记安装babel相关依赖，结果Jest运行时报错说无法解析JSX语法。所以这几个babel包一个都不能少。

2.4 配置Babel

在项目根目录下创建 babel.config.cjs 文件（注意是.cjs后缀，因为项目用了ES Module）：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
};

这里有个细节：runtime: 'automatic' 是React 17+的新特性，它让你在写组件时不需要手动import React。如果你用的是React 17以下版本，需要改成 runtime: 'classic'。

2.5 配置Jest

在 package.json 中添加Jest配置：

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "jest": {
    "testEnvironment": "jsdom",
    "setupFilesAfterEnv": ["@testing-library/jest-dom"],
    "moduleNameMapper": {
      "\\.(css|less|scss)$": "identity-obj-proxy"
    }
  }
}

解释一下这几个配置：

testEnvironment: jsdom — 模拟浏览器环境，因为React组件需要DOM API
setupFilesAfterEnv — 每次测试运行前自动加载jest-dom的匹配器扩展
moduleNameMapper — 处理CSS文件的导入，避免Jest解析样式文件时报错

小技巧： 如果你项目中用了CSS Modules，identity-obj-proxy 这个包能帮你模拟样式对象。记得先安装它：npm install --save-dev identity-obj-proxy

2.6 验证环境是否正常

配置完了，咱们写个简单的测试来验证一下。在 src 目录下创建 App.test.jsx：

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

然后运行：

npm test

如果看到类似这样的输出，说明环境搭建成功了：

PASS  src/App.test.jsx
  ✓ renders learn react link (xx ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        x.xxx s

看到绿色的PASS，心里是不是踏实多了？

2.7 常见问题排查

环境搭建过程中，我遇到过几个坑，分享出来帮你避雷：

Jest找不到模块 — 检查 moduleNameMapper 配置是否正确，尤其是CSS文件映射
JSX语法报错 — 确认babel配置文件和预设是否正确安装
测试环境报错 — 确保 testEnvironment 设置为 jsdom
匹配器不识别 — 检查 setupFilesAfterEnv 是否配置了 @testing-library/jest-dom

核心要点回顾：

Vite创建项目比CRA快得多，推荐使用
Jest + React Testing Library 是TDD的标准组合
Babel配置是让Jest理解JSX的关键
验证环境时写一个最简单的测试用例就够了

📚 课程目录