Vitest的单元测试及遇到的问题

什么是Vitest？

Vitest 是由 Vite 驱动的测试框架。它的主要优势之一是它与 Vite 的统一配置。可以和Vite共用配置。如果存在vite.config.ts，vitest 将读取你的根目录 vite.config.ts 以匹配插件.如果创建 vitest.config.ts，那么它优先级将会最高。

主要功能：

支持对 Vue、React、Svelte、Lit等框架进行单元测试，组件测试。
开箱即用的 TypeScript / JSX 支持

安装

yarn add -D vitest || npm install -D vitest

//package.json
"scripts": {
    "test": "vitest", //监听模式
    //...
}

(可选)如果需要测试代码覆盖率 需要安装 @vitest/coverage-v8 或 @vitest/coverage-istanbul

yarn add @vitest/coverage-v8 -D || pnpm install @vitest/coverage-v8 -D

//package.json
"scripts": {
    "coverage": "vitest run --coverage", //覆盖率测试
}

(可选)如果需要直观的在页面上显示测试的相关内容，需要安装 @vitest/ui

yarn add -D @vitest/ui || pnpm install -D @vitest/ui

//package.json
"scripts": {
    "vitestui": "vitest --ui", //vitest Ui
}

(可选)如果需要测试浏览器环境下的表现，需要安装 jsdom

yarn add jsdom -D || pnpm install jsdom -D

//vite.config.js
export default defineConfig({
  //...
  test: {
    environment: 'jsdom' //默认是node环境
  }
})

(可选)如果需要对vue组件进行测试，需要安装@vue/test-utils

yarn add -D @vue/test-utils || pnpm install -D @vue/test-utils

//简单示例
import { mount } from '@vue/test-utils'
import TodoApp from './TodoApp.vue'

test('renders a todo', () => {
  const wrapper = mount(TodoApp) //包裹
  const todo = wrapper.get('[data-test="todo"]') //查找标签元素
  expect(todo.text()).toBe('Learn Vue.js 3') //断言文本
})

配置

如果你使用的是Vite构建的项目，那么直接在 vite.config.ts 配置最好，如果不是，则新建一个 vitest.config.ts 进行配置. 如果使用了Vite构建项目，但是又新建立了 vitest.config.ts 那Vite的配置会被覆盖。

IDE 集成: Vitest 提供了 Visual Studio Code 的官方扩展，以增强测试体验

• 非Vite构建项目

//vitest.config.ts

import { defineConfig } from 'vitest/config'

export default defineConfig{
    test:{
        coverage: { // v8 测试代码覆盖率
            reporter: ['text', 'json', 'html'],
        },
        // include: ['test/**/*.test.ts'], //匹配包含文件
        // exclude:[], //排除文件
    }
}

• Vite构建项目

需要在配置文件顶端，加入三斜杠指令

//vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
    include: ['test/**/*.test.ts'], //匹配包含文件
    // exclude:[], // 排除文件
    environment: 'jsdom', //浏览器环境
  },
})

打包的配置，在 vite 配置文件中加入以下代码，清除无用代码。

//vite.config.ts
  define: {
    'import.meta.vitest': 'undefined', 
  },

TypeScript 的支持，需要在 TypeScript 配置中进行配置

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "vitest/importMeta"
    ]
  }
}

简单示例

在根目录添加 __tests__ 文件夹，添加测试文件

__tests__/index.test.ts
import { expect, test } from 'vitest'
import { testName } from '../src/index'

test('vitest-test', () => {
    expect(testName('jack')).toBe('jack')
})

src/index.ts
export function testName (name) {
    return name
}

问题集合

执行vitestui 报错 Cannot read properties of undefined (reading ‘config’)

vitest 和 vitest/ui 的版本和 vite 不匹配

pnpm i vitest@latest @vitest/ui@latest -D