Use vitest para testes unitários em projetos vite + vue3 (apenas para referência)

1. Arquivo de configuração

// vitest.config.ts

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig } from 'vite'
import { configDefaults } from 'vitest/config'
// import viteConfig from './vite.config'


import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'


export default mergeConfig(
  defineConfig({
    // 安装了tsx插件才需配置
    plugins: [
      vue(),
      vueJsx(),
    ],
  }),
  defineConfig({
    test: {
      globals: true,
      // 测试环境，模拟浏览器环境的库jsdom
      environment: 'jsdom',
      // 测试覆盖工具
      coverage: {
        provider: "c8"
      },
      // 测试报告
      reporters: ['junit'],
      // 测试报告生成文件
      outputFile: './coverage/junit.xml',
      exclude: [...configDefaults.exclude, 'e2e/*'],
      root: fileURLToPath(new URL('./', import.meta.url)),
      transformMode: {
        web: [/\.[jt]sx$/]
      }
    }
  })
)

2. Relatório de cobertura completo

C8 está integrado ao vitest.C8 é uma ferramenta para verificação de cobertura de teste, que informa aos desenvolvedores quais linhas de código do código são cobertas e quais não são.

Adicione o script npm ao package.json

"test:coverage": "vitest --coverage"

Se o c8 não estiver instalado e você executar o comando, o Vitest solicitará que você instale o c8. O padrão é sim. Pressione Enter para instalar. Após a instalação, a linha de comando exclui a cobertura de teste e gera um relatório de teste em src/coverage.

3. Relatório de teste

Adicione o script npm ao package.json

"test:unit": "vitest --watch=false --coverage --reporter=junit",

4. Desligue as atualizações importantes

Configurar um parâmetro de linha de comando –watch==false pode desativar esse comportamento

"test:unit": "vitest --watch=false --coverage"

5. Escreva casos de teste

Abra o vscode, crie um novo diretório de componentes e um diretório de botão e, em seguida, crie um diretório __test__ para colocar os arquivos de teste. O código-fonte do elemetn-plus faz o mesmo, crie um novo arquivo xxx.test.ts ou tsx nele (tsx não está instalado) Basta criar o arquivo ts).

Por padrão, o vitest detectará todos os arquivos de teste, como .test.ts ou .test.tsx no projeto. Isso pode ser modificado. Você pode consultar o site oficial para obter configurações específicas.

// HelloWorld.spec.ts

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


import { mount } from '@vue/test-utils'
import HelloWorld from '../HelloWorld.vue'

describe('HelloWorld', () => {
  it('renders properly', () => {
    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
    expect(wrapper.text()).toContain('Hello Vitest')
  })
})

// HelloWorld.vue

<script setup lang="ts">
defineProps<{
  msg: string
}>()
</script>

<template>
  <div class="greetings">
    <h1 class="green">{
   
   { msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

referência

Vitest | Estrutura de teste de unidade extremamente rápida desenvolvida por Vite

Vite | A próxima geração de conjunto de ferramentas front-end

Vitest: estrutura moderna de testes front-end - Zhihu