当前位置：首页 > React

react如何测试

2026-01-07 12:48:45React

React 测试方法

React 应用的测试通常涉及组件测试、集成测试和端到端测试。以下是常用的测试工具和方法：

Jest

Jest 是 Facebook 开发的 JavaScript 测试框架，适合用于 React 组件的单元测试和快照测试。

安装 Jest：

npm install --save-dev jest @types/jest

示例测试代码：

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

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

React Testing Library

React Testing Library 提供更接近用户视角的测试方式，鼓励测试组件的行为而非实现细节。

安装：

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

示例测试：

react如何测试

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

test('submits form with email and password', () => {
  const handleSubmit = jest.fn();
  const { getByLabelText, getByText } = render(
    <LoginForm onSubmit={handleSubmit} />
  );

  fireEvent.change(getByLabelText(/email/i), {
    target: { value: 'user@example.com' }
  });
  fireEvent.change(getByLabelText(/password/i), {
    target: { value: 'password123' }
  });
  fireEvent.click(getByText(/submit/i));

  expect(handleSubmit).toHaveBeenCalledWith({
    email: 'user@example.com',
    password: 'password123'
  });
});

Enzyme

Enzyme 是 Airbnb 开发的 React 测试工具，提供更多操作组件内部的方法（不推荐用于新项目）。

安装：

npm install --save-dev enzyme enzyme-adapter-react-16

示例测试：

import { shallow } from 'enzyme';
import Component from './Component';

describe('Component', () => {
  it('renders three buttons', () => {
    const wrapper = shallow(<Component />);
    expect(wrapper.find('button')).toHaveLength(3);
  });
});

Cypress

Cypress 是端到端测试框架，适合测试整个应用的工作流程。

react如何测试

安装：

npm install --save-dev cypress

示例测试：

describe('Login', () => {
  it('should log in successfully', () => {
    cy.visit('/login');
    cy.get('#email').type('user@example.com');
    cy.get('#password').type('password123');
    cy.get('form').submit();
    cy.url().should('include', '/dashboard');
  });
});