请求协助编写React Hooks原子组件AtomButton的单元测试

我们可以用Jest + React Testing Library来编写这个原子组件的单元测试，这是React生态下最常用的测试组合。

第一步：安装必要依赖 #

先确保你的项目里安装了这些测试工具：

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

第二步：编写测试文件 #

创建AtomButton.test.js文件，和你的组件文件放在同一目录下，然后写入以下测试代码：

import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import AtomButton from './AtomButton';

// 测试组件基础渲染与文本展示
test('渲染AtomButton并显示传入的文本', () => {
  render(<AtomButton text="登录" />);
  // 验证按钮文本正确显示
  expect(screen.getByText('登录')).toBeInTheDocument();
});

// 测试variant属性是否正确传递给Bootstrap Button
test('正确传递type属性作为Bootstrap Button的variant', () => {
  render(<AtomButton text="提交" type="primary" />);
  const buttonElement = screen.getByRole('button');
  // Bootstrap的primary变体按钮会带有btn-primary类
  expect(buttonElement).toHaveClass('btn-primary');
});

// 测试点击事件回调是否触发
test('点击按钮时触发传入的onClick回调', () => {
  const mockOnClick = jest.fn();
  render(<AtomButton text="点击我" onClick={mockOnClick} />);
  
  const buttonElement = screen.getByRole('button');
  fireEvent.click(buttonElement);
  
  // 验证回调函数被调用了一次
  expect(mockOnClick).toHaveBeenCalledTimes(1);
});

测试逻辑说明 #

• 基础渲染测试：确保组件能正常渲染，并且正确展示传入的text属性内容。
• 属性传递测试：验证type属性正确传递给内部的Bootstrap Button，通过检查按钮的className来确认variant生效。
• 交互测试：模拟用户点击行为，验证传入的onClick回调函数被正确触发，确保组件的交互逻辑正常。

运行测试 #

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

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

然后执行npm test就能运行测试用例了。

内容的提问来源于stack exchange，提问作者Forum Forum