在 Vue.js 应用程序中，组件是构建用户界面的关键部分。为了确保它们在不同的环境和配置下的正确运行，您需要对它们进行测试。 Jest 是一个流行的 JavaScript 测试工具，它可以帮助您有效地测试 Vue.js 组件。本文将介绍如何使用 Jest 来测试 Vue.js 组件。
安装 Jest
首先，您需要安装 Jest。在终端中输入以下命令：
--- ------- ---------- ----
编写测试代码
现在您可以开始编写测试代码了。我们将采用单文件组件和 Jest 的 snapshot 测试。
单文件组件是将组件的模板、脚本和样式打包在一个文件中的技术。与使用模板字符串和 script 标记的方式相比，它更具有可重用性和模块性。以下是单文件组件的示例代码：
----------
---- ------------
------ ----- -------
------- ---------------------------- ----------------
------ ------- -- -- ------- ------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
------ --- ------- -----
-------- --
--
--
-------- -
----------- -
------------ -- --
--
--
--
---------
-------
---- -
----------------- --------
-------- -----
-
-- -
------ -----
---------- -----
-------------- -----
-
------ -
------ ------
----------------- -----
-------- --- -----
------- -----
-------------- -----
-
- -
------ ------
---------- -----
-
--------现在，让我们编写测试代码，以确保组件按预期工作。我们将使用 Jest 的 snapshot 测试功能，该功能在第一次运行测试时捕获组件的输出，并将其保存在 .snap 文件中。在后续测试运行期间，它将检查组件的输出是否与先前的快照相同。如果不是，则测试将失败。
为了方便起见，在 test 文件夹中创建名为 app.spec.js 的文件，并将以下代码复制到该文件中：
------ - ------------ - ---- ------------------
------ --- ---- -----------------------
------------------- -- -- -
----------- ----------- -- -- -
----- ------- - ------------------
-----------------------------------------
---
---该代码使用 shallowMount 函数将组件包装在一个存根（不包含实际 DOM 元素的组件）中，以便测试组件输出。然后，它使用 Jest 的 toMatchSnapshot 函数将组件输出与先前的快照进行比较。如果组件输出有任何更改，则测试将失败。
运行测试
现在，您可以运行测试，检查组件是否按预期显示。
在终端中输入以下命令：
--- ----
Jest 将运行测试，并显示测试结果。如果一切正常，则测试将通过。
总结
测试 Vue.js 组件对于确保它们在不同的环境和配置下的正确运行至关重要。使用 Jest 可以帮助您编写简单、可读且可维护的组件测试。本文向您展示了如何使用 Jest 来测试 Vue.js 组件。现在，您可以尝试在自己的 Vue.js 应用程序中使用 Jest 进行组件测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/649d922e48841e9894a4c827