在玩笑测试中获得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();
});

问题在于玩笑是在初始渲染上进行测试，而我需要在收到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.

推荐答案

问题是玩笑不等待异步调用，请看文档

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函数只是一个间谍.要实施间谍程序，它将返回您可以开玩笑的承诺，您必须将其导入测试中:

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屋！