登录
首页 >  文章 >  前端

Jest怎么用?JavaScript单元测试入门教程

时间:2026-02-11 08:48:40 489浏览 收藏

大家好,今天本人给大家带来文章《Jest如何用?JavaScript单元测试教程》,文中内容主要涉及到,如果你对文章方面的知识点感兴趣,那就请各位朋友继续看下去吧~希望能真正帮到你们,谢谢!

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

javascript怎样进行单元测试_Jest框架如何使用【教程】

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

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

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

  • 推荐本地安装:npm install --save-dev jest,然后在 package.jsonscripts 中加 "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,不匹配 undefinedtoBeUndefined()toBeDefined() 才对应后两者
  • 异步代码别漏 async/await + resolves:比如 await expect(fetchData()).resolves.toEqual({id: 1})
  • 错误抛出要用 toThrow(),不是 toThrowError()(后者只匹配 Error 实例,前者更宽松)

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

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

  • jest.mock('fs') 必须在 requireimport 目标模块之前调用,否则 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 中清除

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

以上就是本文的全部内容了,是否有顺利帮助你解决问题?若是能给你带来学习上的帮助,请大家多多支持golang学习网!更多关于文章的相关知识,也可关注golang学习网公众号。

前往漫画官网入口并下载 ➜
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>