React Testing Library 使用教程

React Testing Library 使用教程

react-testing-library🐐 Simple and complete React DOM testing utilities that encourage good testing practices.项目地址:https://gitcode.com/gh_mirrors/re/react-testing-library

项目介绍

React Testing Library 是一个用于测试 React 组件的轻量级解决方案。它提供了一系列的 API 来渲染组件、模拟用户交互以及断言组件的行为。这个库鼓励开发者编写用户友好的测试，确保测试更接近实际用户的使用场景。

项目快速启动

安装

首先，你需要在你的项目中安装 @testing-library/react：

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

基本示例

以下是一个简单的测试示例，展示了如何使用 React Testing Library 来测试一个按钮组件：

// Button.js
import React from 'react';

const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

export default Button;

// Button.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('按钮点击后调用 onClick 函数', () => {
  const handleClick = jest.fn();
  const { getByText } = render(<Button onClick={handleClick}>Click me</Button>);
  fireEvent.click(getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

应用案例和最佳实践

应用案例

React Testing Library 可以用于测试各种 React 组件，从简单的按钮到复杂的状态管理组件。以下是一个更复杂的应用案例，展示了如何测试一个包含表单的组件：

// Form.js
import React, { useState } from 'react';

const Form = ({ onSubmit }) => {
  const [value, setValue] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    onSubmit(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default Form;

// Form.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Form from './Form';

test('表单提交后调用 onSubmit 函数', () => {
  const handleSubmit = jest.fn();
  const { getByText, getByRole } = render(<Form onSubmit={handleSubmit} />);
  const input = getByRole('textbox');
  fireEvent.change(input, { target: { value: 'test' } });
  fireEvent.click(getByText('Submit'));
  expect(handleSubmit).toHaveBeenCalledWith('test');
});

最佳实践

1. 使用 getByRole 查询元素：尽量使用 getByRole 来查询元素，因为它更接近用户的交互方式。
2. 模拟用户交互：使用 fireEvent 来模拟用户的点击、输入等行为。
3. 断言组件状态：使用 expect 来断言组件的状态或行为是否符合预期。

典型生态项目

React Testing Library 是 Testing Library 生态系统的一部分，它还包括以下相关项目：

1. @testing-library/jest-dom：提供了一系列的自定义 Jest 匹配器，用于更方便地断言 DOM 状态。
2. @testing-library/user-event：提供了一个更高级的用户事件模拟库，更接近真实的用户交互。
3. @testing-library/dom：提供了一些基础的 DOM 测试工具，可以独立于 React 使用。

通过结合这些生态项目，你可以更全面地测试你的 React 应用，确保它们在各种场景下都能正常工作。

react-testing-library🐐 Simple and complete React DOM testing utilities that encourage good testing practices.项目地址:https://gitcode.com/gh_mirrors/re/react-testing-library