在前端开发中，测试是非常重要的环节，能够帮助我们检查代码是否正常运行，避免出现潜在问题。而最近几年，Jest 受到越来越多开发者的关注，因其速度快、易于配置等优点，成为前端测试的首选框架之一。
在使用 Jest 进行测试时，有一个非常实用的功能——watch 模式。其作用是在代码修改后，实时监测测试文件的变化，并自动重启测试，从而能够快速反馈测试结果，提高开发效率。
下面我们来详细了解 Jest 中的 watch 模式，并结合示例演示其运用。
watch 模式介绍
Jest 的 watch 模式使用了 chokidar 进行文件监听，能够监测测试文件的变化，并自动执行相关测试。具体来说，它有以下特性：
- 监听所有测试文件（.spec.js）的变化。
- 自动重启测试。
- 可以选择只运行与变化文件有关系的测试。
除了这些特性之外，Jest 的 watch 模式还具有许多高级功能，例如快照测试本地比较、watch 缓存等。
watch 模式的运行方式非常简单，只需要在命令行中加上 --watch 参数即可启动：
---- -------
此时，Jest 会监听所有测试文件的变化，并自动重启测试。如果只想监听某个文件夹下的测试文件，可以使用 --watchPath 参数：
---- ------- ----------------------
这会只监听 tests/unit 下的测试文件。
watch 模式实例
现在，让我们结合一个简单的测试示例，来了解 Jest 中 watch 模式的具体应用。
我们将针对一个计算器组件进行测试。该组件包含 add 和 subtract 两种方法，在 watch 模式下，当我们修改了组件代码时，会自动重启测试并输出结果。
首先，创建一个名为 Calculator.js 的组件文件:
------ ------- ----- ---------- -
------ ------ -- -
------ - - --
-
------ ----------- -- -
------ - - --
-
-接着，创建一个测试文件 Calculator.spec.js，其中包含两个测试用例：
------ ---------- ---- ---------------
---------------------- -- -- -
------- --- --- --------- -- -- -
------------------------ ---------------
---
------- -------- --- --------- -- -- -
----------------------------- ---------------
---
---现在，使用 watch 模式运行测试：
---- -------
此时，我们可以修改 Calculator.js 中的 add 和 subtract 方法，例如：
------ ------- ----- ---------- -
------ ------ -- -
------ - - - - -- -- ------ -
-
------ ----------- -- -
------ - - - - -- -- ------ -
-
-修改后保存文件，Jest 会自动检测到变化并重新运行测试。此时，我们会发现测试结果出现异常，与修改后的代码相矛盾：
---- --------------------
- ---------- - --- --- --- -------
----------------------------------
-------- ----- -- ------
-
---------
-
- - ---------------------- -- -- -
- - ------- --- --- --------- -- -- -
- - - ------------------------ ---------------
- -
- - ---
-- ------------------ -------------------------这是由于我们修改了代码，但测试用例并未同步更新导致的。解决方法非常简单，只需要重新运行测试即可：
----- ----- - ----- - -- --- --- ------ - ----- - -- --- ---- ------ ------ - ----- - -- ------ -- - -------- ----- -------- - ----- - -- ------ -- - ---- ---- ----- -------- - ----- - -- ---- ----- ----- - ----- ----- -- ------- - ---- ----
在 watch 模式中，我们只需要按下 Enter 即可重新运行测试。此时，测试会根据修改后的代码重新执行，并反馈最新的结果：
---- --------------------
----------
- --- --- --- ------- -- ---
- --- -------- --- -------
---- ------- - ------- - -----
------ - ------- - -----
---------- - -----
----- ----- -- --------- - -
--- --- ---- ------ -------- -----可以看到，测试已经通过，并与我们修改后的代码相吻合。
总结
Jest 是一个非常强大的前端测试框架，其 watch 模式能够帮助我们实现测试文件的实时监测、自动重启测试等功能，提高开发效率。在编写测试时，建议加上 --watch 参数，以便配合代码修改使用。
当然，Jest watch 模式还有许多高级功能，例如缓存、快照测试等，在实际使用中可以进一步了解和深入应用，以便更好地提升测试效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64facd1af6b2d6eab3199999