如何在玩笑测试中获得 axios 响应后重新渲染 [英] how to re-render after getting axios response in jest test

问题描述

我的组件:

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": "[e-mail]",
    "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 响应后对其进行测试.因此，它所比较的​​快照也大多为空.

The problem is that jest is testing on initial render while I need to test it after a API response is received. Therefore the snapshot that it is comparing to is also mostly empty.

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

I am not able make the test wait till after the second render. I am just trying await/async but cannot get it to work. I can see my api mocs was called from the console log.

推荐答案

问题是 jest 不等待异步调用，查看文档 此处.所以你如何解决这个问题的方法是给 jest axios.get 返回的承诺.如果您使用的东西只是模拟 axios 中的异步调用，这将不起作用.你必须像这样模拟 axios 完成你的测试:

The problem is that jest does not wait for async calls, have a look at the docs here. So the way how can you solve this is to give jest the promise that axios.get returns. This will not work if you use something that just mocks the async call inside axios. You have to mock axios complete out of your test like this:

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

现在，当将 axios 导入您的文件时，它将获得一个对象，其中 get 函数只是一个间谍.为了实现 spy，它会返回一个你可以给 jest 的承诺，你必须将它导入到你的测试中:

now when importing axios into your file it will get an object where the get function is just a spy. To implement the spy so it will return a promise that you can give to jest you have to import it into your test:

import {get} from axios

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

now in your test create a resolved promise

test('xyz', async() = > {
  const p = Promise.resolve({
    data: {
      "id_user": "1",
      "id_person": "1",
      "imageUrl": "",
      "email": "[e-mail]",
      "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，也许你必须切换到酶.

Btw. I'm not sure if react-test-renderer will call componentDidMount, maybe you have to switch to enzyme.

这篇关于如何在玩笑测试中获得 axios 响应后重新渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！