vitest 应用与配置
一、简介
Vitest 旨在将自己定位为 Vite 项目的首选测试框架，即使对于不使用 Vite 的项目也是一个可靠的替代方案。它本身也兼容一些Jest的API用法。
二、安装vitest
// npm
npm install -D vitest
// yarn
yarn add -D vitest
// pnpm
pnpm add -D vitest
注意：vitest的版本应与你的项目依赖兼容，建议使用最新版本以获得最佳性能和功能。
三、配置vitest
Vitest的配置可以通过多种方式实现，包括在package.json中直接配置，或者创建一个专门的配置文件（如vitest.config.ts或vitest.config.js）。
1、在package.json中配置
在package.json的scripts部分添加一个测试脚本：
"scripts":{
"test":"vitest"
}
这样就可以通过npm run test 或pnpm test来执行测试了
2、创建配置文件
对于更复杂的配置，你可以创建一个vitest.config.ts或vitest.config.js文件。例如：
/// <reference types="vitest">
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import * as path from "path";
// https://vitejs.dev/config/
export default defineConfig({
// 单元测试
test: {
globals: true, //全局注册
environment: 'jsdom', // 模拟浏览器环境
},
resolve: {
//设置别名
alias: {
"@": path.resolve(__dirname, "src"),
},
},
plugins: [vue()],
});
四、编写测试
在你的Vue项目中，你可以为组件、函数、工具等编写测试。Vitest支持多种测试文件命名方式，但通常建议使用.test.ts或.spec.ts作为测试文件的扩展名。
例如，如果你有一个名为utils.js的文件，你可以创建一个utils.test.ts文件来编写它的测试。
1、函数测试
import { sum } from "../utils/index";
describe('sum', () => {
test('should return 0 when num is 0', () => {
expect(sum(1, 1)).toEqual(2);
});
it('should return 1 when num is 1', () => {
expect(sum(1, 4)).toEqual(5);
});
it('should return 1 when num is 2', () => {
expect(sum(3, 3)).toBe(6);
});
});
最后，运行 npm run test、yarn test 或 pnpm test，具体取决于你的包管理器，Vitest 将打印此消息：
2、组件测试
测试文件
import { describe, it, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Button from './Button.vue';
describe('Button.vue', () => {
it('renders props.label when passed', () => {
const wrapper = mount(Button, {
props: {
label: 'Click me',
},
});
expect(wrapper.text()).toContain('Click me');
});
it('emits a click event when clicked', () => {
const wrapper = mount(Button, {
props: {
label: '测试 Button',
},
attachToDocument: true,
});
wrapper.trigger('click');
// 验证是否发射了 click 事件
expect(wrapper.emitted().click).toBeTruthy();
});
});
最后，运行 npm run test、yarn test 或 pnpm test，具体取决于你的包管理器，Vitest 将打印此消息：
错误示例：
报错提醒！！！
原因：vitest是运行在Node.js环境的，没有document对象，因此需要借助jsdom来实现。
jsdom 是一个在 Node.js 环境中使用的纯 JavaScript 实现的 DOM（文档对象模型），它模拟了足够多的浏览器环境，使得你能够在服务器端（如 Node.js 应用程序）中运行那些原本只能在浏览器中运行的脚本。
// npm
npm install -D jsdom
// yarn
yarn add -D jsdom
// pnpm
pnpm add -D jsdom
五、其他配置
Vitest还提供了许多其他配置选项，如支持TypeScript、模拟DOM环境、生成测试覆盖率报告等。你可以根据项目的具体需求来配置这些选项。
注意事项
- 确保你的项目依赖（如Vue、Vite等）与Vitest的版本兼容。
- 在编写测试时，尽量保持测试代码的简洁性和可维护性。
- 利用Vitest提供的丰富API和插件来增强你的测试体验。
开发者
