什么是Vitest？自从 尤大 的构建工具Vite获得了巨大的人气，现在有了一个由它驱动的极快的单元测试框架 。Vitest 。
Vitest 与 Jest 兼容，具有开箱即用的 ESM、Typescript 和 JSX 支持，并且由 esbuild 提供支持 。它在测试过程中使用 Vite 开发服务器来转换你的文件，并监听你的应用程序的相同配置（通过vite.config.js），从而消除了使用Jest等测试替代品所涉及的重复工作 。
为什么选择Vitest？Vite是一个构建工具，旨在为现代 web 项目提供更快、更精简的开发体验，它开箱即用，支持常见的 web 模式、glob导入和 SSR 等功能 。它的许多插件和集成正在促进一个充满活力的生态系统 。
但这导致了一个新问题：如何在Vite上编写单元测试 。
将Jest等框架与Vite一起使用，导致Vite和Jest之间有很多重复的配置，而 Vitest 解决了这一问题，它消除了为我们的应用程序编写单元测试所需的额外配置 。Vitest 使用与 Vite 相同的配置，并在开发、构建和测试时共享一个共同的转换管道 。它还可以使用与 Vite 相同的插件API进行扩展，并与Jest的API兼容，以方便从Jest迁移，而不需要做很多重构工作 。
因此，Vitest 的速度也非常快 。
如何使用 Vitest 来测试组件安装 Vitest在项目中使用 Vitest 需要 Vite >=v2.7.10 和 Node >=v14 才能工作 。
可以使用 npm、yarn 或 pnpm 来安装 Vitest，根据自己的喜好，在终端运行以下命令：
NPM
npm install -D vitestYARN
yarn add -D vitestPNPM
pnpm add -D vitest
文章插图
Vitest 配置安装完 Vitest 后，需要将其添加到 vite.config.js 文件中:
vite.config.js
import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";export default defineConfig({plugins: [vue()],//add test to vite configtest: {// ...},});为 TypeScript 配置 Vitest 是类似的，但如果从 Vite 导入 defineConfig，我们需要在配置文件的顶部使用三斜线命令添加对 Vitest 类型的引用 。/// <reference types="vitest" />import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";// https://vitejs.dev/config/export default defineConfig({plugins: [vue()],test: {// ...},});值得注意的是，Vitest 也可以在项目中通过在根文件夹中添加 vitest.config.js 文件来配置 。如果这个文件存在，它将优先于 vite.config.js 来配置Vitest 。Vitest 也允许额外的配置，可以在配置页面中找到 。事例演示：Notification为了看看Vitest的运作情况，我们创建一个显示三种类型通知的通知组件：info、error 和success 。这个组件的每个状态如下所示：
info
文章插图
error
文章插图
success
文章插图
notification.vue 内容如下：
<template><div:class="['notification',type === 'error' ? 'notification--error' : null,type === 'success' ? 'notification--success' : null,type === 'info' ? 'notification--info' : null,message && message.length > 0 ? 'notification--slide' : null,]"><imgsrc=https://www.isolves.com/it/cxkf/qd/2022-08-09/"https://res.cloudinary.com/djalafcj9/image/upload/v1634261166/getequityV2/denied_sbmv0e.png"v-if="type === 'error'"/>{{ message }}
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 蒸鱼豉油可以炒菜吗
- 怎样制作红油辣椒
- 如何使用健身器材
- 分享微信使用技巧，快来涨姿势啦
- 海外版抖音TikTok使用教程详解
- 减肥方法使用新的软呼啦圈
- 如何在 Vuejs 中使用 Supertokens 的预构建 UI
- 在Java 8及更高版本中使用Java流
- 这4款好用不贵的卷发棒了解一下！ 哪种卷发棒好用
- 热熔胶我们常用的几种实用的使用方法 热熔胶怎么用
