前端测试：Jest与React测试实战

大家好，我是欧阳瑞（Rich Own）。今天想和大家聊聊前端测试这个重要话题。作为一个全栈开发者，测试是保障代码质量的关键。今天就来分享一下Jest和React测试的实战经验。

为什么需要前端测试？

Jest入门

安装Jest

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

配置Jest

{
  "jest": {
    "testEnvironment": "jsdom",
    "transform": {
      "^.+\\.tsx?$": "ts-jest"
    },
    "moduleFileExtensions": ["ts", "tsx", "js", "jsx"],
    "setupFilesAfterEnv": ["<rootDir>/setupTests.ts"]
  }
}

基本测试

// sum.test.js
function sum(a, b) {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

React测试

安装依赖

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

组件测试

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

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>);
    const button = screen.getByRole('button');
    expect(button).toBeInTheDocument();
    expect(button).toHaveTextContent('Click me');
  });

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

异步测试

// UserList.test.jsx
import { render, screen, waitFor } from '@testing-library/react';
import UserList from './UserList';

describe('UserList', () => {
  it('loads and displays users', async () => {
    render(<UserList />);
    
    await waitFor(() => {
      const users = screen.getAllByRole('listitem');
      expect(users).toHaveLength(3);
    });
  });
});

Mock测试

// api.test.js
import axios from 'axios';
import { fetchUsers } from './api';

jest.mock('axios');

describe('fetchUsers', () => {
  it('fetches users successfully', async () => {
    const mockUsers = [{ id: 1, name: 'Alice' }];
    axios.get.mockResolvedValue({ data: mockUsers });
    
    const users = await fetchUsers();
    
    expect(axios.get).toHaveBeenCalledWith('/api/users');
    expect(users).toEqual(mockUsers);
  });
});

测试覆盖率

npm test -- --coverage

总结

前端测试是保障代码质量的重要手段。通过Jest和React Testing Library，可以编写高质量的测试用例。

我的鬃狮蜥Hash对测试也有自己的理解——它总是先测试蟋蟀是否安全才会食用，这也许就是自然界的"测试驱动开发"吧！

如果你对前端测试有任何问题，欢迎留言交流！我是欧阳瑞，极客之路，永无止境！

技术栈：Jest · React Testing Library · 前端测试