Vue3 使用Vitest进行单元测试

1. 介绍

Vue团队为Vite提供了一个更好用的测试工具：Vitest，所以基于Vue3+Vite构建的项目，可以使用Vitest进行测试，Vitest对于JS和TS都是支持的，本文多数以ts文件为例。

看此之前，建议先看一下另一篇的内容：Vue2 使用Jest进行单元测试

2. 安装插件

 npm i -D -S vitest @vue/test-utils

Vitest 需要 Vite ≥ v5.0.0 和 Node ≥ v18.0.0

3. 最简单测试练习

3.1 创建test.js或test.ts文件，引入vitest的测试方法

在根目录创建test.js或test.ts文件，并写简单的测试内容，如：

import { expect, test } from 'vitest'

function sum(a: any, b: any) {
  return a + b
}

test('测试1+2是否返回结果3', () => {
  expect(sum(1, 2)).toBe(3)
})

3.2 配置脚本

​在package.json文件中配置Vitest脚本

3.3 执行测试，观察结果

成功！

4. 进阶：引入.vue文件中的内容进行测试

4.1 简单配置vitest.config文件

vitest.config拓展名应与vite.config拓展名一致，这里统一使用的是ts拓展名。

你可以直接在vite.config文件中的test属性里进行配置，或者选择创建vitest.config文件单独进行配置。这里使用的是vitest.config文件单独配置。

4.1.1 直接直接在vite.config配置

注意：这时需要使用 三斜杠指令 /// <reference types="vitest" /> 在你的配置文件的顶部引用。

//vite.config.ts

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

export default defineConfig({
  test: {
    // 你的配置信息...
  },
})

4.1.2 vitest.config文件单独配置

由于vitest.config文件比vite.config文件优先级更高，如果使用vitest和vite分别配置，请确保在 Vitest 配置文件中定义相同的 Vite 选项，因为它将覆盖你的 Vite 文件，而不是扩展它。另外，还可以使用 **

vite

或

vitest/config

**条目中的

mergeConfig

方法将 Vite 配置与 Vitest 配置合并，如：

//vitest.config.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, // 全局引入vitest位置
      environment: 'jsdom', // 环境选择 jsdom
      includeSource: ['src/**/*.{js,ts}'] //资源路径
    }
  })
)

4.2 Vue3组件示例

假设在图中目录下有HelloWorld.vue组件，并包含以下代码：

<script setup lang="ts">
import { ref } from 'vue';

const greeting = ref<string>('Hello, World!');

function changeGreeting() {
  greeting.value = '你好世界！';
}
</script>

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <button @click="changeGreeting">Change Greeting</button>
  </div>
</template>

<style scoped></style>

4.3 创建相关测试文件

一般情况下，执行测试的文件名中必须包含 ".test." 或 ".spec." 。所以我们创建一个tests文件夹，用来专门存储测试文件，并在tests路径下创建两个简单的测试文件，这里我两个都测试一下，所以创建了sum.test.ts（从外部引入ts暴露的方法）和HelloWorld.spec.ts文件。

//sum.test.ts

import { expect, test } from 'vitest'
import { sum } from './sum'

test('测试1+2是否返回结果=3', () => {
  expect(sum(1, 2)).toBe(3)
})

//sum.ts

export function sum(a: any, b: any) {
  return a + b
}

// HelloWorld.spec.ts

import { mount } from '@vue/test-utils';
import { expect, test, describe, it } from 'vitest'
import HelloWorld from '../src/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
    it('renders the initial greeting', () => {
        const wrapper = mount(HelloWorld);
        expect(wrapper.text()).toContain('Hello, World!');
    });

    it('changes the greeting when the button is clicked', async () => {
        const wrapper = mount(HelloWorld);
        await wrapper.find('button').trigger('click');
        expect(wrapper.text()).toContain('你好世界！');
    });
});

4.4 执行测试，观察结果

成功！

更多进阶待续。。。觉得好的话记得点赞哦！