前端测试，一个可能让很多同学陌生的一个方向，前端测试？那不就是f12一下，简单调调就完了嘛？有什么难的？

前端测试其实远远不止f12，当然,f12中也有很多很多的知识和细节，但是前端测试往往和前端开发的同学一样，也是要写很多代码的。今天我们来一起学习一下前端测试方面的一门技术---vitest

vitste的主要功能

• 与 Vite 通用的配置、转换器、解析器和插件。
• 支持测试 Vue、React、Lit 等框架中的组件。
• 开箱即用的 TypeScript / JSX 支持
• ESM 优先，支持模块顶级 await
• 通过 tinypool 使用 Worker 线程尽可能多地并发运行
• 使用 Tinybench 来支持基准测试
• 通过 c8 来输出代码测试覆盖率
• 使用 jsdom 或 happy-dom 用于 DOM 模拟
• 可以完美使用Jest的功能

配置vitest

npm 中安装vitest

npm install -D vitest

yarn 中安装vitest

yarn add -D vitest

pnpm中安装vitest

pnpm add -D vitest

配置上，vitest的一个很大的优势就是他和vite配置的统一性。

我们只需要在vite.config.ts中添加如下内容即可:

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

export default defineConfig({
    plugins: [vue()],
    //add test to vite config
    test: {
        // ...
    },
});

第一个demo

我们随便写一个组件，然后建立一个switch.test.js文件，测试一下看看

import { expect, test } from "vitest";
import Switch from "../src/switch.vue";
import { mount } from "@vue/test-utils";

test("switch Test", () => {
  console.log(Switch);
  // const wrapper = mount(Switch);
  // console.log(expect(wrapper.text()));
});

执行一下测试文件:

效果如下：