完全掌握vue全家桶单元测试 : 2. 搭建 vitest 环境

搭建 vitest 环境

假设我们没有写过 vue 的单元测试,我们初始化一个全新的项目,只要在初始化 vue 项目的时候,使用 vue 自带的脚手架命令,就可以自动安装好一整套的测试环境,vitest + @vue/test-utils.

安装

javascript 复制代码
pnpm create vue@latest

项目初始化成功之后,打开 vitest.config.ts 就可以看到如下的单元测试配置, f

ts 复制代码
export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
     //...
    }
  })
)

打开命令行执行pnpm run test:unit 命令行就会输出如下的日志,代表 HelloWorld 组件的单元测试通过了✅

我们打开 HelloWorld.spec.ts 组件,把 Hello Vitest 改成 Hello Vitest1 ,命令行就会出现失败场景❌

单元测试配置的三种方式,可以具体讲一下

测试具体某一个文件,有时候测试用例特别多,第一次测试执行用例会比较久,我们只想快速测这一个文件

bash 复制代码
pnpm run test:unit  src/components/__tests__/HelloWorld.spec.ts

默认 vitest 运行就是带热更新监听文件的,如果想不需要热更新的一次性命令如下

arduino 复制代码
pnpm run test:unit run  src/components/__tests__/HelloWorld.spec.ts

搭建 vitest 环境

报告器

报告器通俗解释,就是报告用什么方式呈现,json、html、展示的内容是详细还是简略的,可以使用 --reporter 命令行选项,或者在你的 outputFile配置选项 中加入 reporters 属性来选择不同的报告器。如果没有指定报告器,Vitest 将使用下文所述的默认报告器。 报告器可以组合使用,并以不同格式打印测试结果。

默认情况下,成功和错误的日志会输出到控制台,如果用例很多,错误也很多,那看起来会非常不方便,我选择如下配置,命令行、html、json 都能看到日志的输出,当然,这个按个人喜好修改

ts 复制代码
  defineConfig({
    test: {
     // ...
      reporters: ['verbose', 'html', 'json'], // 三种输出方式,命令行、html、json
      outputFile: {
        json: './test/json-report.json',
        html: './test/index.html'
      }
    }
  })

然后我们打开 pacage.json , 加入下面这行

bash 复制代码
 "preview:test": "vite preview --outDir test",

然后执行 pnpm run preview:test,会看到一个可视化的页面,页面会更加直观

所以我们如果想运行测试命令,然后在命令行看到测试结果,又想要在浏览器上 preview 测试结果,那就需要运行两个终端

pnpm run preview:testpnpm run test:unit

Vitest UI

vitest 提供一个漂亮的 UI 界面来查看并与测试交互,原本需要开两个终端,现在只需要一个了,且功能更好用,接下来我们一步一步安装

bash 复制代码
pnpm i @vitest/ui -D

在package.json添加

bash 复制代码
"vitest:ui": "vitest --ui",

最后,你可以访问 Vitest UI 界面,通过 http://localhost:51204/__vitest__/

覆盖率

覆盖率就是你的测试代码覆盖你想测试的函数或者组件的比例,具体我们先不讲,后续再仔细讲解,我们先把他配置上去

bash 复制代码
coverage: {
        enabled: true,
        reporter: ['text', 'json', 'html']
}

配置好之后,我们可以直接在 Vitest ui 上多一个图标,点击试试吧

globals

我们在写单元测试的时候,每一个单元测试文件都需要引入测试框架 vitest,会很繁琐,例如

ts 复制代码
import { describe, it, expect } from 'vitest'

可以在 vitest.config.ts 添加 global配置,这样就相当于全局引入了 Vitest,不需要每一个文件都引入

ts 复制代码
 globals: true

但发现去掉之后,编辑器会提示 describe 和 it 未定义的错误,是因为错误是 eslint 提示的,我们需要再安装一个插件

bash 复制代码
pnpm i  eslint-plugin-vitest-globals -D 

在eslint.js里面添加

ts 复制代码
module.exports = {
    extends: [
        'plugin:vitest-globals/recommended',
    ],
    overrides: [
        {
          files: [
            '**/__tests__/*.{j,t}s?(x)',
            '**/tests/unit/**/*.spec.{j,t}s?(x)',
            '**/*.test.{j,t}s?(x)'
          ],
          env: {
            'vitest-globals/env': true
          }
        }
     ],
}

在 tsconfig.vitest.json 添加

ts 复制代码
 "types": [
      "node",
      "jsdom",
      "vitest/globals"
    ]

environment

  • 类型: 'node' | 'jsdom' | 'happy-dom' | 'edge-runtime' | string

Vitest 中的默认测试环境是一个 Node.js 环境。如果你正在构建 Web 端应用,你可以使用 jsdomhappy-dom 这种类似浏览器(browser-like)的环境来替代 Node.js。 如果你正在构建边缘计算函数,你可以使用 edge-runtime 环境

因为我们需要测试 vue ,它是需要在 dom 环境下运行的,所以我们使用 jsdom,顺便说一下,如果用到浏览器平台相关的 api ,都要使用 jsdom,例如 localStorag.setItem 是不能在 node 环境下运行的

ts 复制代码
environment: 'jsdom',

exclude

匹配排除测试文件的 glob 规则,根据项目目录配置,例如把 e2e 文件夹排除掉

ts 复制代码
exclude: [...configDefaults.exclude, 'e2e/*'],

附加

完整配置

ts 复制代码
import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals: true,
      environment: 'jsdom',
      exclude: [...configDefaults.exclude, 'e2e/*'],
      root: fileURLToPath(new URL('./', import.meta.url)),
      reporters: ['verbose', 'html', 'json'],
      outputFile: {
        json: './test/json-report.json',
        html: './test/index.html'
      },
      coverage: {
        enabled: true,
        reporter: ['text', 'json', 'html']
      }
    }
  })
)

课件地址

上面的代码,都放到了 github 上,欢迎点赞收藏,我会持续更新代码和文章

相关推荐
Wetoria9 分钟前
管理 git 分支时,用 merge 还是 rebase?
前端·git
前端开发与ui设计的老司机19 分钟前
UI前端与数字孪生融合新领域:智慧环保的污染源监测与治理
前端·ui
一只小风华~32 分钟前
Web前端开发: :has功能性伪类选择器
前端·html·html5·web
成遇40 分钟前
Eslint基础使用
javascript·typescript·es6
Mr_Mao5 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜056 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~7 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.8 小时前
serviceWorker缓存资源
前端
RadiumAg9 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo9 小时前
ES6笔记2
开发语言·前端·javascript