Question

我的组件：

componentDidMount() {
    // Make HTTP reques with Axios
    axios.get(APIConfig.api_profile()).then((res) => {
        // Set state with result
        this.setState(res.data);
        console.log('I was triggered during componentDidMount')
        console.log(res)
    });
}

我的测试：

//@see https://github.com/ctimmerm/axios-mock-adapter
mock.onGet(APIConfig.api_profile()).reply(200, {
    "id_user": "1",
    "id_person": "1",
    "imageUrl": "",
    "email": "xyz@zyz.com",
    "name": "xyz xyz"
});

test('xyz', async() => {

    var ProfilePic2 =require('../../src/views/ProfilePic');
    const component = renderer.create(
        <ProfilePic/>
    );

    expect(component.state).toBeDefined();
    //tree.props.setProfile({})
    let tree = component.toJSON();
    await expect(tree).toMatchSnapshot();
});

问题是jest正在测试初始渲染，而我需要在收到API响应后对其进行测试。因此，它所比较的快照也基本上是空的。

我无法让测试等到第二次渲染之后。我只是尝试等待/异步，但无法让它工作。我可以看到我的api mocs是从控制台日志中调用的。

Answer 1

问题是，jest不会等待异步调用，请查看文档here。因此，如何解决这个问题的方法是让jest承担axios.get返回的承诺。如果你使用的东西只是在axios中嘲笑异步调用，这将不起作用。你必须模仿axios完成你的测试：

jest.mock('axios', ()=> ({get:jest.fn()}))

现在将axios导入到您的文件中时，它将获得一个get函数只是间谍的对象。为了实施间谍，它将返回一个你可以给予开玩笑的承诺，你必须将它导入你的测试：

import {get} from axios

现在在你的测试中创建一个已解决的承诺

test('xyz', async() = > {
  const p = Promise.resolve({
    data: {
      "id_user": "1",
      "id_person": "1",
      "imageUrl": "",
      "email": "xyz@zyz.com",
      "name": "xyz xyz"
    }
  })
  get.mockImplementation(() => p)
  var ProfilePic2 = require('../../src/views/ProfilePic');
  const component = renderer.create(
    <ProfilePic/>
  );
  expect(component.state).toBeDefined();
  //tree.props.setProfile({})
  let tree = component.toJSON();
  await p
  expect(tree).toMatchSnapshot();
});

顺便说一下。我不确定react-test-renderer是否会拨打componentDidMount，也许你必须转用酶。

如何在开玩笑测试中获得axios响应后重新渲染

1 个答案: