如何在 axios 调用中更新状态时在单元测试（React JS）中断言状态？

Question

嗨，我在 axios 调用更新时在单元测试用例中断言状态时遇到问题。这是我的 axios 调用

import axios from 'axios'
getData = () => {
    axios.get('/events/sept/week2/1097338')
        .then(res =>{
            if(res.status == 200){
                let resposne = res.data.resposne
                this.setState({weekData:response})
            }
        })
        .catch(error => {console.log(error)})
}

这是我的测试用例

test("test axios for week data",() => {
    const mock = new MockAdapter (axios)
    mock.onGet('/events/sept/week2/1097338').reply(200,{response:['raspberry']})
    const wrapper = shallow(<Component/>)
    wrapper.instance().getData()
    expect(wrapper.state('weekData')).toBe(['raspberry'])
})

当我调用时，状态 weekData 正在组件中更新 wrapper.instance().getData()，我已经检查过了。它没有在包装器中更新，我的断言失败了：预期：['raspberry']，收到：[]。如何在包装器中更新状态我已经尝试过 setTimeout 但没有用

Answer 1

当无法访问调用 Axios 的函数时，应承诺 returns 应将其链接以避免竞争条件。由于MockAdapter没有具体规定，所以需要另外做：

const wrapper = shallow(<Component/>)
jest.spyOn(axios, 'get');
wrapper.instance().getData()
expect(axios.get).toBeCalledTimes(1);
await axios.get.mock.results[0].value;
expect(wrapper.state('weekData')).toBe(['raspberry'])

对于可直接访问的函数，承诺它 returns 可以链接。 getData 是一种反模式，因为它包含无法链接的松散承诺。应该是：

getData = () => {
    return axios.get('/events/sept/week2/1097338')
    ...

那么可以测试为：

const wrapper = shallow(<Component/>)
await wrapper.instance().getData()
expect(wrapper.state('weekData')).toBe(['raspberry'])

如何在 axios 调用中更新状态时在单元测试（React JS）中断言状态？

How to assert state in unit test (React JS) while state is updating in axios call?

unit-testing

reactjs

jestjs

enzyme

axios