【无标题】

Vitest 由 Vite 提供支持的极速单元测试框架。

什么是Vitest

vitest 是一个基于 JavaScript 的测试框架，用于编写和运行单元测试、集成测试和端到端测试。与其他测试工具相比，vitest 具有以下优势：

• 易于学习和使用：vitest 的 API 设计简单明了，易于学习和使用。同时，它也提供了详细的文档和示例，方便开发者快速上手。
• 可扩展性强：vitest 可以通过插件机制扩展功能，如测试覆盖率、快照测试、异步测试等。同时，它也支持自定义测试运行器、断言库和报告器等。
• 跨平台支持：vitest 可以在多个平台上运行，如浏览器、Node.js 等。同时，它也支持多种测试运行方式，如命令行、CI/CD 等。
• 性能优越：vitest 的性能表现优秀，它可以在短时间内运行大量的测试用例，并且支持并行测试运行，提高测试效率。
• 社区活跃：vitest 是一个活跃的开源项目，拥有一个强大的社区支持。开发者可以通过社区提供的资源和工具，快速解决问题并提高开发效率。

依赖环境

Vitest 需要 Vite >=v3.0.0 和 Node >=v14.18

vitest快速使用

安装

 npm install -D vitest 

配置

Vitest 可以在vite.config.js配置，也可以在vitest.config.js中配置 vitest.config.js的优先级最高。

• 在vite.config.js中配置实现配置索引，注意三斜线指令写在配置文件顶部

/// <reference types="vitest" />
import { defineConfig } from 'vite'
export default defineConfig({
  test: {
    // ...
  },
})

• 在vitest.config.js中配置索引，如果需要可以从默认文件拓展vite的选项,注意mergeConfig helper 在 Vitest v0.30.0 之后可用。如果你使用低版本，你可以直接从 vite 导入它。

import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      globals:true, //提高兼容性
      environment:'jsdom', //来模拟 DOM 和浏览器 API，可选jsdom、happy-dom
      reporters: ['html'], //报告器生成 HTML 输出并预览测试结果，可以在 Vitest UI 中查看覆盖率报告
      coverage: {
        provider: 'istanbul', // or 'v8'， //选择覆盖工具
        reporter: ['text', 'json', 'html'], //检测覆盖的代码
      },
    },
  })
)
// 启动vitest测试的时候会提示自动安装以上要用到的工具

• 配置package.json

"scripts":{
  "test":"vitest",
  "coverage": "vitest run --coverage",//检测代码覆盖率
}
// node终端运行测试:npm run test

编写组件测试案例

Vitest本身不支持但愿组件测试，需要依赖第三方插件**@vue/test-utils**，访问该网站查看详细使用@vue/test-utils

npm install --save-dev @vue/test-utils
// 相关的依赖可能会限制node的版本，注意提示

import { describe, expect, it } from "vitest";
import Button from './Button.vue';
import { mount} from "@vue/test-utils";

// describe
describe('Button Vue', () => {
    it('renders the correct message', () => {
        const msg = 'Hello, world!'
        const wrapper = mount(Button, {
          props: {
            msg
          }
        })
        expect(wrapper.find('h1').text()).toBe(msg)
      })
    
      it('increments the count when the button is clicked', () => {
        // mount将会创建一个包含被挂载和渲染的vue组件
        const wrapper = mount(Button)
        const button = wrapper.find('button')
        button.trigger('click')
        expect(wrapper.find('button').text()).toContain('count is: 1')
      })
})

测试结果

• 需要查看测试用例的正确性，以及测试是否通过

npm run test

• Vitest 提供一个漂亮的 UI 界面来查看并与测试交互。Vitest 的 UI 界面是可选的，你可以通过以下安装：

npm i -D @vitest/ui

• 接下来可以通过以下命令启动测试的UI界面,在终端查看UI：

vitest --ui

• 自 Vitest 0.26.0 开始, UI 也可以用作测试报告器。 在 Vitest 配置中使用 ‘html’ 报告器生成 HTML 输出并预览测试结果，默认会在项目目录下生成html文件夹：

// vitest.config.js
export default {
  test: {
    reporters: ['html'],
  },
}

• 在运行 npm run test 之后，会在项目目录下生成html文件夹，要预览你的 HTML 报告，可以使用 vite preview 命令：

npx vite preview --outDir html

代码覆盖率

• 测试通常需要查看代码的覆盖率，Vitest通过coverage属性设置，有两种支持方式（提醒Vitest v0.22.0 开始支持）：

// vitest.config.js
import { defineConfig, mergeConfig } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      coverage: {
        provider: 'istanbul', // or 'v8'， //选择覆盖工具
        reporter: ['text', 'json', 'html'], //检测覆盖的代码
        // reportsDirectory: './test/coverage', //检测报告输出路径
      },
    },
  })
)

• 当运行npm run test的时候，会提示自动安装相应的依赖包，或者手动安装:

# For v8
npm i -D @vitest/coverage-v8
# For istanbul
npm i -D @vitest/coverage-istanbul

• 覆盖率配置
  要在启用的情况下进行测试，你可以在 CLI 中传递 --coverage 标志。 默认情况下, 将使用 [‘text’, ‘html’, ‘clover’, ‘json’] 作为测试报告器。

{
  "scripts": {
    "test": "vitest",
    "coverage": "vitest run --coverage"
  }
}

• 配置完成之后，运行项目，查看在UI中的测试结果，如需查看测试报告，打开目录coverage下的html在浏览器中查看

// 运行测试项目，终端输出代码覆盖率
npm run coverage
// 如需在UI查看测试结果，运行以下
npx vite preview --outDir html

API

以下是一些使用频率较高的api，如需查看完整的api，访问该网站[https://cn.vitest.dev/guide/]

environment测试环境

Vitest可以在特定环境中运行代码，通过配置environment实现

• node 为默认环境
• jsdom 通过提供 Browser API 模拟浏览器环境
• happy-dom 通过提供 Browser API 模拟浏览器环境，被认为比 jsdom 更快，但缺少一些 API
• edge-runtime 模拟 Vercel 的 edge-runtime，使用 @edge-runtime/vm 包

插件

• VS Code:vitest
• IDE:​WebStorm、PhpStorm、IntelliJ IDEA Ultimate
• VS Code、JetBrains、Visual Studio、Sublime Text:Wallaby.js

调试

• Terminal:

  # 安装ndb
  npm install -g ndb
  # 在启用 debugger 的情况下运行测试
  ndb npm run test

• VS Code:
  在VS Code的终端中打开新的JavaScript调试终端，并直接运行npm run test
  

常见问题

• 使用 element-plus 二次封装组件，使用 vitest 测试时报错，对于 element-plus 的 css 样式识别失败，在test增加以下配置并重启

test: {
    deps: {
      inline: ['element-plus']
    }
  },