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 jest27.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-stubnpm i -D jest-transform-stub2.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-domnpm i -D testing-library/jest-dom5.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请求用户导向使用MSWMock Service Worker进行HTTP请求Mockimport 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/checkoutv3 - uses: actions/setup-nodev3 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考