随着 Vue.js 的流行和开发社区的扩大，Vue.js 已成为许多前端工程师的首选框架。而为了保证代码质量和可靠性，测试是不可或缺的一步。Jest 是一个比较流行的前端测试框架，本文将介绍如何使用 Jest 测试 Vue.js 应用。
安装 Jest
安装 Jest 很简单，只需要在项目中输入以下命令即可：
npm install --save-dev jest vue-jest @vue/test-utils
vue-jest 是 Jest 与 Vue.js 交互的插件，@vue/test-utils 是 Vue.js 官方提供的测试工具。
简单的 Vue.js 组件测试
首先让我们创建一个简单的 Vue.js 组件并测试它。以下是我们要测试的组件代码：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ----------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------- --------
------------ ----- -- - ------ ------ -----------
-
-
-
---------现在我们来编写测试代码，保存在 sample.spec.js 文件中：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
------ --------------- ---- ------------------------
------------------------------- -- -- -
------------- ----- --- ------------- -- -- -
----- ------- - ------------------------------
------------------------------------------------- ---------
---------------------------------------------- -- - ------ ------ -------------
---
---我们使用 shallowMount 方法从 Vue.js 测试工具中获取 SampleComponent 的实例，并测试其 title 和 description 是否正确渲染。在 terminal 中运行以下命令测试：
npm test
如果在测试过程中出现错误，你会看到类似于下面的输出：
-- -------------------- ---- -------
---- -------------------------
-------------------
- ------- ----- --- ----------- -----
- ------------------- - ------- ----- --- -----------
---------------------------------- -- -- ----------- --------
-------- ---------- ----- -- - ------ ------ -----------
-------- ------- ----- -- - ------ ------ ------------
-----------
- ---- -- - ------ ------ ----------
- ---- -- - ------ ------ -----------
- - ------------- ----- --- ------------- -- -- -
- - ----- ------- - ------------------------------
- - - ---------------------------------------------- -- - ------ ------ -------------
- -
- - ---
- - ---
-- ------------------ ------------------------------Vue.js 组件中的异步操作测试
当 Vue.js 组件中涉及异步操作时，我们需要相应地处理测试。以下是带有异步操作的组件代码：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ----------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
------------ --
-
--
----- --------- -
----- ---- - ----- -----------------------------
---------- - -----------
---------------- - -----------------
-
-
---------我们在组件的 created 钩子函数中使用了异步 this.$axios.get 方法获取数据。现在，我们需要进行一些更高级的测试来确保异步数据获取正确。
以下是 src/api.js 文件中模拟 axios.get 的代码：
export default {
get(url) {
return Promise.resolve({
title: 'Testing Vue.js with Jest',
description: 'This is a sample Vue.js component for testing with Jest.'
});
}
}现在我们已经准备好开始测试异步操作。以下是测试代码：
-- -------------------- ---- -------
------ - ------------ - ---- ------------------
------ --------------- ---- ------------------------
------ ----- ---- ------------
---------------------- -- -- --
---- ---------
----
------------------------------- -- -- -
------------- ----- --- ----------- ---- ----- ----- -- -- -
---------------------------------
----- -
------ -------- ------ ---- ------
------------ ----- -- - ------ ------ --------- --- ------- ---- ------
-
---
----- ------- - ------------------------------
----- -----------------------
-------------------------------------------------- ------ ---- -------
---------------------------------------------- -- - ------ ------ --------- --- ------- ---- --------
---
---我们使用 jest.mock 方法将 axios.get 置换为一个模拟方法，并在测试开头调用 mockResolvedValueOnce 方法模拟数据返回。在测试过程中，我们使用 async/await 等待下一次更新，然后断言正确的标题和说明是否被渲染。
Vue.js 组件中的事件测试
在组件的 methods 中涉及到的事件也需要进行测试，包括执行事件后的状态改变等。以下是我们要测试的组件代码：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ----------- ------
------- ----------------------------- --------------- - ------ - ------ -- --------------------
-- ------------------- --------------------------- ----------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ ------- --------
------------ ----- -- - ------ ------ ------------
---------------- -----
-
--
-------- -
------------------- -
-------------------- - ----------------------
-
-
-
---------在上面的组件中，我们使用 @click 事件处理程序切换显示说明。以下是测试代码：
-- -------------------- ---- -------
------ - ----- - ---- ------------------
------ --------------- ---- ------------------------
------------------------------- -- -- -
------------- ----------- -- ------ ------- ----- -- -- -
----- ------- - -----------------------
-------------------------------------------------------------
----- ----------------------------------------
------------------------------------------------------------
----- ----------------------------------------
-------------------------------------------------------------
---
---我们使用 mount 方法创建组件的更完整的实例，并测试点击按钮后说明的正确显示和隐藏。
结论
在本文中，我们介绍了使用 Jest 测试 Vue.js 应用程序的基础知识和一些技巧。测试是开发过程中至关重要的一步，能够保证代码在各种环境下的可靠性和正确性，并对应用程序进行持续集成和交付做出贡献。
参考：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b715d9babaf620fab9945