Jest单元测试教程：JavaScript实战攻略

你在学习文章相关的知识吗？本文《Jest单元测试教程：JavaScript实战指南》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

Jest 是 JavaScript 生态中最省心、开箱即用的单元测试框架，尤其适合 React 和 Node.js 项目；无需配置即可运行 test/spec 文件，需注意文件命名、ESM 支持、expect 链式调用、mock 时机及 React 测试聚焦用户行为。

Jest 不是“必须学”的单元测试框架，但它是目前 JavaScript 生态中最省心、开箱即用的选项——尤其对 React 项目和普通 Node.js 模块。

怎样快速跑起第一个 Jest 测试

不用配置文件也能启动：全局安装 jest-cli（或局部安装到项目），在项目根目录执行 jest 命令，它会自动查找 *.test.js 或 *.spec.js 文件并运行。

• 推荐本地安装：npm install --save-dev jest，然后在 package.json 的 scripts 中加 "test": "jest"
• 首次运行失败？大概率是没写匹配的测试文件——确保文件名含 .test. 或 .spec.，比如 math.test.js
• 默认不支持 ES 模块语法（import）；若用 type: "module"，需加 --experimental-vm-modules 或改用 jest.config.js 配置 transform

expect() 断言怎么写才不翻车

expect() 是 Jest 的核心断言函数，但它本身不返回布尔值，而是返回一个“匹配器对象”，必须链式调用 .toBe()、.toEqual() 等方法才能触发校验。

• toBe() 用严格相等 === 比较原始值或引用地址；对象/数组要深层比较请用 toEqual()
• toBeNull() 只匹配 null，不匹配 undefined；toBeUndefined() 和 toBeDefined() 才对应后两者
• 异步代码别漏 async/await + resolves：比如 await expect(fetchData()).resolves.toEqual({id: 1})
• 错误抛出要用 toThrow()，不是 toThrowError()（后者只匹配 Error 实例，前者更宽松）

mock 函数和模块时最常踩的三个坑

Mock 的本质是“替换行为”，不是“绕过逻辑”——Jest 的 jest.fn() 和 jest.mock() 很强大，但容易误用导致测试失真。

• jest.mock('fs') 必须在 require 或 import 目标模块之前调用，否则 mock 失效（ESM 下更敏感，建议放在文件顶部）
• jest.fn() 默认返回 undefined；想让 mock 函数返回值，得显式写 jest.fn().mockReturnValue(42) 或 .mockImplementation(() => 42)
• 模块级 mock 后，如果还想调用原始实现，用 jest.requireActual('lodash') 获取真实模块，再手动传入

测试 React 组件该测什么、怎么测

React 测试不等于“渲染快照”，重点应是用户行为与组件响应之间的契约。Jest 本身不渲染组件，需要搭配 @testing-library/react（推荐）或 enzyme（已停更）。

• 避免测试内部实现细节（如 state 字段名、useEffect 调用次数）；聚焦“输入 props → 用户点击 → 输出是否符合预期”
• 渲染组件用 render()，查元素用 screen.getByText() 等查询函数，而不是 container.querySelector
• 触发事件用 fireEvent.click() 或 userEvent.click()（后者更接近真实用户行为）
• 清理副作用：每个测试结束后，@testing-library/react 自动调用 cleanup()；但若手动用了 setInterval 等，需在 afterEach 中清除

真正难的不是写测试，而是判断“这个逻辑值不值得单独覆盖”——边界条件、分支路径、副作用依赖，比“所有函数都测一遍”重要得多。

理论要掌握，实操不能落！以上关于《Jest单元测试教程：JavaScript实战攻略》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！