向 Vite 添加测试

Vite是由Evan You创建的全新开发服务器。它与框架无关，并且由于使用原生ES 模块而非打包方式，速度极快。Vite 提供了一个 Vue 应用程序的入门模板。该模板包含用于开发和生产部署的工具；只缺少一项：测试。本教程将向您展示如何为新生成的 Vue 3 Vite 项目添加单元测试和端到端测试。

项目设置

让我们从头开始创建一个 Vite 项目。

npm init @vitejs/app my-vite-app --template vue-ts

上述命令my-vite-app会在文件夹中创建一个 Vue 3 Typescript 应用程序。文件夹结构如下。

HelloWorld文件中有一个组件src/components/HelloWorld.vue，用于在页面上显示“Hello Vue 3 + TypeScript + Vite”的标题。该组件接收名为 的输入框作为prop标题文本msg。我们将针对此组件编写一个测试，看看它是否显示与我们输入的内容相同的消息。

单元测试

正如标题所述，Vite 模板不包含任何测试运行器；我们必须选择一个。如果我们想要一个简单快速的设置， Jest测试运行器是一个不错的选择，因为它提供了我们所需的一切：一个执行测试的测试运行器、一个可以断言结果的断言库，以及一个可以挂载 Vue 组件的 DOM 实现。

这是我们放置在组件文件旁边的第一个单元测试HelloWorld.vue。

// src/components/HelloWorld.spec.ts
import { mount } from '@vue/test-utils'
import HelloWorld from './HelloWorld.vue'

describe('HelloWorld', () => {
  it('should display header text', () => {
    const msg = 'Hello Vue 3'
    const wrapper = mount(HelloWorld, { props: { msg } })

    expect(wrapper.find('h1').text()).toEqual(msg)
  })
})

该测试使用了Vue Test Utils库，这是官方的单元测试辅助库。借助它，我们可以将单个组件挂载到 DOM 并填充输入参数，例如它的props。

我们将文本“Hello Vue 3”输入到组件，并通过组件包装器对象检查结果。如果标题元素的文本与输入相同，则测试通过。但是，我们该如何运行这个测试呢？

我提到过 Jest 和 Vue Test Utils，但我们还没有安装任何包。

npm install jest @types/jest ts-jest vue-jest@next @vue/test-utils@next --save-dev

默认情况下，Jest 无法识别 Vue 和 Typescript 文件，因此我们需要事先对它们进行转译，并将转译步骤作为配置传递（jest.config.js）。我们需要next多个软件包的版本，因为它们是唯一支持 Vue 3 的软件包。

// jest.config.js
module.exports = {
  moduleFileExtensions: [
    'js',
    'ts',
    'json',
    'vue'
  ],
  transform: {
    '^.+\\.ts$': 'ts-jest',
    '^.+\\.vue$': 'vue-jest'
  }
}

我们距离运行并看到测试通过还有两步之遥。首先，我们必须将 Jest 的类型定义添加到配置中。

// tsconfig.json
{
  "compilerOptions": {
    ...
    "types": ["vite/client", "@types/jest"],
    ...
  },
  ...
}

最后，将脚本添加到package.json，之后我们就可以使用运行测试了npm test。

// package.json
{
  ...
  "scripts": {
    ...
    "test": "jest src"
  },
  ...
}

这是我们第一次单元测试的结果，漂亮的绿色，并且通过了。

E2E测试

虽然单元测试适合检查较小的代码段，但端到端测试更适合在浏览器中检查整个应用程序。Vue CLI 内置了对Cypress（一个端到端测试运行器）的支持。我们也将使用 Cypress 来实现这一目的。

// e2e/main.spec.ts
describe('Main', () => {
  it('should display header text', () => {
    cy.visit('/')
    cy.contains('h1', 'Hello Vue 3 + TypeScript + Vite')
  })
})

cyCypress 提供了一个可以与浏览器交互的全局对象。它可以访问某些页面（ visit）并检查由选择器定义的元素的内容（contains）。在上面的测试中，我们导航到主页面并检查标题文本是否正确。

现在是时候安装运行测试所需的软件包了。

npm install cypress start-server-and-test --save-dev

除了 Cypress，我们还安装了一个名为start-server-and-test的实用程序库。这个实用程序库可以启动开发服务器，等待它响应给定的 URL，然后运行 ​​Cypress 测试。最后，它会在清理阶段停止所有正在运行的进程。

Cypress 不知道测试文件的位置和应用程序的基本 URL，我们必须通过配置文件来告诉它。

// cypress.json
{
  "baseUrl": "http://localhost:3000",
  "integrationFolder": "e2e",
  "pluginsFile": false,
  "supportFile": false,
  "video": false
}

在我们的 Typescript 配置中手动声明types需要再次手动工作：将 Cypress 类型添加到列表中。

// tsconfig.json
{
  "compilerOptions": {
    ...
    "types": ["vite/client", "@types/jest", "cypress"],
    ...
  },
  ...
}

剩下一步就是创建脚本命令来package.json运行测试。我们使用start-server-and-test带有三个命令行参数的包：

• dev：运行开发服务器的 npm 脚本名称
• http-get://localhost:3000：开发服务器可用的 URL
• cypress：运行端到端测试的 npm 脚本名称

// package.json
{
  ...
  "scripts": {
    ...
    "test:e2e": "start-server-and-test dev http-get://localhost:3000 cypress",
    "cypress": "cypress run"
  },
  ...
}

如果我们运行上述脚本，我们将获得通过闪亮的绿色端到端测试结果。

概括

Vite 是一款优秀的开发服务器，但它的模板缺乏测试方案。我们必须手动添加。Jest 和 Cypress 提供了一些简单的方案来弥补这一缺陷。我们也可以将它们替换为类似的库，例如 Mocha、Jasmine 和 Puppeteer。希望读完这篇文章后，Vite 缺乏开箱即用的测试方案不会阻碍大家使用它。

如果您不想手动设置所有内容，您可以使用我的Vue 3 Playground作为启动器。

封面照片由Liam Shaw拍摄