如何在 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 的函数无法访问时，应将其返回的 Promise 链接起来以避免竞争条件。由于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'])

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

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

那么它可以被测试为：

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