Jest:目前最广泛使用的前端 JavaScript 测试框架
创始人
2025-07-06 00:20:42
0

本文转载自微信公众号「写代码的宝哥」,作者写代码的宝哥。转载本文请联系写代码的宝哥公众号。

Jest 是一个简单易用的 JavaScript 测试框架。最初由 Meta 公司团队维护。2022 年 5 月,Meta 公司正式将自己的开源项目Jest 移交给 OpenJS Foundation[1],这表示 Jest 由公司驱动变为社区驱动,有 OpenJS Foundation 保底,Jest 将不会因公司发展需要而停止维护。

下面我们就来学习吧。

快速上手

初始化项目

首先创建项目目录:

mkdir jest-demos && cd jest-demos
npm init -y

然后,安装 Jest 依赖:

npm install --save-dev jest

第一个测试文件

创建待测试文件 src/sum.js:

function sum(a, b) {
  return a + b;
}
module.exports = sum;

创建测试文件 __tests__/sum.test.js:

const sum = require('../src/sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

注:按照约定,测试文件以 .test.js 或 .spec.js 结尾,并且放在 __tests__ 目录中。

package.json 文件中增加脚本:

{
  "scripts": {
    "test": "jest"
  }
}

终端上执行命令 npm test,查看结果。

图片图片

这样我们就完成了第一个测试文件的编写和集成。

存在的问题

不过目前存在 2 个问题:

  • Jest 只支持 CommonJS 代码,并不支持 ES Module 代码,为了测试 ES Module 代码,我们只能将 ES Module 代码转换为 CommonJS 代码
  • Jest 也不支持 TypeScript 代码

如何解决呢?有 2 个方案:

  1. 使用 Babel + @babel/preset-env + @babel/preset-typescript 的组合,或者
  2. 使用 ts-jest(基于 TypeScript)

不过为了得到完整的类型检查支持,我们选择 ts-jest。下面就来学习。

配置 ts-jest

ts-jest 本质上就是 Jest transformer,支持你在 TypeScript 项目里使用 Jest。

这部分配置我们参照官方教程[2]。

安装必要依赖

首先安装必要依赖:

npm install --save-dev ts-jest jest typescript @types/jest
  • ts-jest 是我们必须要安装的
  • ts-jest 依赖 jest 和 typescript,因此也安装下(jest 在上一步已经安装,所以在这里是可选的)
  • 安装 @types/jest 是为了获取类型提示支持

生成配置文件

然后,生成 Jest 配置文件——这里借助 ts-jest 指令来生成:

npx ts-jest config:init

这一步会在项目根目录下创建 jest.config.js 文件:

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

修改文件后缀

将 src/sum.js 和 __tests__/sum.test.js 的文件后缀改成 .ts,并将代码改成 ES Module 方式组织。

// src/sum.ts
function sum(a, b) {
  return a + b;
}
export default sum;
// __tests__/sum.test.ts
import sum from "../src/sum";

test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);
});

终端上执行命令 npm test,查看结果。

图片图片

也成功了。不过有一条告警,建议我们将 tsconfig.json 中的 esModuleinterop 字段设置成 true。

释出 tsconfig.json

为了设置 esModuleinterop 字段,我们将 tsconfig.json 文件释放出来。

$ npx tsx --init

Created a new tsconfig.json with:         
                                           TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

释出的配置中包含 esModuleInterop: true 选择,因此我们也无需修改。不过因为开启了严格模式(strict: true),因此还要对源代码做类型注解。

// src/sum.ts
function sum(a: number, b: number) {
  return a + b;
}
export default sum;

再次运行测试——成功!

图片图片

下一步

以上,我们就学完了 Jest 基础使用和配置的部分的内容。下一步大家可以在 Jest 官网上按照下面的顺序自行学习。

  1. 学习匹配器(Matcher)的使用[3],常用的匹配器有 .toBe()、.toEqual() 和 .toStrictEqual(),完整列表参见这里:https://jestjs.io/docs/expect[4]
  2. 学习如何测试异步代码[5],主要有 2 种异步调用方式:回调和 Promise。回调是通过 done 函数,Promise 则有多种测试方式:直接返回、使用 async await、或者配合前面任意种一方式直接丢给 expect 函数(类似 return|await expect(promise).resolves|rejects.toBe())
  3. 学习使用跟启动、清理相关的一些调用周期函数[6]。比如:beforeAll()、beforeEach()。同时 Jest 还提供了类似 test.only()/describe.only() 的函数,让你仅测试一小部分的代码
  4. 学习 Mock 函数的使用[7]。这部分的内容经常会用到,比如 Mock 函数的创建、实现和使用、如果 Mock 第三方模块(全部和局部)
  5. 学习如何配置浏览器环境的测试[8](利用 jsdom),需要安装 jest-environment-jsdom

References

[1]OpenJS Foundation:https://jestjs.io/blog

[2]官方教程:https://kulshekhar.github.io/ts-jest/docs/getting-started/installation

[3]匹配器(Matcher)的使用:https://jestjs.io/docs/using-matchers

[4]https://jestjs.io/docs/expect:https://jestjs.io/docs/expect

[5]测试异步代码:https://jestjs.io/docs/asynchronous

[6]使用跟启动、清理相关的一些调用周期函数:https://jestjs.io/docs/setup-teardown

[7]学习 Mock 函数的使用:https://jestjs.io/docs/mock-functions

[8]如何配置浏览器环境的测试:https://jestjs.io/docs/tutorial-jquery

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...