[object Object]

核心概念

集成测试验证多个模块协同工作的正确性，重点关注：

接口交互：模块间API调用和数据传输
状态共享：全局状态管理（如Redux）
副作用处理：网络请求和本地存储

Jest 配置


module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/test/setupTests.js'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  coverageDirectory: './coverage',
  collectCoverageFrom: ['src/**/*.{js,jsx}']
};

API测试示例


import { server } from '../mocks/server';

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('获取用户数据', async () => {
  const response = await fetch('/api/user');
  const data = await response.json();
  expect(data).toMatchObject({
    id: 1,
    name: '测试用户'
  });
});

组件集成测试


import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import LoginForm from '@components/LoginForm';

// 模拟React Query
jest.mock('react-query', () => ({
  useMutation: () => ({
    mutate: jest.fn(),
    isLoading: false
  })
}));

test('表单提交流程', async () => {
  render(<LoginForm />);
  
  await act(async () => {
    userEvent.type(screen.getByLabelText('用户名'), 'testuser');
    userEvent.type(screen.getByLabelText('密码'), 'password123');
    userEvent.click(screen.getByRole('button', { name: '登录' }));
  });

  expect(screen.getByText('正在提交...')).toBeInTheDocument();
});

执行命令


# 安装依赖
pnpm add -D jest @testing-library/react @testing-library/user-event
 
# 运行测试
pnpm test:integration