jest如何测试react

使用 Jest 测试 React 组件

Jest 是 Facebook 推出的 JavaScript 测试框架，特别适合测试 React 应用。以下介绍如何使用 Jest 测试 React 组件。

安装依赖

确保项目中已安装 Jest 和相关依赖：

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

@testing-library/react 提供 React 组件的测试工具，@testing-library/jest-dom 扩展了 Jest 的 DOM 断言，@testing-library/user-event 用于模拟用户交互。

配置 Jest

在 package.json 中添加 Jest 配置：

{
  "jest": {
    "testEnvironment": "jsdom",
    "setupFilesAfterEnv": ["@testing-library/jest-dom/extend-expect"]
  }
}

testEnvironment 设置为 jsdom 以模拟浏览器环境，setupFilesAfterEnv 加载 jest-dom 的扩展断言。

编写测试文件

假设有一个简单的 Button 组件：

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

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

export default Button;

为 Button 组件编写测试：

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

test('renders button with children', () => {
  render(<Button>Click me</Button>);
  expect(screen.getByText('Click me')).toBeInTheDocument();
});

test('calls onClick prop when clicked', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  fireEvent.click(screen.getByText('Click me'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

测试异步组件

对于异步组件，使用 waitFor 和 async/await：

// AsyncComponent.test.js
import React from 'react';
import { render, screen, waitFor } from '@testing-library/react';
import AsyncComponent from './AsyncComponent';

test('displays data after fetching', async () => {
  render(<AsyncComponent />);
  await waitFor(() => {
    expect(screen.getByText('Loaded data')).toBeInTheDocument();
  });
});

快照测试

Jest 支持快照测试，用于捕获组件渲染结果：

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

test('matches snapshot', () => {
  const { asFragment } = render(<Button>Click me</Button>);
  expect(asFragment()).toMatchSnapshot();
});

首次运行会生成快照文件，后续测试会比较当前渲染结果与快照是否一致。

模拟模块

使用 jest.mock 模拟外部模块：

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

jest.mock('./api', () => ({
  fetchData: jest.fn().mockResolvedValue('Mocked data'),
}));

test('displays mocked data', async () => {
  render(<ApiComponent />);
  expect(await screen.findByText('Mocked data')).toBeInTheDocument();
});

运行测试

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

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

运行测试：

npm test

通过以上方法，可以全面测试 React 组件的渲染、交互、异步逻辑和模块依赖。