12 月 5 日，由 Vue 团队打造的下一代测试框架 Vitest 正式推出 1.0 版本！
Vitest 于 2021 年 12 月推出，至今已经过去了两年的时间，其发展速度可谓是非常迅速，目前在 npm 下载量已经达到了每周 250w，并且还在呈现快速增长的趋势，Github Star 数量达到了 10.7k。
Vitest 是一个原生支持 Vite 的测试框架。Vitest 以其快速、简洁的测试解决方案脱颖而出，需要最少的配置。Vitest 与广泛采用的JavaScript测试框架 Jest 完美契合，并能无缝集成到 Vue 应用中。虽然它专为与 Vite 一起使用而设计，但Vitest也可以独立运行，在应用中提供了灵活性。由于 Vitest 和 Vite 使用相同的配置文件，因此将 Vitest 集成到 Vue 应用中很简单。
Vitest 的主要功能如下：
要想在 Vue 项目中运行自动化组件测试，首先要使用以下命令初始化一个 Vue 应用：
npm create vite@latest vue-app --template vuecd vue-appnpm 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', }接下来，创建一个名为 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>现在，我们需要为组件创建一个测试文件。根据命名约定，测试文件名必须以组件名称开头，以 .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请求测试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 迁移到 itest 非常简单。两个测试框架使用类似的API，因此在迁移到 Vitest 时，可能不需要对现有的代码进行重大更改。下面就来看看如何从 Jest 迁移到 Vitest。
首先，我们需要从项目中删除 Jest，并通过运行以下命令安装 Vitest 以及所有必要的依赖项：
npm uninstall jest --save-devnpm install vitest --save-devnpm install --save-dev @vue/test-utils接下来，我们需要在package.json文件中更新测试脚本，以使用Vitest而不是Jest。可以通过将测试脚本更改为Vitest来实现：
"scripts": { "test": "vitest",}现在，运行以下命令来测试应用：
npm run test如果在 Jest 测试代码中使用了模块模拟，需要将其更新为以下 Vitest 测试代码：
// Jestjest.mock('./module-path', () => 'hello')// Vitestvi.mock('./module-path', () => ({ default: 'hello'}))本文链接：http://www.28at.com/showinfo-26-38497-0.htmlVitest 1.0 正式发布：Vue 团队打造的下一代测试框架！
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： Electron 28.0.0 正式发布，跨平台桌面应用开发工具！
下一篇： CSS_Flex 那些鲜为人知的内幕
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
