用Vitest测试Vue组件

现代前端开发中需要严格的测试流程来确保应用的可靠性和易于维护。

幸運的是，我們可以在 Vue 中使用由 Vite 提供支持的出色工具：Vitest，這是一個出色的工具，讓我們可以輕鬆測試 Vue 組件。

本文中，我将深入探讨如何使用Vitest（测试工具）来测试Vue组件的。

嗨，享受吧！

Vitest 是一个与 Vite（一个现代构建工具）无缝协作的超快速测试框架。以下是一些原因说明为什么 Vitest 是测试 Vue 组件（Vue components）的绝佳选择。

1. 速度: 基于 Vite 构建，Vitest 拥有快速的构建速度和热模块替换（HMR）功能。
2. TypeScript 支持: Vitest 自带开箱即用的 TypeScript 支持。
3. Vue 集成: 它能够很好地与 Vue 的官方测试库 Vue Test Utils 配合。
4. 丰富的功能集: Vitest 包含快照测试、模拟功能和热重载模式等特性，为开发提供流畅的体验。

首先，确保你用 Vite 建立了一个 Vue 项目。然后，安装 Vitest 和其他相关库，例如：

你可以运行下面的命令来安装开发所需的依赖项，包括vitest、@vue/test-utils 和 vue：

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

切换到全屏。退出全屏。

添加一个 vitest.config.ts 文件来进行设置：

    import { defineConfig } from 'vitest/config';

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

进入全屏，退出全屏

如果你需要进行全局配置设置（比如模拟全局变量），可以创建一个 vitest.setup.ts 文件。

从 'vitest' 导入 expect;
从 '@testing-library/jest-dom/matchers' 导入 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('Hello, 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('Hello, Vue!');
      });

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

全屏模式 / 退出全屏

请使用以下命令运行测试。

运行命令 npx vitest

全屏 退出全屏

你可以通过观察模式获得更互动的体验，

    npx vitest --watch

监视并运行vitest测试

全屏 退出全屏

快照测试就是比较组件的渲染输出与基线。在 HelloWorld.spec.ts 文件中添加一个快照测试。

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

全屏模式 退出全屏

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

// 使用 vi.mock 来模拟 axios 库的行为
// 模拟 axios 库，返回一个包含模拟数据的 Promise
vi.mock('axios', () => ({
  default: {
    get: vi.fn(() => Promise.resolve({ data: 'Mocked Data' }))
  }
}));

全屏查看 退出全屏

测试组件如何接收和处理props并触发事件：

describe('带属性渲染', () => {
  const wrapper = mount(HelloWorld, {
    props: { initialMessage: '你好，属性!' }
  });
  // HelloWorld 是一个组件名，表示带有属性问候的组件。
  expect(wrapper.text()).toInclude('你好，属性!');
});

进入全屏，退出全屏

如果你想了解更多关于 Vue、Nuxt、JavaScript 或其他有用的技术，可以点击下面的链接或图片访问 VueSchool：

链接

它涵盖了构建现代 Vue 或 Nuxt 应用程序所需的重要概念，这些概念能帮助你在日常工作中或副项目中 😉

做得好！用 Vitest 测试 Vue 组件真是简单又愉快。这个工具的速度、现代化的特点以及与 Vue 的无缝结合，对于希望确保应用既健壮又易于维护的开发者来说，这真是一个绝佳的选择。

保重身体，下次聊！

一如既往地愉快地编程吧！🖥️