随着 Vue.js 框架的快速普及，越来越多的开发者开始使用它来创建 Web 应用程序。但随着程序规模及其复杂性的增加，单元测试就变得越来越重要。在本文中，我们将使用 Chai 库来测试 Vue.js 应用程序，并分享最佳实践。
Chai 简介
Chai 是一个 BDD/TDD 的断言库，可用于浏览器和 Node.js 环境中。断言库是一种用于编写测试的工具。Chai 提供了一些基本断言函数，例如 expect、assert、should等，可以用于测试单元和集成测试。此外，Chai 还有助于断言异步代码的执行。
安装
在使用 Chai 测试 Vue.js 应用程序之前，我们需要安装一些依赖项。因此，我们将使用 Vue CLI 快速生成一个 Vue.js 项目。确保先安装 Node.js 和 Vue CLI。
首先，在命令行中进入要创建项目的文件夹：
cd my-vue-app
然后运行以下命令：
vue create .
这将启动 Vue CLI，为您的项目安装必要的依赖，并提示您选择所需的配置选项。
完成后，我们需要安装 Chai 和 karma-chai 插件。打开终端，进入项目目录，然后运行以下命令：
npm install chai karma-chai karma-chrome-launcher --save-dev
Chai 库和 karma-chai 插件现在已被成功安装。
编写测试
在本 sectio 中，我们将编写几个简单的测试来测试我们的 Vue.js 应用程序。在您的项目文件夹中，创建一个新文件夹 test，然后在其中创建一个测试文件 app.spec.js。将以下代码添加到该文件中：
-- -------------------- ---- -------
------ - ------ - ---- -------
------ - ----- - ---- ------------------
------ --- ---- ------------
------------------- -- -- -
--- --------
------------- -- -
------- - -----------
---
----------- - ------- -- -- -
-------------------------------------------------- ---------
---
----------- - ---- -- ------- -- -- -
--------------------------------------------------
---
---该测试文件中使用了 Chai 的 expect 断言。我们还使用了 @vue/test-utils 套件来创建 Vue 组件的本地包装器，以便于测试。
在测试代码中，我们使用 describe 函数来描述我们要测试的组件。此外，我们使用 beforeEach 函数在每次测试之前创建组件的本地实例。
第一个测试检查渲染的页面是否包含一个标题。首先，我们使用 wrapper.find 找到页面上的 h1 元素，然后使用 text 函数获取其文本内容。然后，使用 expect 函数检查内容是否等于字符串“Hello, World!”。
第二个测试检查渲染的页面是否包含一个列表。我们使用 wrapper.findAll 函数找到页面上的所有 li 元素，并使用 have.lengthOf 函数来检查列表是否确实有三个元素。
现在，我们打开命令行界面并在项目目录中运行以下命令：
npm run test:unit
这将运行测试，如果一切都设置正确，它将显示一条报告。
对异步代码的测试
在 Vue.js 应用程序中，我们经常需要测试异步代码，例如 API 调用或 Promise。在本段落中，我们将讨论如何使用 Chai 测试异步代码。
首先，让我们创建一个简单的 API 调用。在 src 文件夹中创建一个新文件 api.js，并将以下代码添加到该文件中：
-- -------------------- ---- -------
----- ------- - -- -- -
------ --- --------------- -- -
------------- -- -
--------------- ------ ----------
-- -----
---
--
------ ------- -
--------
--在 App.vue 文件中发起 API 调用并渲染数据：
-- -------------------- ---- -------
----------
-----
---------- -----------
----
--- ----------- -- ----- ------------
-- ---- --
-----
-----
------
-----------
--------
------ --- ---- --------
------ ------- -
----- ------
------ -
------ -
----- ---
--
--
--------- -
--------------------------- -- -
--------- - ---------
---
--
--
---------由于 API 调用是异步的，因此我们需要使用 done 函数告诉测试套件测试已经完成。让我们更新 app.spec.js 中的测试代码来测试异步代码：
-- -------------------- ---- -------
---
------ --- ---- --------
------------------- -- -- -
--- --------
------------- -- -
------- - -----------
---
----------- - ------- -- -- -
-------------------------------------------------- ---------
---
----------- - ---- -- ------- -- -- -
--------------------------------------------------
---
----------- ---- -------- ---- --- ----- ---- -- -
----- -------- - ------- ------ ---------
--------------- ------------------------------
----------------------- -- -
--------------------------------------------------
-------
----------------------
---
---
---该测试使用 sinon 库来存根 API，以便控制我们希望 API 返回的数据。我们使用 resolves 函数为存根设置响应。
接下来，我们使用 vm.$nextTick 告诉测试套件我们已准备好测试异步函数结果。在 then 中，我们检查是否渲染了三个 li 元素并调用 done 函数。
结论
在本文中，我们了解了如何使用 Chai 来测试 Vue.js 应用程序，并分享了最佳实践。我们已经看到了如何测试应用程序中的同步和异步代码，并了解了单元测试的重要性。
在您的下一个 Vue.js 项目中，考虑使用单元测试，以便在开发过程中快速发现和解决缺陷。您可以在 GitHub 上找到本文的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671090f5377015f5a1a17751