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