从0到1搭建react组件库——组件测试

组件测试

国内互联网测试现状

• 重视程度不足
• 没有时间
• 不会写测试

测试的重要性

• 高质量的代码
• 更早发现Bug，减少成本
• 让重构和升级变得更加容易和可靠
• 让开发流程更加敏捷

测试金字塔

• Unit:单元测试是把代码分成单独的互相独立的部分，没有依赖，独立工作
• Service：把Unit组合起来，测试是否良好工作
• UI：测试模拟真实用户场景，行为

React组件特别适合单元测试

• Conmponent-组件
• Function-函数
• 单向数据流

测试框架

https://jestjs.io/docs/getting-started

新建jest.test.js文件

test('test commen matcher', () => {
    expect(2+2).toBe(4)
})

运行测试文件

pnpm jest jest.test.js

test('test to be true or false', () => {
    expect(1).toBeTruthy()
    expect(0).toBeFalsy()
}) 

测试工具—React-testing-libra

运行以下命令安装 @testing-library/react 和相关依赖：

pnpm install @testing-library/react @testing-library/jest-dom @testing-library/user-event jest @types/jest vite-plugin-testing --save-dev

安装 vitest

pnpm add -D vitest

确保 vite.config.ts 配置正确

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { configDefaults } from 'vitest/config';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom', // 指定测试环境
    setupFiles: './testSetup.js', // 预加载文件
    exclude: [...configDefaults.exclude, 'dist/**', 'node_modules/**'], // 避免无关目录被测试
  },
});

建 jest.setup.js 文件，并添加以下内容：

// jest.setup.js
import '@testing-library/jest-dom'; // 引入 jest-dom 的扩展断言

在 package.json 中添加测试脚本：

{
  "scripts": {
    "test": "jest"
  }
}

创建一个Button组件测试文件button.test.tsx

import React from "react";
import { render } from "@testing-library/react";

import Button from "./button";

test("react test case", () => {
  const wrapper = render(Nice);
  const element = wrapper.queryByText("Nice");
  expect(element).toBeTruthy();

});

执行测试文件

pnpm test