开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 20 天，点击查看活动详情

引言

前端测试，一个可能让很多同学陌生的一个方向，前端测试？那不就是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()));
});

执行一下测试文件:

![)DTOA`Q3~1]GCAHLP]X_L1W.png](p3-juejin.byteimg.com/tos-cn-i-k3…?)

效果如下：

8JNWRU%JW~_Z8G6J@0N``EP.png

入门前端测试（初识vitest）

引言

vitste的主要功能

配置vitest

第一个demo