随着前端开发越来越复杂，对于我们来说，单元测试已经成为了必不可少的一部分工作。而在进行单元测试时，我们常常需要使用 mockData，即模拟数据来测试接口的功能是否正常，但如何在 Jest 中实现 mockData 的使用呢？本文将详细介绍如何使用 mockData 进行离线数据测试，为大家提供指导意义。
什么是 mockData？
mockData，即模拟数据，是指程序员在编写测试用例时使用的数据。mockData 不需要与真实的数据库交互，可以通过手动创建的方式生成任何我们需要的数据。使用 mockData 能够更快地编写测试用例，并且避免由于真实数据的变化而导致的修改测试用例的麻烦。
Jest 简介
在本篇文章中，我们使用 Jest 作为测试框架来进行 mockData 的使用。Jest 是一个用于编写测试的 JavaScript 框架，它是由 Facebook 开发的一个测试框架，使用简单、效率高、支持单元测试、集成测试、UI 测试等多种测试方式。
实现方法
关于如何在 Jest 中使用 mockData 进行离线数据测试，可以分为以下几个步骤：
为被测试代码提供 mockData。
编写测试脚本。
运行测试脚本。
现在我们逐一展开。
为被测试代码提供 mockData
假设我们现在有一个获取用户信息的接口，代码如下：
// api.js
export async function getUserInfo() {
const response = await fetch('/user/info');
const data = await response.json();
return data;
}我们需要对其进行测试，但是我们又不能从真实的接口获取数据，那么我们就需要提供 mockData。我们可以添加一个 mock.js 文件来提供 mockData，代码如下：
-- -------------------- ---- ------- -- ---------------- ----- -------- - - ----- ----- ---- --- ------- --- -- ------ ----- -------- ------------- - ------ -------------------------- -
这里我们将正常调用接口的代码修改为返回 Promise，返回的值就是我们手动编写的 mockData。我们可以将这个文件放在被测试代码所在目录下，或者放在一个单独的目录，只需要在 Jest 的配置文件中告诉 Jest 就可以了。
编写测试脚本
我们可以创建一个 test.js 文件来编写测试脚本。在该文件中，我们引入被测试代码文件 api.js，以及 mock.js 文件，代码如下：
-- -------------------- ---- -------
-- -------
------ - ----------- - ---- --------
-------------------
---------- ------ ---- ------ ----- -- -- -
----- -------- - -
----- -----
---- ---
------- ---
--
--------------------------------- -- ---------------------------
----- ------ - ----- --------------
---------------------------------
---在这个测试脚本中，我们使用了 Jest 提供的 jest.mock 方法，将被测试代码文件 api.js 替换为我们手动编写的 mock.js。我们使用 mockImplementation 方法来指定 mockData，然后执行 getUserInfo 方法，最后使用 expect 方法来判断结果是否与 mockData 相等。
运行测试脚本
我们现在可以使用 Jest 框架来运行测试脚本。在项目根目录下，执行以下命令即可：
npm run test
Jest 将会查找所有以 .test.js 或者 .spec.js 结尾的文件，并执行其中的测试脚本。
总结
在 Jest 中使用 mockData 进行离线数据测试，相比于使用真实数据的方式，可以更加方便、快捷地编写测试用例，并且可以避免真实数据变化导致的麻烦。
在实现上，只需要提供 mockData，以及使用 Jest 提供的 jest.mock 方法来替换被测试代码文件即可。我希望这篇文章能够为大家提供一些技术上的指导，并且帮助大家更好地实现 mockData 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648545a248841e989442a62d