Vitest 1.0 正式发布：Vue 团队打造的下一代测试框架！

12 月 5 日，由 Vue 团队打造的下一代测试框架 Vitest 正式推出 1.0 版本！

Vitest 于 2021 年 12 月推出，至今已经过去了两年的时间，其发展速度可谓是非常迅速，目前在 npm 下载量已经达到了每周 250w，并且还在呈现快速增长的趋势，Github Star 数量达到了 10.7k。

Vitest 是什么？

Vitest 是一个原生支持 Vite 的测试框架。Vitest 以其快速、简洁的测试解决方案脱颖而出，需要最少的配置。Vitest 与广泛采用的JavaScript测试框架 Jest 完美契合，并能无缝集成到 Vue 应用中。虽然它专为与 Vite 一起使用而设计，但Vitest也可以独立运行，在应用中提供了灵活性。由于 Vitest 和 Vite 使用相同的配置文件，因此将 Vitest 集成到 Vue 应用中很简单。

Vitest 的主要功能如下：

• 与 Vite 通用的配置、转换器、解析器和插件。
• 使用与你的应用程序相同的设置来运行测试！
• 智能文件监听模式，就像是测试的 HMR！
• 支持对 Vue、React、Svelte、Lit 等框架进行组件测试。
• 开箱即用的 TypeScript / JSX 支持
• ESM 优先，支持模块顶级 await
• 通过 Tinypool 使用 Worker 线程尽可能多地并发运行
• 使用 Tinybench 来支持基准测试
• 套件和测试的过滤、超时、并发配置
• 支持 Workspace
• Jest 的快照功能
• 内置 Chai 进行断言 + 与 Jest expect 语法兼容的 API
• 内置用于对象模拟(Mock)的 Tinyspy
• 使用 jsdom 或 happy-dom 用于 DOM 模拟
• 通过 v8 或 istanbul 来输出代码测试覆盖率
• 类似于 Rust 语言的源码内联测试
• 通过 expect-type 进行类型测试

Vitest 1.0 更新内容

重大变更

• 添加对pool和poolOptions的支持，移除旧标志
• 支持多个并行child_process
• 使快照更加美观
• 为子包设置vitest对等依赖范围
• 将最低 node 版本提升至 18，并匹配 Vite 5 的要求
• 移除已弃用的 node 加载器
• 将浏览器提供程序移到 @vitest/browser 包中
• 移除EnhancedSpy类型，弃用SpyInstance，改进模拟和 vi 文档
• runner: 正确处理自定义任务，更新 runner hooks 命名
• coverage:

• 基于 glob 的覆盖率阈值
• 使用transformMode和基于工作区项目的源映射
• 默认启用 coverage.all

新功能

• 添加 Marko 示例，并包括 Marko 文件的代码覆盖率
• 更新magic-string
• 实现provide/inject API 以传输来自主线程的数据
• 改进expectTypeOf错误消息
• 添加test.sequential() api
• 允许自定义池
• 添加 --project 选项以限制正在运行的项目
• benchmark：将importTinybench移动到runner中
• browser：支持 "none" 提供程序，并更新lit示例以使用它
• coverage：支持 /* v8 ignore... 忽略提示
• expect：

• 支持 expect.closeTo api
• ToContain可以处理classList和Node.contains
• 通过href比较 URL 对象

• snapshot：添加配置快照目录的选项
• vite-node：支持 Vite 5 的import.meta.hot.off
• vitest:
• 暴露getBenchFn、getBenchOptions
• 在测试期间运行类型检查
• 过滤堆栈跟踪
• 将execArgv暴露给不同的池

Vitest 尝鲜

准备工作

要想在 Vue 项目中运行自动化组件测试，首先要使用以下命令初始化一个 Vue 应用：

npm create vite@latest vue-app --template vue
cd vue-app
npm install

项目安装完成后，运行以下命令启动应用：

npm run dev

在浏览器中打开 http://127.0.0.1:5173/，即可看到应用程序成功运行。

接下来，使用以下命令来安装 Vitest：

npm install -D vitest

安装完成后，我们需要将 Vitest 添加到 package.json 文件中。在 package.json 文件中添加测试脚本：

"scripts": {
  // ...
   "test": "vitest",
 },

接下来，打开 vitest.config.js 文件并添加以下代码：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 test:{
   globals:true,
 }
})

将 globals 属性设置为 true 将允许在测试文件中访问 Vitest API，而无需导入它们。

Test Utils 是一个 Vue 测试库，提供了安装 Vue 组件并与之交互的方法。使用以下命令安装测试实用程序：

npm install --save-dev @vue/test-utils

我们应该能够在组件测试中模拟 DOM API。Vitest 目前支持happy-dom和jsdom。这里我们将使用 happy-dom。运行下面的命令来安装happy-dom：

npm install happy-dom@6.0.4

安装完成后，在 package.json 文件中的测试脚本中添加--dom：

"scripts": {
   // …
   "test": "vitest --dom", 
 },

另外，我们需要将 happy-dom 添加到 vite.config.js 文件中，以使其在测试文件中全局可用：

test:{
   // …
   environment: 'happy-dom',
 }

创建 Vue 组件

接下来，创建一个名为 GuessAge.vue 的简单组件，该组件使用户能够输入自己的姓名，并使用 Agify.io API 根据输入的姓名猜测用户的年龄。

在 src/components 文件夹中，创建一个 GuessAge.vue 文件并添加以下代码：

<template>
  <h1>{{ title }}</h1>
  <div class="card">
   <div style="width:400px;height:130px;margin-top:20px;border-style: dotted;" >
   <br>
    <span>名字: {{firstname}}</span> <br>
    <span>年龄: {{age}}</span> <br>

    </div><br><br>
     <label> 输入名字 </label><br>
     <input type="text" v-model="search" style="font-size:20px;border-radius:10px;" placeholder=" Name ..."> <br> <br>
    <button type="button" @click="getAge">猜年龄</button>
    <br> <br> <br>
    <input type="radio" value="pop"> <label>保存</label>
  </div>
</template>
<script setup>
import { ref } from 'vue'
defineProps({
  title: String
})
</script>
<script>
export default {
    data() {
        return {
            search:"",
            firstname:"",
            age:"",
        }
    },
    computed: {
       getAge() {
        fetch('https://api.agify.io/?name='+ this.search)
        .then(response => response.json())
        .then(data => {
            this.age = data.age
            this.firstname = data.name
            this.search=""
        })
        }
    }
}
</script>

测试 Vue 组件的 props 和函数

现在，我们需要为组件创建一个测试文件。根据命名约定，测试文件名必须以组件名称开头，以 .spec.js 或 .test.js 结尾。当测试多个组件时，每个组件都应该有一个测试文件。

在 Components 文件夹中创建一个名为 GuessAge.spec.js 的测试文件。该文件将包含 GuessAge 组件的简单测试脚本。让我们测试 GuessAge 组件，看看它在安装时是否接收到正确的 props。可以通过将以下代码添加到 GuessAge.spec.js 文件来测试挂载时 title 属性的值：

import {mount} from "@vue/test-utils";
import GuessAge from "../components/GuessAge.vue";
// import { expect, test } from "vitest";
const wrapper = mount(GuessAge);

it("testing GuessAge component props", async () => {
  expect(GuessAge.props.title).toContain("Guess User Age App");
});

从 @vue/test-utils 导入 mount，允许将组件包装到一个名为 Wrapper 的特殊对象中，它提供了各种测试选项。

注意：如果在 Vite 的配置文件中将globals的值设置为false，那么在测试文件中就应该添加 import { expect, test } from "vitest"。

运行以下命令以在监听模式下测试组件：

npm run test

我们还可以使用 toBe('function') 断言方法来检查应用中是否存在函数，如下所示：

it("Test if data is a function", () => {
  expect(typeof GuessAge.data).toBe("function");
});

可以在终端中看到以下内容：

使用快照测试用例

快照用于跟踪用户界面的变化。典型的快照测试用例会渲染一个UI组件，获取一个快照，并将其与测试文件旁边的参考快照文件进行比较。它将当前的UI状态与已建立的快照进行比较。如果当前状态与已建立状态不匹配，测试将失败。

要运行快照测试并跟踪UI的变化，需要在GuessAge.spec.js测试文件中添加以下代码：

test('snapshot UI testing', () => {
   const wrapper = mount(GuessAge,{});
   expect(wrapper.text()).toMatchSnapshot()
})

由于Vitest支持热模块重载，每次修改测试文件时都不必运行测试命令。可以在终端中看到以下内容：

模拟 HTTP 请求

在使用HTTP请求测试Vue组件时，我们首先需要模拟网络请求；否则，测试将失败。使用 Mock Service Worker (MSW) 进行模拟可以轻松地通过拦截测试中的请求来测试 HTTP 请求，而不需要更改任何应用程序代码。

使用以下命令来安装 MSW：

npm install msw --save-dev

我们需要在 GuessAge.spec.js 测试文件中导入以下两个依赖项才能使用 MSW：

import { setupServer } from 'msw/node'
import { rest } from 'msw'

通过在GuessAge.spec.js测试文件中添加以下代码来创建拦截HTTP请求的模拟服务器实例：

export const restHandlers = [
   rest.get('https://api.agify.io/', (req, res, ctx) => {
      return res(ctx.status(200), ctx.json([
         {
            age: 55,
            name: "tope"
         }
      ]))
   }),
]
const server = setupServer(...restHandlers)
// 在所有测试之前启动服务
beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
// 在所有测试之后关闭服务
afterAll(() => server.close())
// 在每个测试后重置处理程序，对于测试隔离很重要
afterEach(() => server.resetHandlers())

测试点击事件

接下来检查应用中是否存在按钮，以及单击“猜年龄”按钮是否会在获取用户年龄后清除输入标签

test("有按钮", () => {
  expect(wrapper.find("button").exists()).toBe(true);
});

test("Button clicked", async () => {
   const ac = await wrapper.get("button").trigger("click")
   expect(wrapper.vm.search).toEqual("")
})

可以在终端中看到以下内容：

覆盖率测试

为了评估代码的效果和质量，Vitest支持通过c8和Istanbul实现本地代码覆盖率，从而对代码性能进行报告和分析。

为了配置和运行覆盖率测试，我们需要在vite.configure.js文件中添加以下内容：

export default defineConfig({
  plugins: [vue()],
  test:{
    globals:true,
    coverage: {
      provider: 'istanbul'
    },
    environment: 'happy-dom',
  }
})

此外，我们还需要在package.json文件中的脚本部分添加coverage，如下所示：

"scripts": {
  // ...
   "coverage": "vitest run --coverage"
 },

配置完成之后 ，接下来就使用以下命令安装 Istanbul：

npm i -D @vitest/coverage-istanbul

当执行以下命令时，测试文件将会运行，Vitest 将在终端上显示覆盖率报告：

npm run coverage

测试时间

在运行测试时，确保测试在合理的时间内完成非常重要。有时，一个测试可能需要太长时间才能完成，这可能会导致问题并延迟测试套件的运行。为了解决这个问题，Vitest提供了一个test-timeout选项，允许为测试设置超时时间。该选项指定了测试在超过最大时间限制之前可以完成的最长时间，否则将失败并显示超时错误。

可以使用以下命令为所有测试设置超时时间并替换默认时间：

npx vitest run --test-timeout=50000

该命令会将 Vitest 测试框架中测试的超时值设置为 50 秒，可以根据测试要求将此值替换为不同的时间值。

从 Jest 迁移到 Vitest

将应用的测试从 Jest 迁移到 itest 非常简单。两个测试框架使用类似的API，因此在迁移到 Vitest 时，可能不需要对现有的代码进行重大更改。下面就来看看如何从 Jest 迁移到 Vitest。

首先，我们需要从项目中删除 Jest，并通过运行以下命令安装 Vitest 以及所有必要的依赖项：

npm uninstall jest --save-dev
npm install vitest --save-dev
npm install --save-dev @vue/test-utils

接下来，我们需要在package.json文件中更新测试脚本，以使用Vitest而不是Jest。可以通过将测试脚本更改为Vitest来实现：

"scripts": {
  "test": "vitest",
}

现在，运行以下命令来测试应用：

npm run test

如果在 Jest 测试代码中使用了模块模拟，需要将其更新为以下 Vitest 测试代码：

// Jest
jest.mock('./module-path', () => 'hello')

// Vitest
vi.mock('./module-path', () => ({
  default: 'hello'
}))