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

2024-09-09

1620 字约 6 分钟

...

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

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

安装

pnpm create vue@latest

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

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
     
    }
  })
)

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

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

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

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

pnpm run test:unit  src/components/__tests__/HelloWorld.spec.ts

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

pnpm run test:unit run  src/components/__tests__/HelloWorld.spec.ts

报告器

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

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


  defineConfig({
    test: {
     
      reporters: ['verbose', 'html', 'json'], 
      outputFile: {
        json: './test/json-report.json',
        html: './test/index.html'
      }
    }
  })

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

 "preview:test": "vite preview --outDir test",

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

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

先pnpm run preview:test后 pnpm run test:unit

Vitest UI

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

pnpm i @vitest/ui -D

在package.json添加

"vitest:ui": "vitest --ui",

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

覆盖率

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

coverage: {
        enabled: true,
        reporter: ['text', 'json', 'html']
}

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

globals

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

import { describe, it, expect } from 'vitest'

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

 globals: true

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

pnpm i  eslint-plugin-vitest-globals -D

在eslint.js里面添加

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 添加

 "types": [
      "node",
      "jsdom",
      "vitest/globals"
    ]

environment

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

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

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

environment: 'jsdom',

exclude

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

exclude: [...configDefaults.exclude, 'e2e/*'],

附加

完整配置

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']
      }
    }
  })
)