前言
Jasmine 和 Jest 都是前端测试框架中的佼佼者，它们都可以用来进行单元测试和集成测试，而且两者都有着非常好的社区支持和良好的文档。
但是，这两个工具还是有些区别的。Jasmine 的定位更偏向于 BDD（行为驱动开发），而 Jest 则更偏向于 TDD（测试驱动开发）。
如果你觉得 Jasmine 的语法不太符合你的使用习惯，或者你想要试试 Jest 的特性，并且想要一些学习以及指导参考，那么这篇文章就是为你准备的。
安装 Jest
Jest 的安装非常简单，只需要在终端里运行：
npm install jest --save-dev
如果你使用的是 yarn：
yarn add --dev jest
安装完成后，你就可以在命令行中使用 Jest 命令了。
Jest 的基本语法
Jest 的基本语法和 Jasmine 很类似，都是由describe和it两个关键词组成。
首先，我们来看一个 Jasmine 的测试用例：
-- -------------------- ---- -------
---------------------- ---------- -
---------- --- --- ------- ----------- ---------- -
------------------------ ---------------
---
---------- -------- --- ------- ----------- ---------- -
----------------------------- ---------------
---
---这个测试用例包含了一个测试用例集Calculator，里面有两个测试用例，分别测试了加法和减法两个函数。
现在，我们把这个测试用例用 Jest 重写一下：
-- -------------------- ---- -------
---------------------- -- -- -
---------- --- --- ------- ----------- -- -- -
------------------------ ---------------
---
---------- -------- --- ------- ----------- -- -- -
----------------------------- ---------------
---
---你会发现，除了用的是箭头函数之外，其他和 Jasmine 的用法是一样的。
除此之外，Jest 还提供了一些新的 API，比如test、beforeEach、afterEach等等，这些新的 API可以让你更方便地编写测试用例。
Jest 的 Mock 功能
Jest 还提供了非常强大的 Mock 功能，可以方便地模拟某些函数或对象的返回值，以达到控制测试用例行为的目的。
我们先来看一个常见的问题，比如我们要测试一个接口，这个接口需要从后端获取数据，然后调用我们的一些处理逻辑。
在测试这个接口的时候，我们不可能每次都去调用真正的后端接口，这样不仅太慢，而且还有可能导致测试结果不稳定。
如何解决这个问题？答案是使用 Mock。
我们可以用 Jest 提供的jest.fn()函数来创建一个 Mock 函数，比如：
const fetchData = jest.fn();
这个fetchData函数现在是一个空的 Mock 函数，我们可以在测试用例中使用它来模拟数据的获取。
接下来，我们要测试的函数如下：
async function getData() {
const res = await fetchData();
const data = res.data;
// some logic here
return data;
}这个函数从后端获取数据，并做了一些逻辑处理，最终返回数据。
现在，我们要测试这个函数，但是我们不想真正地调用后端接口，而是使用我们之前创建的 Mock 函数：
describe("getData", () => {
it("should return correct data", async () => {
fetchData.mockResolvedValue({ data: "test" });
const result = await getData();
expect(result).toEqual("test");
});
});在这个测试用例中，我们首先调用了fetchData.mockResolvedValue()函数来模拟fetchData函数的返回值，然后再测试getData函数本身的行为。
使用 Mock，我们不仅可以模拟后端接口，还可以模拟一些复杂的对象、函数，甚至可以模拟用户的行为等等。
Jest 的其它特性
除了上面介绍的基本语法和 Mock 功能之外，Jest 还有很多其它特性，比如：
Snapshot Testing
Jest 的 Snapshot Testing 功能可以方便地进行 DOM 渲染测试，避免手工编写太多的测试用例。
// ExampleComponent.jsx
import React from "react";
function ExampleComponent({ name }) {
return <div>Hello, {name}</div>;
}
export default ExampleComponent;-- -------------------- ---- -------
-- -------------------------
------ ----- ---- --------
------ -------- ---- ----------------------
------ ---------------- ---- ---------------------
---------------------------- -- -- -
----------- ----------- -- -- -
----- ---- - --------------------------------- ------------ -------------
-------------------------------
---
---在这个测试用例中，我们使用react-test-renderer这个库将 JSX 渲染成了一个 JSON，然后把这个 JSON 和预设的快照进行比对，如果快照完全一致，那么这个测试用例就通过了。
Coverage Report
Jest 可以生成一份覆盖率报告，帮助你了解测试用例的覆盖率情况。
npm run test -- --coverage
上面这个命令会在终端中显示测试用例的覆盖率统计，同时也会在项目根目录下生成一个coverage目录，里面包含了详细的 HTML 报告。
总结
本文介绍了如何从 Jasmine 切换到 Jest，从语法、Mock、Snapshot Testing 和 Coverage Report 等多个方面进行了详细的讲解和介绍。
Jest 是一款非常强大的测试框架，它不仅提供了和 Jasmine 一样的基本语法，还提供了 Mock、Snapshot Testing 和 Coverage Report 等多个特性，能够让你更方便地编写测试用例，同时也能帮助你提高代码的质量和可靠性。
如果你之前一直在使用 Jasmine，或者你想了解一下 Jest 的更多特性，那么就赶快学习一下 Jest 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1cbcff6b2d6eab3d03c30