四、Vue CLI 3 中的测试

在上一章中，我们研究了 Babel 在现代 JavaScript 开发中的作用。我们还看到了在 Vue 中使用它的一些实际示例。在本章中，我们将介绍 JS 中的测试。我们将大致熟悉测试，并使用 Jest 和 Cypress 在实践中看到它。我们将讨论断言和测试驱动开发（TDD）。然后，我们将继续了解 Jest 和 Cypress 如何与 Vue CLI 3 一起工作。我们将讨论测试用例和测试用例。具体来说，我们将了解以下内容：

  • 理解 Vue 插件
  • 将 Jest 插件添加到我们的 Vue 应用
  • 使用 Jest 在 Vue 应用中编写单元测试
  • 从“项目任务”页面运行任务
  • 在 Vue CLI UI 中运行单元测试
  • 使用断言
  • 实施 TDD
  • 与柏树合作

本章开始时，我们将简要概述 Vue 插件。

理解 Vue 插件

在从命令行借助 Vue CLI 创建新的 Vue 应用时，我们使用vue create命令。然后，我们需要选择一些步骤和提示，以便正确配置我们的应用。除其他外，我们实际上正在做的是选择哪些 Vue 插件将最终用于我们的应用。

插件是向我们的 Vue 项目添加功能的一种方式。一些插件比其他插件更复杂；它们有时会在安装过程中显示自己的提示。我们的 Vue 应用的配置（即底层代码）将反映我们的选择。我们的应用的设置方式将基于我们对这些安装提示的回答

一个项目的所有官方npm包的范围都是@符号，后跟项目名称。因此，由 Vue 维护人员构建的官方 Vue 插件以@vue开头

To find out more about scoped npm packages, visit: https://docs.npmjs.com/about-scopes.

要从命令行添加插件，我们使用vue add命令，但我们也可以使用 VUEUI，我们将在本章中看到。VUEUI 也是搜索 Vue 插件的一种很好的方法，我们在本章中也将对此进行研究。

开始在全新的 Vue 应用上进行测试

在前面的章节中，我们已经看到 Vue CLI 和 UI 中提供了许多不同的选项。本章开始时，我们将使用最佳方法启动一个新应用，即 Vue CLI UI。这将帮助我们了解 UI 的其他一些功能。在此过程中，我们还将慢慢地将测试引入到我们的项目中

使用 Vue CLI UI 添加新项目

现在，让我们添加一个带有 Vue CLI UI 的新项目：

  1. 首先，让我们打开 Git Bash 并导航到我们所有项目的根文件夹vue-cli-3-qsg。
  2. 现在，我们将按如下方式运行 Vue CLI UI 命令：
vue ui

这将导致在浏览器中提供新页面。默认地址为http://localhost:8000/dashboard。

  1. 接下来，单击主页图标（或只需在地址栏中键入此 URL:http://localhost:8000/project/select），即可进入 Vue 项目经理屏幕。

请注意，主图标是 Vue CLI UI 页脚中最左侧的图标：

Figure 4.1: The home icon in the Vue CLI UI

  1. 无论您如何访问 Vue Project Manager 屏幕，它都会显示可用应用的列表，顶部还有三个选项卡：项目、创建和导入。单击“创建”选项卡以创建新项目。
  2. 单击“创建”选项卡后，需要返回项目的根目录，然后单击“在此处创建新项目”按钮，如下所示：

Figure 4.2: Create, get to root of all projects, Create a new project here button

单击此处创建新项目按钮后，您将看到创建新项目屏幕。我们将只键入新应用的文件夹名称。我们称之为testing-debugging-vuecli3。我们不会更改任何其他内容：我们将接受默认的包管理器和其他默认选项，如下所示：

Figure 4.3: Adding the name for the folder that will hold our new app

我们已完成“详细信息”选项卡中的所有必要更改。

  1. 单击下一步按钮，我们将进入预设屏幕。在这里，我们可以只接受默认预设（babel、eslint），如下所示：

Figure 4.4: Accepting the default presets

  1. 下一步，我们将单击 CreateProject 来构建我们的项目。Vue CLI UI 完成项目搭建需要一些时间。一旦完成，我们将欢迎您的新项目！屏幕

将 Jest 插件添加到我们的 Vue 应用

现在，让我们添加 Jest 插件：

  1. 单击插件图标（在下面的屏幕截图中用数字 1 标记）。

  2. 出现项目插件屏幕后，单击添加插件按钮（以下屏幕截图中的 2）：

Figure 4.5: Adding a new plugin to our installation

  1. 这样做将带我们进入添加插件屏幕，在那里我们有一个输入字段来搜索插件。我们需要找到一个单元测试插件，所以我们可以键入cli-plugin-unit如下：

Figure 4.6: Finding unit testing plugins for Vue

  1. 键入此搜索词将显示所有可用的单元测试插件。笑话应该就在上面。您可以在上一个屏幕截图中看到它，标记为 2。在插件名称下的描述中，您可以看到它是一个官方插件。与我们已经看到的@vue/cli-plugin-babel类似，您可以单击“更多信息”链接查看相关插件对应的 GitHub 存储库（在前面的屏幕截图中标记为 3）。执行此操作将转到 vue cli GitHub 页面。

You can find out more about @vue/cli-plugin-unit-jest at the npm package page, at the following URL: https://www.npmjs.com/package/@vue/cli-plugin-unit-jest.

  1. 要安装 Jest 插件，只需在插件列表中单击它。这样做将在 Jest 插件旁边的绿色圆圈中添加一个复选框（在下面的屏幕截图中标记为 1）。还会出现一个新的安装按钮（以下屏幕截图中的框号 2）：

Figure 4.7: Adding the Jest plugin

  1. 单击 Install@vue/cli plugin unit jest 按钮将在页面上显示加载程序，并显示以下消息：Installing@vue/cli plugin unit jest。。。。

  2. 完成后，只需单击完成安装按钮，如下所示：

Figure 4.8: Finishing the installation of the Jest plugin

  1. 单击 Finish installation（完成安装）按钮将在屏幕上显示以下消息：Invoking@vue/cli plugin unit jest。。。。
  2. 此更新完成后，我们将看到另一个屏幕，如下所示，显示对文件的更改，并要求我们提交所做的更新：

Figure 4.9: Vue CLI UI showing changes after the installation of the Jest plugin

检查更新

在前面的屏幕截图中，我们可以看到“文件更改”选项卡处于活动状态。在“文件更改”选项卡中，我们可以看到更改的文件数（框 1）。

当我们使用 Vue CLI UI 构建项目时，我们获得了使用 Git 跟踪项目更改的默认选项，我们接受了此默认设置；这就是为什么我们现在看到 Commit changes 按钮（在前面的屏幕截图中标记为 2）。

我们还可以看到对现有两个文件package-lock.json和package.json所做的所有更改和更新，以及我们安装插件时添加的三个新文件的内容：jest.config.js、tests/unit/.eslintrc.js和tests/unit/example.spec.js

检查每个文件的内容，以便更熟悉这些文件的设置方式以及对其所做的更改，这将是有益的。我们需要注意的最重要的变化之一是在package.json文件中，在scripts键内，如下所示：

"test:unit": "vue-cli-service test:unit"

前一行显示我们的vue-cli-service刚刚得到一个新命令test:unit，专门为使用 Jest 进行单元测试而设置。

单击提交更改按钮后，我们将看到一个对话框，邀请我们输入提交消息。我们可以键入一条简单的消息，例如Add Jest plugin。

添加提交后，我们将返回到 Installed plugins 屏幕。现在我们可以看到@vue/cli-plugin-unit-jest也增加了：

Figure 4.10: Vue CLI UI showing changes after the installation of the Jest plugin

在下一节中，我们将添加我们的应用，以便我们可以开始用 Jest 测试它。

为我们的 Vue 应用添加代码

要添加我们的应用，我们需要执行以下操作：

  1. 在 Windows 资源管理器中导航到testing-debugging-vuecli3文件夹。
  2. 接下来，右键单击文件夹中的空白区域，然后单击 Git Bash here 命令。
  3. 一旦 Git Bash 打开，键入code .并按回车键。这将在 VS 代码中打开我们的testing-debugging-vuecli3项目。

我们现在的重点是笑话。为了避免不必要的麻烦，我们将简单地复制并粘贴上一章中的整个add-one-counter应用。最简单的方法是将 Windows 资源管理器指向add-one-counter应用，然后右键单击文件夹内的另一个 Git Bash 实例，如前所述。我们将再次在 Git Bash 中键入code .命令，并打开另一个 VS 代码实例，这次显示了add-one-counter应用中的文件。现在只需将add-one-counter到testing-debugging-vuecli3的所有文件和文件夹复制粘贴即可。

或者，您可以在 Git Bash 中使用 Linux 命令来复制相关文件

无论您如何操作，更新后的项目结构现在将如下所示：

Figure 4.11: The updated project structure of testing-debugging-vuecli3

现在，我们准备用 Jest 开始我们的第一个单元测试。

用 Jest 在 Vue 应用中编写我们的第一个单元测试

在tests文件夹中，还有一个名为unit的文件夹。让我们在unit文件夹中添加一个新文件。我们将此新文件命名为AnotherComponent.spec.js。

Any file that has a spec.js extension will be recognized by Jest.

为了描述一个测试，我们使用了describe函数，所以我们将其添加到AnotherComponent.spec.js中，如下所示：

describe()

describe函数有两个参数。第一个参数是我们正在测试的 Vue 组件的名称，第二个参数是一个匿名函数，如下所示：

describe('AnotherComponent.vue', function() {} )

我们可以使用箭头函数作为第二个参数重写前面的代码，如下所示：

describe('AnotherComponent.vue', () => {})

在匿名函数体中，我们调用另一个函数，test函数如下：

describe('AnotherComponent.vue', () => {
    test()
})

test函数接受两个参数：第一个参数是我们测试的名称，第二个参数是另一个匿名箭头函数，如下所示：

describe('AnotherComponent.vue', () => {
    test('Jest is setup correctly and working', () => {})
})

我们正在指定一个名为setup working的测试，我们需要在第二个参数（即匿名函数体）中为它提供一个断言，如下所示：

describe('AnotherComponent.vue', () => {
    test('Jest is setup correctly and working', () => {
        expect(true).toBeTrue();
    })
})

这个断言总是正确的，因此我们给它以下代码：expect(true).toBeTrue()。

We have just seen an example of a Jest matcher in action. A matcher is a way to test values in Jest. One way to check if something is true is to use the toBeTrue matcher. There are many other Jest matchers. For more information, check out the official Jest documentation at the following URL: https://jestjs.io/docs/en/using-matchers.

现在，让我们转到 Vue CLI UI，并运行单元测试。

在 Vue CLI UI 中运行我们的第一个单元测试

要在 Vue CLI UI 中运行单元测试，我们需要导航到localhost:8080/tests页面，方法是从地址栏右侧访问 URL，或单击主导航上最低的图标（Vue CLI UI 仪表板最左侧列中的测试图标）。完成后，我们将看到以下测试列表：

Figure 4.12: Viewing the available tasks inside Vue CLI UI

接下来，让我们点击test:unit任务，准备运行它。这样做将导致“项目任务”页面右侧出现一个面板，如下所示：

Figure 4.13: The run tasks panel for running the test:unit command

这个运行任务面板让我们对正在发生的一切都有一个很好的概述。现在让我们通过单击 RunTask 按钮来运行测试。

输出部分将显示以下信息：

...
... 
PASS tests/unit/AnotherComponent.spec.js

Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.702s
Ran all test suites.

Total task duration: 3.93s

我们可以看到，我们的AnotherComponent.spec.js测试成功通过。在AnotherComponent.spec.js测试之前失败并记录其输出的测试是针对HelloWorld.vue组件的测试。在 Vue UI 构建应用后，我们已从默认应用中删除此HelloWorld.vue文件。

但是，./tests/unit文件夹中的example.spec.js文件是调用不存在的HelloWorld.vue文件的test文件。查看example.spec.js，我们可以看到它在第 2 行导入了HelloWorld.vue组件，如下所示：

import HelloWorld from '@/components/HelloWorld.vue'

为什么会这样？我们不是已经在describe函数中指定了AnotherComponent.vue吗

事实证明，我们可以在单元测试中指定任何名称作为 descripe 函数的第一个参数。例如，我们可以将AnotherComponent.spec.js文件更新为以下代码：

describe('whatever', () => {
    test('Jest is setup correctly and working', () => {
        expect(true).toBeTrue();
    })
})

如果我们再次运行测试，它仍然会运行。

这意味着字符串AnotherComponent.vue是我们开发人员传递给describe函数的第一个参数，这样我们就更容易在项目中工作。Jest 不在乎它叫什么名字

然而，它真正关心的是导入要测试的文件。正如我们在HelloWorld.vue导入中看到的，我们需要在AnotherComponent.spec.js文件中添加一个类似的导入，因此现在看起来如下所示：

import AnotherComponent from '@/components/AnotherComponent.vue';

describe('AnotherComponent.vue', () => {
    test('Jest is setup correctly and working', () => {
        expect(true).toBeTrue();
    })
})

有趣的是，我们正在导入一个 Vue 文件，但是我们的测试仍然通过，即使.vue扩展名不是 JS。这是如何实现的？

如果打开位于项目根目录下的jest.config.js文件，我们可以很容易地看到发生了什么。查看此文件的前 12 行，我们可以看到以下代码：

module.exports = {
  moduleFileExtensions: [
    'js',
    'jsx',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },

我们可以看到，vue扩展名列在第 6 行，并且.vue文件扩展名将使用vue-jest插件进行转换，如第 9 行所述。

在继续之前，让我们将example.spec.js文件重命名为example.js，这样 Jest 就不会理解它了。我们仍然需要文件的内容，所以我们不要删除它，而只是重命名它。

从测试 utils 导入挂载并编写另一个单元测试

我们首先在AnotherComponent.spec.js文件的第一行中添加一个mount从@vue/test-utils导入，如下所示：

import { mount } from '@vue/test-utils';

在继续之前，我们需要看看这个语法的作用。为什么在mount周围用花括号括起来？

要回答这个问题，最好知道这是公认的 JS 语法。为了解释发生了什么，我们需要从package.json文件开始。

此文件是在我们构建项目时由 Vue CLI 创建的。如果我们查看package.json文件的内容，我们将看到@vue/test-utils列为我们项目的devDependencies之一。

在前面的代码中，我们正在从这个@vue/test-utilsJS 模块导入一个函数mount。通过这样做，我们将mount函数插入到AnotherComponent.spec.js文件的作用域中。

简单地说，我们正在从@vue/test-utils导入mount功能，以便我们可以在AnotherComponent.spec.js文件中使用它，并且只测试这个组件。

在浏览器中运行 Vue CLI UI 后，让我们通过访问以下 URL 来查看项目依赖项的列表：http://localhost:8000/dependencies。

您应该会看到类似于以下屏幕截图的屏幕：

Figure 4.14: Our project's devDependencies listed in the Vue CLI UI dashboard

与往常一样，单击@vue/test-utils项目依赖项的“更多信息”链接将带我们到项目的相应 GitHub 存储库：https://github.com/vuejs/vue-test-utils#readme.

安装待测部件

我们首先导入mount方法和要测试的组件，如下所示：

import { mount } from '@vue/test-utils';
import AnotherComponent from '@/components/AnotherComponent.vue';

mount函数接收一个组件作为其参数。调用mount函数的结果是一个包装器，其中包含我们提供给它的组件实例。这个包装器还附带了帮助我们测试过程的附加函数。我们先将调用mount(AnotherComponent)的返回值赋给一个变量，如下所示：

import { mount } from '@vue/test-utils';
import AnotherComponent from '@/components/AnotherComponent.vue';

describe('AnotherComponent.vue'), () => {
  test('Adds one when a user clicks the button', () => {
  const wrapped = mount(AnotherComponent);
}

写一个失败的断言

当我们的应用最初加载到浏览器时，我们希望计数器的当前值为0。但是，因为我们希望我们的断言最初失败，所以让我们断言计数器的值将是1而不是0，如下所示：

import { mount } from '@vue/test-utils';
import AnotherComponent from '@/components/AnotherComponent.vue';

describe('AnotherComponent.vue'), () => {
  test('Adds one when a user clicks the button', () => {
  const wrapped = mount(AnotherComponent);
  expect(wrapped.text()).toContain('Current value of the counter: 1');
}

我们在前面的代码中编写了一个失败的断言。我们声称，我们希望包装的组件将包含以下文本：

Current value of the counter: 1

我们计数器的初始值不是1；它实际上是0，因此前面的断言应该失败。

因此，让我们通过转到项目任务屏幕并按照本章前面所述运行测试来保存并运行单元测试。

输出将显示在项目任务内部运行任务的输出面板中，如下所示：

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.947s
Ran all test suites.

Total task duration: 3.14s

接下来，我们将通过编写一个通过的断言来修复前面的测试。

写一个转瞬即逝的断言

要编写一个传递断言，我们只需将1还原为0,，如下所示：

expect(wrapped.text()).toContain('Current value of the counter: 0');

接下来，让我们在 Vue UI 中再次运行任务，我们将返回以下输出：

Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 2.418s
Ran all test suites.

Total task duration: 3.55s

接下来，我们将在测试中触发一个按钮点击。

在我们的测试中触发按钮点击

我们如何在单元测试中测试按钮点击？执行以下步骤：

  1. 我们需要找到要单击的按钮。这很简单，因为我们的应用中只有一个按钮。我们将使用 find 方法来实现这一点。
  2. 我们将使用触发器方法触发对按钮的单击。
  3. 我们需要检查计数器的值是否从0更改为1。但是，由于我们首先需要编写一个失败的测试，我们将编写以下代码：
import { mount } from '@vue/test-utils';
import AnotherComponent from '@/components/AnotherComponent.vue';

describe('AnotherComponent.vue', () => {
  test('Adds one when a user clicks the button', () => {
    const wrapped = mount(AnotherComponent);
    expect(wrapped.text()).toContain('Current value of the counter: 0');
    const button = wrapped.find('button');
    button.trigger('click');
    expect(wrapped.text()).toContain('Current value of the counter: 0');
  })
})

正如预期的那样，在 Vue CLI UI 中运行测试的输出如下所示：

Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 total
Snapshots: 0 total
Time: 2.383s
Ran all test suites.

Total task duration: 3.55s

让我们通过编写两个测试来让事情变得更有趣，并通过如下方式断言它们：

import { mount } from '@vue/test-utils';
import AnotherComponent from '@/components/AnotherComponent.vue';

describe('AnotherComponent.vue', () => {
    const wrapped = mount(AnotherComponent);
    const button = wrapped.find('button');
    test('Checks that the initial counter value is 0', () => {
        expect(wrapped.text()).toContain('Current value of the counter: 0');
    });
    test('Adds one when a user clicks the button', () => {
        button.trigger('click');
        expect(wrapped.text()).toContain('Current value of the counter: 1');
    })
})

让我们再次保存测试，并再次在 Vue CLI UI 中将其作为任务运行。

以下是输出：

AnotherComponent.vue
    √ Checks that the initial counter value is 0 (3ms)
    √ Adds one when a user clicks the button (4ms)

Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 2.307s
Ran all test suites.

Total task duration: 3.64s

我们已经成功地在一个测试套件中为一个 Vue 组件编写了两个独立的单元测试，并且两个测试都通过了。

Vue CLI 3 中的测试驱动开发

TDD 是基于红绿重构循环的思想开发的。与我们在前面代码中看到的类似，我们首先编写代码以使测试失败。接下来，我们编写代码以通过测试，最后重构代码。

对于我们应用中的每个新功能，我们重复相同的过程。这本质上就是 TDD。

TDD 只是用任何语言或框架编写任何应用的一种简化方式。它通过允许我们将整个项目划分为可测试的、清晰分离的功能块，从而简化了我们的工作。

红绿重构方法在项目任务页面的输出中也清晰可见。如果我们写了一个失败的测试，我们会在单词 fail 上看到一个红色的背景。如果我们写了一个通过测试，我们会在工作通行证上看到一个绿色的背景。

在本章的其余部分中，我们将了解一些与借助 Vue CLI 3 进行测试相关的其他概念。

改进 Vue CLI 3 中的测试

我们可以通过多种方式利用 Vue CLI 3 中的 Jest 和其他测试平台来获得更好的测试体验。在接下来的部分中，我们将了解以下内容：

  • 在 Vue CLI 3 中查看我们的单元测试
  • 为我们的任务设置参数
  • 使用 Cypress 编写端到端测试

让我们从使用--watch标志开始。

在 Vue CLI 3 中查看我们的测试

test:unit命令带有--watch标志。要查看它的运行情况，我们只需返回 Vue UI 中的项目任务页面，选择test:unit任务后，单击参数按钮，如下所示：

Figure 4.15: The Parameters button inside the test:unit task

单击参数按钮将触发具有以下两个选项的对话框：

  • 监视文件的更改，并重新运行与更改的文件相关的测试
  • 重新记录此测试运行期间失败的每个快照

单击第一个选项以打开监视模式。以下选项将显示在其正下方：

  • 每次运行后显示通知

此选项仅在启用监视模式时可用。让我们也启用每次运行后显示通知选项，然后单击保存。

您可以在package.json中的脚本中设置这些选项。第一个选项是--watch，显示通知选项是--notify标志。

为此，只需将项目package.json中的脚本键更新为以下代码：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit",
  "test:unit-watch": "vue-cli-service test:unit --watch --notify"
},

您将看到您的任务列表现在已经扩展到包含另一个测试任务：test:unit-watch。

然而，即使你可以，最好不要这样做。这不是一个最佳实践，它有点违背了使用 Vue UI 的初衷。不过，了解这是如何做到的，我们就可以更好地了解 Vue CLI UI 背后发生的事情

现在，让我们通过向AnotherComponent.spec.js文件添加一个更改来查看 watch 模式是否正常工作。只需在某处添加一个空间并保存更新就足够了。

使用 Cypress 编写端到端测试

端到端测试是一种测试实践，在这种实践中，我们从头到尾测试应用流。通过端到端测试，我们模拟了一个场景，在这个场景中，用户通过我们的应用从某种入口点流向某种结果

例如，web 应用的端到端测试可能包括以下流程：

  • 用户在浏览器中打开 web 应用的 URL
  • 用户单击登录链接并登录
  • 在 web 应用中检查通知的用户
  • 用户注销

柏树引种

在本节中，我们将使用 Cypress 进行端到端测试。Cypress 与 Chrome 浏览器配合使用非常好。或者，如果您想使用基于 Selenium 的工具，可以在以下网站上查看 Nightwatch.js:http://nightwatchjs.org/.

欲了解更多有关 Cypress 的信息，请访问官方网站，网址如下：https://www.cypress.io/ 。

如果您访问 Cypress 网站，您将看到以下描述：

Fast, easy, and reliable testing for anything that runs in a browser.

让我们一头扎进去。

将 Cypress 插件添加到我们的项目中

现在，让我们在运行 Vue CLI UI 的情况下向项目中添加一个 Cypress 插件：

  1. 在浏览器中打开以下地址： http://localhost:8000/plugins/add
  2. 接下来，在搜索字段中键入cypress，并找到@vue/cli-plugin-e2e-cypress插件。
  3. 就像我们之前使用 Jest 插件一样，完成插件安装步骤。
  4. 添加 Cypress 插件后，我们需要提交更改。类似于我们在 Jest 中所做的，我们可以通过一条简单的消息来提交，比如Add Cypress plugin。

请注意，安装 Cypress 在我们的tests文件夹中添加了一个名为e2e的新文件夹。在e2e文件夹中，我们可以找到以下子文件夹：plugins、specs和support

接下来让我们检查一下package.json文件的内容。

验证 Cypress 插件安装对 package.json 的更新

让我们检查一下我们项目的package.json内部 VS 代码。我们会注意到scripts选项中有一个新条目，如下所示：

"test:e2e": "vue-cli-service test:e2e",

此外，我们的devDependencies已经使用 Cypress 插件进行了更新，我们也可以通过访问我们的 Vue UI 仪表板和检查已安装的插件来查看该插件。

最后，如果我们点击任务图标，我们将看到test:e2e任务已添加到项目任务列表的底部，与我们在package.json文件中看到的完全相同

如果我们点击test:e2e任务，右侧窗格将相应更新，运行任务按钮将随时被点击。单击“运行任务”按钮将产生以下输出：

$ vue-cli-service test:e2e --mode development
 INFO Starting e2e tests...
 INFO Starting development server...

 DONE Compiled successfully in 1691ms18:06:27

  App running at:
  - Local: http://localhost:8082/
  - Network: http://192.168.1.70:8082/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

It looks like this is your first time using Cypress: 3.2.0

[18:06:28] Verifying Cypress can run C:\Users\W\AppData\Local\Cypress\Cache\3.2.0\Cypress [started]

[18:06:30] Verified Cypress! C:\Users\W\AppData\Local\Cypress\Cache\3.2.0\Cypress [title changed]

[18:06:30] Verified Cypress! C:\Users\WAppData\Local\Cypress\Cache\3.2.0\Cypress [completed]

Opening Cypress...

一个新的电子窗口将在我们的计算机上打开。与 Cypress 合作很容易。作为帮助您开始的第一步。。。窗口告诉我们，您可以在examples文件夹中运行测试，或者将您自己的测试文件添加到cypress/integration。

如果查看 Cypress 窗口的右上角，您将看到 RunAll specs 按钮。默认情况下，它将在 Chrome 中运行（指定版本号）。如果你点击选择了 Chrome 的下拉列表，你可以切换到 Electron。无论您选择什么选项，您的测试都将在新窗口中运行，无论是新的 Chrome 窗口还是新的 Electron 窗口。

此时，我们的端到端 Cypress 测试将失败，因为 Cypress 正试图在默认的 Vue 脚手架项目上运行测试，如下所示：

Figure 4.16: A failing test in Cypress

如果您想从一开始就看到这些测试通过，您需要创建一个全新的项目，并在配置中设置 Cypresse2e测试。我们将在本书后面介绍这些不同的选项。现在，让我们更新我们的测试，让它们通过。

在我们的 Vue 应用中更新 Cypress 测试

回到 VS 代码中，打开./tests/e2e/specs/文件夹中的test.js文件。您将看到一个带有两个参数的describe函数

To understand Cypress terminology better, refer to the following URLs:  https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Support-file, and  https://docs.cypress.io/guides/references/bundled-tools.html#Mocha.

在开玩笑时，我们将单词test视为单个单元测试函数的名称，而在 Cypress 中，我们看到使用了单词it。cy对象是实际的 Cypress 测试跑步者。让我们看一下test.js文件的以下更新代码，并解释其工作方式和原因：

describe('My First Test', () => {
  it('Visits the app root url', () => {
    cy.visit('/')
    cy.contains('article', 'Our own custom article component!')
  })
})

这次我们的考试通过了。请注意，我们只需将更新的测试文件保存在 VS 代码中，即可自动运行测试。您可以导航到http://localhost:8000/tasks/并点击test:e2e任务，了解正在运行的任务的更多信息，如下所示：

Figure 4.17: A screenshot of a passing Cypress test for our Vue app's homepage

另外请注意，如果您将鼠标悬停在测试结果中的“包含”部分上，则所提供的 Vue 应用的相应部分将突出显示，这是一个极好的视觉提示，显示正在测试的 Vue 应用的确切部分。

总结

在本章中，我们通过 Vue CLI 3 的视角讨论了许多与测试相关的主题。TDD 是一种伟大的技术，团队和个人都应该使用它，Vue CLI 3、其 UI 和 Jest 非常适合于简化此过程。与使用 Vue CLI 3 开发的其他方面一样，许多管道都隐藏在我们之外，这有助于获得出色的编码体验

在下一章中，我们将介绍 Vue CLI 3 中的路由。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/13401.html