⚡️⚡️Vitest，解锁 Vue 组件测试的高效之道

⚡️⚡️Vitest：解锁 Vue 组件测试的高效之道

原文链接：Testing Vue components with Vitest
作者：Jacob Andrew Sky
译者：倔强青铜三

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

现代前端开发需要强大的测试实践，以确保应用程序的可靠性和可维护性。幸运的是，在 Vue 中，我们可以使用由 Vite 提供支持的出色工具 Vitest 来轻松测试 Vue 组件。本文将深入探讨如何使用 Vitest 测试 Vue 组件。

Vitest 是什么？

Vitest 是一个超快的测试框架，专为与现代构建工具 Vite 无缝协作而设计。以下是 Vitest 成为测试 Vue 组件的绝佳选择的原因：

速度：基于 Vite 构建，Vitest 利用了其快速构建时间和热模块替换（HMR）。
TypeScript 支持：Vitest 提供开箱即用的 TypeScript 支持。
Vue 集成：它与 Vue Test Utils（Vue 的官方测试库）配合得很好。
丰富的功能集：Vitest 包括快照测试、模拟和监视模式等功能，以简化开发流程。

使用 Vitest 测试 Vue 组件

首先，确保你已经使用 Vite 设置了一个 Vue 项目。然后，安装 Vitest 及相关库：

npm install --save-dev vitest @vue/test-utils vue

添加一个 vitest.config.ts 文件来配置 Vitest：

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom', // 模拟浏览器环境
    setupFiles: './vitest.setup.ts', // 可选的设置文件
  },
});

如果需要进行全局配置（例如，模拟全局变量），创建一个 vitest.setup.ts 文件：

import { expect } from 'vitest';
import matchers from '@testing-library/jest-dom/matchers';

expect.extend(matchers);

让我们为一个 Vue 组件编写一个简单的测试。考虑以下 HelloWorld.vue 组件：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">点击我</button>
  </div>
</template>

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

const message = ref('你好，Vue！');

function updateMessage() {
  message.value = '你点击了按钮！';
}
</script>

在 tests 目录中创建一个 HelloWorld.spec.ts 文件：

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

describe('HelloWorld.vue', () => {
  it('渲染正确的消息', () => {
    const wrapper = mount(HelloWorld);
    expect(wrapper.text()).toContain('你好，Vue！');
  });

  it('点击按钮时更新消息', async () => {
    const wrapper = mount(HelloWorld);
    await wrapper.find('button').trigger('click');
    expect(wrapper.text()).toContain('你点击了按钮！');
  });
});

使用以下命令运行测试：

npx vitest

为了获得更交互的体验，可以使用监视模式：

npx vitest --watch

额外测试技巧

快照测试会捕获渲染组件的输出并将其与基线进行比较。在 HelloWorld.spec.ts 中添加一个快照测试：

it('与快照匹配', () => {
  const wrapper = mount(HelloWorld);
  expect(wrapper.html()).toMatchSnapshot();
});

Vitest 允许你模拟模块和函数。例如：

vi.mock('axios', () => ({
  default: {
    get: vi.fn(() => Promise.resolve({ data: '模拟数据' }))
  }
}));

测试组件如何处理 props 和发出事件：

it('使用 props 渲染', () => {
  const wrapper = mount(HelloWorld, {
    props: { initialMessage: '你好，Props！' }
  });
  expect(wrapper.text()).toContain('你好，Props！');
});

总结

做得好！使用 Vitest 测试 Vue 组件是一个简单而愉快的过程。它的速度、现代功能以及与 Vue 的无缝集成，使其成为希望确保应用程序健壮性和可维护性的开发者的绝佳选择。

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

⚡️⚡️Vitest，解锁 Vue 组件测试的高效之道