首次使用Enzyme/Jest测试React组件（Axios POST请求）求助

我帮你梳理下原来测试代码里的几个关键问题，它们直接导致了测试无法正常工作：

• 你模拟了axios.get，但组件实际调用的是axios.post
• 你调用了componentDidMount()，但你的Search组件根本没有实现这个生命周期方法
• 你期望state里有articles属性，但组件维护的是results字段
• 请求URL写的是'articles_url'，和组件里的API变量不匹配
• 异步测试的处理方式不够严谨，容易出现断言时机错误

下面是修正后的完整测试代码，我会逐部分解释关键调整：

修正后的测试代码 #

import React from 'react';
import { shallow } from 'enzyme';
import Search from './Search'; // 注意路径要和你的实际文件一致，原代码里的小写search可能需要改成大写Search
import axios from 'axios';

// 正确模拟axios的post方法，匹配组件里的调用逻辑
jest.mock('axios', () => ({
  post: jest.fn(() => 
    Promise.resolve({ 
      data: [ { title: 'test article', url: 'test url' } ] 
    })
  ),
}));

describe('Search Component', () => {
  it('should send POST request and update state when getInfo is called', async () => {
    const mockQuery = 'test query';
    const wrapper = shallow(<Search />);
    const instance = wrapper.instance();

    // 直接调用组件的getInfo方法触发请求
    await instance.getInfo(mockQuery);

    // 断言axios.post被正确调用
    expect(axios.post).toHaveBeenCalledTimes(1);
    expect(axios.post).toHaveBeenCalledWith('http://localhost:5000', { query: mockQuery });

    // 断言组件state里的results被更新为模拟的响应数据
    expect(wrapper.state('results')).toEqual([ { title: 'test article', url: 'test url' } ]);
  });

  it('should call getInfo when query length is >1 and even in handleInputChange', async () => {
    const wrapper = shallow(<Search />);
    const instance = wrapper.instance();
    // 模拟getInfo方法，方便后续断言调用情况
    instance.getInfo = jest.fn();

    // 给组件的search ref赋值，模拟输入框的内容
    instance.search = { value: 'test' }; // 长度为4，满足>1且偶数的条件

    // 调用输入框的change处理函数
    instance.handleInputChange();

    // 等待setState的异步回调执行完成
    await new Promise(resolve => setImmediate(resolve));

    // 断言getInfo被正确调用，参数为输入框的值
    expect(instance.getInfo).toHaveBeenCalledWith('test');
  });
});

关键修正点说明 #

1. 匹配Axios调用方式：
   组件里用的是axios.post，所以我们模拟post方法，并且返回的Promise要resolve成包含data属性的对象（因为组件里解构了({ data })）。

2. 移除无效的生命周期调用：
   你的Search组件没有实现componentDidMount，所以直接调用instance.getInfo()来触发请求逻辑。

3. 用async/await处理异步：
   异步测试用async/await比done回调更清晰，能确保等待Promise完成后再执行断言，避免时机错误。

4. 对齐组件的state和请求参数：
   组件里的state字段是results，请求URL是http://localhost:5000，请求体是{ query: mockQuery }，这些都和组件代码严格对应。

5. 覆盖交互逻辑：
   额外添加了测试handleInputChange的逻辑，验证当输入内容符合条件时，会正确触发getInfo，覆盖了组件的用户交互场景。

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