如何使用Jest和Enzyme测试React容器组件中的API调用？

我来帮你一步步搞定这个测试问题，针对你这个发起API请求的SearchContainer组件，咱们用Jest+Enzyme来写测试用例，核心思路是Mock掉真实的fetch请求（避免调用线上API），然后验证组件的状态变化、方法调用和渲染逻辑是否符合预期。

第一步：准备依赖 #

首先确保你已经安装了必要的测试工具包：

npm install --save-dev jest enzyme enzyme-adapter-react-16 jest-fetch-mock
# 如果你用React 17+，换成@wojtekmaj/enzyme-adapter-react-17

然后在Jest配置文件（比如jest.config.js或package.json的jest字段）里，添加一个setup文件来初始化Enzyme和Mock fetch：

// jest.setup.js
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import fetchMock from 'jest-fetch-mock';

configure({ adapter: new Adapter() });
fetchMock.enableMocks();

第二步：编写测试用例 #

创建测试文件SearchContainer.test.js，咱们分几个核心场景来测试：

1. 验证组件初始状态

先确认组件挂载后，初始的articles状态是空数组：

import React from 'react';
import { shallow } from 'enzyme';
import SearchContainer from './SearchContainer';
import { API_KEY } from '../../../config';

describe('SearchContainer', () => {
  // 每次测试前重置fetch mock，避免用例间互相影响
  beforeEach(() => {
    fetch.resetMocks();
  });

  it('初始化时articles状态为空数组', () => {
    const wrapper = shallow(<SearchContainer />);
    expect(wrapper.state('articles')).toEqual([]);
  });
});

2. 测试API调用成功后的状态更新

模拟fetch返回成功数据，调用performSearch方法，验证状态是否正确更新：

it('调用performSearch后，成功获取数据并更新状态', async () => {
  // 模拟Guardian API的返回结构
  const mockArticles = [{ id: 1, webTitle: 'Test React Article' }, { id: 2, webTitle: 'Another Test Article' }];
  fetch.mockResponseOnce(JSON.stringify({
    response: { results: mockArticles }
  }));

  const wrapper = shallow(<SearchContainer />);
  // 这里假设你的performSearch实际接收的是搜索词（如果原代码里是event.target.value，就传{ target: { value: 'react' } }）
  await wrapper.instance().performSearch('react');

  // 验证状态是否更新为返回的文章列表
  expect(wrapper.state('articles')).toEqual(mockArticles);
  // 验证fetch是否用正确的参数调用
  expect(fetch).toHaveBeenCalledWith(
    `http://content.guardianapis.com/search?q=react&api-key=${API_KEY}`
  );
});

3. 验证组件渲染逻辑

确认组件正确渲染了Search子组件，并传递了正确的props：

it('渲染Search组件并传递articles props', () => {
  const mockArticles = [{ id: 1, webTitle: 'Test Article' }];
  const wrapper = shallow(<SearchContainer />);
  // 手动更新组件状态
  wrapper.setState({ articles: mockArticles });
  
  // 检查Search组件是否存在，且props正确
  expect(wrapper.find(Search).exists()).toBe(true);
  expect(wrapper.find(Search).props().articles).toEqual(mockArticles);
});

4. 测试API请求失败的场景（可选）

如果需要覆盖错误处理逻辑，可以模拟fetch请求失败：

it('API请求失败时，状态保持为空数组', async () => {
  fetch.mockRejectOnce(new Error('API Server Error'));
  
  const wrapper = shallow(<SearchContainer />);
  await wrapper.instance().performSearch('react');
  
  expect(wrapper.state('articles')).toEqual([]);
});

小提醒 #

你的代码里performSearch的参数是event，但API调用里直接用了event作为搜索词，这大概率是笔误——通常应该取event.target.value。如果是这样，测试时要传入模拟的event对象：

await wrapper.instance().performSearch({ target: { value: 'react' } });

内容的提问来源于stack exchange，提问作者jingteng