当前位置：首页 > 科技 > 软件

Jest：目前最广泛使用的前端 JavaScript 测试框架

来源：责编：时间：2023-11-08 17:03:21 180观看

导读Jest 是一个简单易用的 JavaScript 测试框架。最初由 Meta 公司团队维护。2022 年 5 月，Meta 公司正式将自己的开源项目Jest 移交给 OpenJS Foundation[1]，这表示 Jest 由公司驱动变为社区驱动，有 OpenJS Foundation 保

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

下面我们就来学习吧。

快速上手

初始化项目

首先创建项目目录：

mkdir jest-demos && cd jest-demosnpm 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 个方案：

使用 Babel + @babel/preset-env + @babel/preset-typescript 的组合，或者
使用 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.tsfunction sum(a, b) {  return a + b;}export default sum;

// __tests__/sum.test.tsimport 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 --initCreated a new tsconfig.json with:                                                    TS  target: es2016  module: commonjs  strict: true  esModuleInterop: true  skipLibCheck: true  forceConsistentCasingInFileNames: true

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

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

再次运行测试——成功！

图片

下一步

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

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

本文链接：http://www.28at.com/showinfo-26-17765-0.htmlJest：目前最广泛使用的前端 JavaScript 测试框架

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Python模块化开发：构建可重用、可维护的代码

下一篇： Python 既是解释型语言，也是编译型语言

标签：

热门焦点

俄罗斯：将审查iPhone等外国公司设备保数据安全

iPhone和特斯拉都属于在各自领域领头羊的品牌，推出的产品也也都是数一数二的，但对于一些国家而言，它们的产品可靠性和安全性还是在限制范围内。近日，俄罗斯联邦通信、信息技术
6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

2023年上半年已经正式过去了，我们也迎来了安兔兔V10版本，在新的骁龙8Gen3和天玑9300发布之前，性能榜的榜单大体会以骁龙8Gen2和天玑9200+为主，至于那颗3.36GHz的骁龙8Gen2领先
一加首款折叠屏！一加Open渲染图出炉：罕见单手可握小尺寸

8月5日消息，此前就有爆料称，一加首款折叠屏手机将会在第三季度上市，如今随着时间临近，新机的各种消息也开始浮出水面。据悉，这款新机将会被命名为“On
Raft算法：保障分布式系统共识的稳健之道

1. 什么是Raft算法？Raft 是英文”Reliable、Replicated、Redundant、And Fault-Tolerant”（“可靠、可复制、可冗余、可容错”）的首字母缩写。Raft算法是一种用于在分布式系统
得物效率前端微应用推进过程与思考

一、背景效率工程随着业务的发展，组织规模的扩大，越来越多的企业开始意识到协作效率对于企业团队的重要性，甚至是决定其在某个行业竞争中突围的关键，是企业长久生存的根本。得物
消息称小米汽车开始筛选交付中心：需至少120个车位

IT之家 7 月 7 日消息，日前，有微博简介为“汽车行业从业者、长三角一体化拥护者”的微博用户 @长三角行健者发文表示，据经销商集团反馈，小米汽车目前
华为Mate 60保护壳曝光：硕大后置相机模组凸起程度有惊喜

这段时间以来，关于华为新旗舰的爆料日渐密集。据此前多方爆料，今年华为将开始恢复一年双旗舰战略，除上半年推出的P60系列外，往年下半年的Mate系列也将
华为将推出盘古数字人大模型可帮助用户12小时完成数字人生成

在今日举行的2023年华为云数字文娱AI创新峰会上，华为云全球Marketing与销售服务总裁石冀琳表示，华为云将在后续推出盘古数字人大模型，可帮助用户12小
iQOO Neo8 Pro抢先上架：首发天玑9200+ 安卓性能之王

经过了一段时间的密集爆料，昨日iQOO官方如期对外宣布：将于5月23日推出全新的iQOO Neo8系列新品，官方称这是一款拥有旗舰级性能调校的作品。随着发布时