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 应用中很简单。
与 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/injectAPI 以传输来自主线程的数据改进
expectTypeOf错误消息添加
test.sequential()api允许自定义池
添加
--project选项以限制正在运行的项目benchmark：将importTinybench移动到runner中browser：支持"none"提供程序，并更新lit示例以使用它coverage：支持/* v8 ignore...忽略提示expect：支持
expect.closeToapiToContain可以处理classList和Node.contains通过
href比较 URL 对象snapshot：添加配置快照目录的选项vite-node：支持 Vite 5 的import.meta.hot.offvitest:暴露
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
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'
}))