Jest 实践指南：从零开始搭建你的第一个测试项目（超详细步骤）

Jest 实践指南：从零开始搭建你的第一个测试项目（超详细步骤）

【免费下载链接】jest-tutorial🃏《Jest 实践指南》项目地址: https://gitcode.com/gh_mirrors/je/jest-tutorial

在现代前端开发中，单元测试已经成为保证代码质量的重要环节。Jest测试框架作为目前最流行的JavaScript测试工具之一，以其简单易用、功能强大而受到广大开发者的青睐。本文将带你从零开始，通过超详细的步骤指南，快速掌握Jest的核心用法和最佳实践，让你能够轻松搭建专业的测试环境。

为什么选择Jest测试框架？

Jest是由Facebook开发的JavaScript测试框架，它提供了开箱即用的测试解决方案，包含了测试运行器、断言库、Mock功能等完整工具链。相比于其他测试框架，Jest具有以下优势：

✅零配置启动- 基本功能无需复杂配置 ✅快速执行- 智能并行测试和缓存机制 ✅强大的Mock功能- 内置完整的Mock系统 ✅覆盖率报告- 自动生成详细的测试覆盖率报告 ✅快照测试- 独特的UI组件测试功能

环境准备与项目初始化

第一步：创建项目并安装依赖

首先，让我们创建一个全新的项目并安装必要的依赖：

# 创建项目目录 mkdir jest-starter cd jest-starter # 初始化npm项目 npm init -y # 安装Jest测试框架 npm i -D jest@27.5.1

:::tip 虽然Jest已经更新到28版本，但在实际项目中，我们建议使用27.5.1这个稳定版本，因为它与React 18和@testing-library/react的兼容性更好。 :::

第二步：配置Jest测试环境

安装完成后，使用Jest CLI初始化配置文件：

npx jest --init

初始化过程中，Jest会询问一系列配置问题。对于初学者，建议先开启覆盖率和自动清除Mock功能：

执行完成后，会生成jest.config.js配置文件：

// jest.config.js module.exports = { // 自动清除Mock clearMocks: true, // 开启覆盖率 collectCoverage: true, // 指定生成覆盖率报告文件存放位置 coverageDirectory: "coverage", // 覆盖率提供者 coverageProvider: "v8", };

:::tip 建议保留jest.config.js文件中的注释，它们可以作为配置Jest的简单文档参考。 :::

编写你的第一个测试用例

创建业务代码文件

在src/utils/sum.js中创建一个简单的加法函数：

// src/utils/sum.js const sum = (a, b) => { return a + b; } module.exports = sum;

编写测试文件

在tests/utils/sum.test.js中编写对应的测试用例：

// tests/utils/sum.test.js const sum = require("../../src/utils/sum"); describe('sum', () => { it('可以做加法', () => { expect(sum(1, 1)).toEqual(2); }); })

项目结构

此时你的项目结构应该如下所示：

├── jest.config.js ├── package-lock.json ├── package.json ├── src │ └── utils │ └── sum.js └── tests └── utils └── sum.test.js

运行测试与查看结果

执行测试命令

一切准备就绪后，运行测试命令：

# 使用npx直接运行 npx jest # 或者添加到package.json中 # 然后在package.json中添加： # "scripts": { # "test": "jest" # } npm run test

查看测试结果

执行测试后，终端会显示测试结果：

🎉恭喜！你已经成功运行了第一个Jest测试！

单文件测试

如果你只想测试项目中某个特定的文件，可以使用相对路径：

# 测试单个文件 npm run test tests/utils/sum.test.js

理解测试覆盖率报告

覆盖率报告文件

Jest会自动生成详细的覆盖率报告，在根目录的coverage文件夹中：

├── clover.xml # Clover XML格式覆盖率报告 ├── coverage-final.json # JSON格式覆盖率报告 ├── lcov-report # HTML格式覆盖率报告 │ ├── base.css │ ├── block-navigation.js │ ├── favicon.png │ ├── index.html # 覆盖率根文件 │ ├── prettify.css │ ├── prettify.js │ ├── sort-arrow-sprite.png │ ├── sorter.js │ └── sum.js.html # sum.js的覆盖率详情 └── lcov.info

网页版覆盖率报告

Jest支持生成网页版的测试报告，打开lcov-report/index.html即可看到直观的覆盖率信息：

覆盖率报告主要包含以下几个指标：

• 语句覆盖率- 代码中语句的执行比例
• 分支覆盖率- 条件分支的执行比例
• 函数覆盖率- 函数的调用比例
• 行覆盖率- 代码行的执行比例

组件测试实战技巧

处理CSS文件导入问题

在React项目中，经常会遇到CSS/LESS文件导入导致的测试错误：

这是因为Jest默认不会转译CSS/LESS等非JavaScript文件。解决方案是使用jest-transform-stub：

npm i -D jest-transform-stub@2.0.0

然后在jest.config.js中添加转译配置：

// jest.config.js module.exports = { // ... transform: { ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub" } }

使用更好的断言匹配器

Jest提供了丰富的断言匹配器（Matchers），但为了更好的DOM元素断言，推荐使用@testing-library/jest-dom：

npm i -D @testing-library/jest-dom@5.16.4

在测试设置文件中引入：

// tests/jest-setup.ts import '@testing-library/jest-dom'

然后在测试用例中使用更强大的断言：

describe('AuthButton', () => { it('可以正常展示', () => { render(<AuthButton>登录</AuthButton>) expect(screen.getByText('登录')).toBeInTheDocument(); }); })

Mock策略的三种选择

在组件测试中，Mock外部依赖是常见需求。Jest提供了多种Mock策略：

1. Mock Axios（细节导向）

describe("AuthButton Mock Axios", () => { it("可以正确展示普通用户按钮内容", async () => { jest.spyOn(axios, "get").mockResolvedValueOnce({ data: { userType: "user" }, }); render(<AuthButton>你好</AuthButton>); expect(await screen.findByText("普通用户你好")).toBeInTheDocument(); }); });

2. Mock API函数（实现导向）

import * as userUtils from "apis/user"; describe("AuthButton Mock API", () => { it("可以正确展示普通用户按钮内容", async () => { jest.spyOn(userUtils, "getUserRole").mockResolvedValueOnce({ data: { userType: "user" }, }); render(<AuthButton>你好</AuthButton>); expect(await screen.findByText("普通用户你好")).toBeInTheDocument(); }); });

3. Mock HTTP请求（用户导向）

使用MSW（Mock Service Worker）进行HTTP请求Mock：

import server from "../../mockServer/server"; import { rest } from "msw"; describe("AuthButton Mock Http 请求", () => { it("可以正确展示普通用户按钮内容", async () => { server.use( rest.get("https://mysite.com/api/role", async (req, res, ctx) => { return res(ctx.status(200), ctx.json({ userType: "user" })); }) ); render(<AuthButton>你好</AuthButton>); expect(await screen.findByText("普通用户你好")).toBeInTheDocument(); }); });

Mock策略的选择原则

选择Mock策略时，要考虑测试的目的：

• 面向测试用户- 关注实现细节（Mock Axios/API）
• 面向真实用户- 关注使用场景（Mock HTTP）

在大多数业务场景中，Mock HTTP请求是最佳选择，因为它最接近真实用户的使用场景。

自动化测试与持续集成

添加测试徽章

在README中添加测试状态徽章，让项目质量一目了然：

配置持续集成

将Jest测试集成到CI/CD流程中，确保每次代码提交都自动运行测试：

# GitHub Actions示例 name: Jest Tests on: [push, pull_request] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: '16' - run: npm ci - run: npm test

常见问题与解决方案

1. TypeScript配置问题

如果遇到TypeScript类型错误，检查tsconfig.json中的类型声明：

{ "compilerOptions": { "types": ["node", "jest", "@testing-library/jest-dom"] } }

2. 测试环境变量设置

在jest.config.js中配置测试环境：

module.exports = { // ... testEnvironment: "jsdom", // 用于浏览器环境测试 setupFilesAfterEnv: ["<rootDir>/tests/jest-setup.ts"] // 测试前设置 }

3. 异步测试处理

对于异步代码，使用async/await或回调函数：

it('异步函数测试', async () => { const result = await asyncFunction(); expect(result).toBe('expected value'); }); it('回调函数测试', (done) => { callbackFunction((error, result) => { expect(result).toBe('expected value'); done(); }); });

最佳实践总结

通过本文的超详细步骤，你已经掌握了Jest测试框架的核心使用方法。以下是关键要点总结：

✅从简单开始- 先写最简单的测试，逐步增加复杂度 ✅关注真实用户- 避免过度测试实现细节 ✅合理使用Mock- 选择合适的Mock策略 ✅保持测试独立- 每个测试用例应该相互独立 ✅持续集成- 将测试自动化集成到开发流程中

记住，好的测试会让你获得很高的代码信心，而不好的测试则会严重拖垮项目开发。测试的目的不是为了达到100%的覆盖率，而是为了让你在重构和修改代码时充满信心。

现在你已经具备了搭建专业测试项目的基础知识，接下来可以探索更多高级功能，如快照测试、定时器Mock、性能测试等。Jest的强大功能将伴随你的项目成长，确保代码质量始终保持在最高水平。

开始你的测试之旅吧！相信通过不断的实践，你会越来越喜欢编写测试，因为它不仅保证了代码质量，更是一种专业开发习惯的体现。

【免费下载链接】jest-tutorial🃏《Jest 实践指南》项目地址: https://gitcode.com/gh_mirrors/je/jest-tutorial