前言：单元测试的意义

单元测试，是软件开发白盒测试中的一种测试方式，用于测试程序中的最小单元模块，比如函数、方法或类。它的意义与价值如下：

• 提高代码质量：单元测试可以帮助开发人员及时发现代码中的bug，从而改善代码质量。
• 加速开发进程：运行单元测试用例，开发人员可以快速定位和解决代码问题，减少错误排查调试时间，从而加快开发进程。
• 减少维护成本：单元测试可以在开发阶段发现问题，减少上线发布后的问题数量，从而降低维护成本。
• 安全重构：如果项目需要重构迁移的时候，单元测试可以提供安全保障。

单元测试

单元测试框架

测试框架：Vitest

Vitest，Vue/Vite 团队维护的单元测试框架，核心定位是高性能。它有以下几个特性：

来源： vitest.dev/guide/featu…

Vitest 环境配置

我们在编写测试用例前，首先得安装配置下 Vitest 运行环境。

// 安装相关依赖
pnpm install vitest happy-dom @testing-library/vue -D

相关配置如下：

vite.config.ts:

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

// https://vitejs.dev/config/
export default defineConfig({
  ...
  test: {
    // enable jest-like global test APIs
    globals: true,
    // simulate DOM with happy-dom
    environment: "happy-dom",
    // support tsx
    transformMode: {
      web: [/.[tj]sx$/]
    }
  }
})

tsconfig.json:

{
  "compilerOptions": {
       "types": ["vitest/globals"]
  }
}

测试用例（Button组件）

为了测试Button组件代码是否能正常运行，我们可以编写如下测试用例：

packages/components/button/_tests_/button.test.ts:

import { render } from "@testing-library/vue"
import Button from "../src/button"

// Test button 渲染是否正常
test("should work", () => {
  const { getByRole } = render(Button)
  getByRole("button")
})

// Test slots
test("default slots should work", () => {
  const { getByText } = render(Button)
  getByText("按钮")
})

test("slots should work", () => {
  const { getByText } = render(Button, {
    slots: {
      default() {
        return "confirm"
      }
    }
  })
  getByText("confirm")
})

// Test props
test("props type should work", () => {
  const { getByRole } = render(Button, {
    props: {
      type: "primary"
    }
  })
  const button = getByRole("button")
  expect(button.classList.contains("u-button--primary")).toBe(true)
})

测试 Repoter

Vitest 0.26.0版本后，借助 @vitest/ui 依赖可以生成HTML 可视化的测试报告，方便排查定位错误和缺陷。Button 测试用例的 Repoter 如下图所示：

总结

行文至此，我们已经编写完成 Button 组件的单测以及生成报告确认代码质量，目前还差最后一步打包发布，组件库就能下载使用了，我们下章再续！！

本专栏文章：

1. 【前端工程化-组件库】从0-1构建Vue3组件库（概要设计）
2. 【前端工程化-组件库】从0-1构建Vue3组件库（组件开发）
3. 【前端工程化-组件库】从0-1构建Vue3组件库（单元测试）
4. 【前端工程化-组件库】从0-1构建Vue3组件库（打包发布）