Jest 是当前前端界最受欢迎的测试框架之一，它提供了一套完整的测试工具链，并且非常易于使用。在本文中，我们将深入探讨 Jest 的高级使用方法，包括如何测试异步代码、如何模拟函数和模块、如何使用快照测试等。
安装 Jest
首先，你需要在你的项目中安装 Jest。你可以通过 NPM 或 Yarn 来安装 Jest：
npm install --save-dev jest
或者
yarn add --dev jest
安装完成后，你就可以在你的项目中使用 Jest 进行测试了。
测试异步代码
在很多情况下，我们需要测试异步代码。例如，如果我们需要测试一个使用 Promise 的函数，我们就需要确保 Promise 被正确地解决或拒绝。Jest 提供了多种处理异步测试的方法。
使用回调函数
最基本的异步测试方法是使用 Jest 提供的回调函数。例如，如果我们有一个异步函数 fetchData，我们可以这样测试它：
-- -------------------- ---- -------
-------- ------------------- -
------------- -- -
----------------
-- -----
-
--------------- ------- ------ ---- -- -
-------------- -- -
-------------------------
------
--
--在这个例子中，我们在测试函数中使用一个 done 回调函数，Jest 会等待你调用这个函数之后才结束测试。
使用 Promises
如果我们使用的是 Promises，我们可以返回一个 Promise 对象并在测试函数中使用 then 函数进行断言。
-- -------------------- ---- -------
-------- ----------- -
------ --- --------------- -- -
------------- -- -
---------------
-- -----
--
-
--------------- ------- ------ -- -- -
------ --------------------- -- -
-------------------------
--
--在这个例子中，我们在测试函数中返回了 fetchData 函数的 Promise 对象，并在 then 函数中进行了断言。
使用 async/await
Jest 还支持使用 async/await 的方式进行异步测试。这种方式更加直观和易于理解。
-- -------------------- ---- -------
----- -------- ----------- -
------ --- --------------- -- -
------------- -- -
---------------
-- -----
--
-
--------------- ------- ------ ----- -- -- -
----- ---- - ----- -----------
-------------------------
--在这个例子中，我们使用了 async/await 的方式，获取了 fetchData 函数的返回值，并进行了断言。
无论你使用哪种方式，你都可以使用 Jest 的异步测试方法，确保你的代码在异步调用时能够正确地工作。
模拟函数和模块
有时我们需要测试依赖于其他代码的函数，这时候我们可以使用 Jest 的模拟功能。这让我们可以更简单地测试那些依赖于外部模块或函数的代码。
模拟函数
我们可以使用 Jest 的 jest.fn() 函数来创建一个模拟函数。这个函数可以模拟其他函数的行为，我们可以在测试中来检查这个模拟函数是否被正确地调用。
-- -------------------- ---- ------- -------- ------ -- - ------ - - - - --------- ----- --- -------- ---------- -- -- - ----- -------- - --------- ------ -- --------- ---------------------------------------- --
在上面的例子中，我们创建了一个模拟函数 callback，并调用了我们要测试的函数 add。在测试中，我们使用 toHaveBeenCalledWith 函数来检查模拟函数是否被正确地调用。
模拟模块
我们也可以使用 Jest 的 jest.mock() 函数来创建一个模拟模块。这个函数可以模拟一个依赖库，我们可以使用它来测试我们的代码是否正确地使用了这个依赖库。
例如，如果我们要测试一个依赖于 axios 库的函数，我们可以这样来模拟这个依赖库：
-- -------------------- ---- ------- ----- ----- - ---------------- -------- ----------- - ------ ----------------------------------------- - --------------- ----- --- --- ----------- ----- -- -- - ----- -------- - - ----- ------ - ------------------------------------- ----- ---- - ----- ----------- ----------------------------------- ------------------------------------------ ---------------------------------------------------------------------- --
在上面的例子中，我们使用了 jest.mock() 函数来模拟了 axios 库。这个函数会自动替换 axios 模块，从而使我们可以在测试中对其进行断言。我们调用了 axios.get.mockResolvedValue 函数来设置 axios.get 的返回值，并使用 Jest 的断言函数来检查函数是否被正确地调用。
使用快照测试
快照测试是一种测试方法，用于比较 UI 的实际输出和预期输出的快照。在 Jest 中，我们可以使用 toMatchSnapshot() 函数来进行快照测试。这个函数会对 UI 的输出进行截图，并将其与之前记录的快照进行比较。
例如，如果我们要测试一个 React 组件，我们可以这样来使用快照测试：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ -------- ---- --------------------- ------ ------ ---- ---------- ------------ ------- ---------- -- -- - ----- --------- - ----------------------- --- ----- ---- - ------------------ ------------------------------ --
在上面的例子中，我们使用 react-test-renderer 库创建了一个组件实例，并调用了 toMatchSnapshot 函数来对组件的输出进行比较。
当第一次运行快照测试时，Jest 会自动记录快照，并将其写入到一个测试文件中。当你进行后续测试时，Jest 会自动将输出截图与当前的快照进行比较。如果测试失败，你可以手动检查快照，并决定是否更新它。
总结
Jest 是一个强大的测试框架，它提供了多种测试方法和工具，使得前端测试变得简单易用。在本文中，我们探讨了 Jest 的高级使用方法，包括测试异步代码、模拟函数和模块以及使用快照测试。希望这些内容能够帮助你更加有效地使用 Jest 进行前端测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbcfd9f6b2d6eab31f18bc