随着 JavaScript 和 React 的越来越流行，测试已成为现代 Web 开发中的一个至关重要的环节。Jest 是 Facebook 推出的一款专门针对 React 应用的测试框架。对于初学者来说，学习 Jest 可以帮助深入理解 React 的工作原理，提高代码质量。本文将介绍如何快速入门 Jest 测试框架。
安装 Jest
首先，要在项目中安装 Jest。可以使用 npm 或 yarn 来安装 Jest：
npm install --save-dev jest # or yarn add --dev jest
安装完成之后，你需要在项目根目录下创建一个 __tests__ 目录。Jest 默认会在这个目录下查找所有测试脚本。
编写测试脚本
Jest 提供了用于编写测试的关键字和 API，包括 describe、it、expect 等，具体可以参考官方文档。下面我们举一个简单的例子来说明 Jest 的基本用法。假设你有一个 sum.js 文件，其中包含一个计算两数之和的函数：
function sum(a, b) {
return a + b;
}
module.exports = sum;现在我们要在 __tests__ 目录下编写一个测试脚本 sum.test.js，来测试 sum 函数是否正确。
const sum = require('../sum');
describe('sum', () => {
it('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
});在这个测试脚本中，我们使用了 describe 和 it 来分别描述测试的场景和测试用例。expect 则用于检查测试结果是否符合预期。在这个例子中，我们期望 sum(1,2) 的结果应该是 3。如果测试通过，你应该能够看到以下输出：
PASS __tests__/sum.test.js
sum
✓ adds 1 + 2 to equal 3 (2 ms)高级用法
除了基本的测试用例，Jest 还支持许多高级用法，例如异步测试、快照测试、模拟函数等。
异步测试
在实际的开发中，很多操作都是异步的，例如从服务器加载数据或者定时器的操作等。在 Jest 中，你可以使用 async 和 await 关键字来处理异步操作。假设我们有一个异步函数，用于从服务器获得数据：
function fetchData(callback) {
setTimeout(() => {
callback('data');
}, 1000);
}我们可以编写一个测试脚本来检查该函数是否能够正确地返回数据：
-- -------------------- ---- -------
-------- ------------------- -
------------- -- -
-----------------
-- ------
-
--------------- ------- ------ ----- -- -- -
----- ---- - ----- --- ----------------- -- -
-------------------
---
--------------------------
---在这个测试脚本中，我们首先声明了 async 函数，表明该测试用例是一个异步测试。然后，在测试用例中，我们使用 await 关键字等待 fetchData 函数返回结果，并对返回结果进行检查。
快照测试
快照测试是一种测试方式，用于保证代码的输出不发生意外的变化。在 Jest 中，你可以使用 toMatchSnapshot 函数来实现快照测试。假设我们有一个组件 Header，用于渲染网站的头部：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------- -
----- - ------ ----------- - - ------
------ -
--------
----------------
--------------------
---------
--
-
------ ------- -------我们可以编写一个测试脚本来测试该组件的快照：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ----------------------
------ ------ ---- ------------
------------ --------- ------- ----------- -- -- -
----- ----- - -
------ ------- -------
------------ ----- -- - ---- -- ---- -------- ----------
--
----- --------- - ----------------------- ---------- ----
----- ---- - -------------------
-------------------------------
---在这个测试脚本中，我们使用了 renderer 来创建 Header 组件的渲染树，并对该渲染树进行快照测试。如果代码的输出与之前的快照不同，Jest 会自动提示你更新快照。
模拟函数
在测试过程中，我们经常需要模拟各种函数，以便测试一些复杂场景的代码。在 Jest 中，你可以使用 jest.fn() 来创建一个模拟函数。下面我们举一个简单的例子。假设我们有一个 notify 函数，用于发送通知：
function notify(message) {
// send message
}我们可以编写一个测试脚本来测试 notify 函数是否被正确地调用：
import { notify } from '../notify';
it('calls notify correctly', () => {
const mockFn = jest.fn();
notify('message', mockFn);
expect(mockFn).toHaveBeenCalledWith('message');
});在这个测试脚本中，我们使用了 jest.fn() 创建一个模拟函数，然后在调用 notify 函数时将模拟函数传入。最后，我们使用 toHaveBeenCalledWith 来检查 notify 函数是否被正确地调用。
总结
在此，我们介绍了 Jest 测试框架的基本用法以及一些高级用法，包括异步测试、快照测试和模拟函数。通过学习 Jest 测试框架，你可以更好地理解 React 应用的工作原理，提供更高质量的代码。如果你对 Jest 有任何疑问或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c871fa5ad90b6d04139d6c