Reactjs jest使用异步获取api测试组件

我用react，jest和酵素来表示不可变。我正在尝试挂载一个从API获取数据的组件，但遇到了一些困难

// FooListContainer.jsx

export default class FooListContainer extends Component {
    constructor(props) {
        super(props);

        this.state = {
           foos: List()
        }
    }

    componetWillMount() { 
        manager.bringFooList()
        .then(lst => this.setState({ foos: fromJS(lst) }))
        .done();
    }

    render() {
        return <FooList foos={this.state.foos} />
    }
}

//foulistcontainer.jsx
导出默认类容器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
foos:List（）
}
}
componewillmount（）{
manager.bringFooList（）
.then（lst=>this.setState（{foos:fromJS（lst）}））
.完成（）；
}
render（）{
返回
}
}

这是ui组件，它所做的只是接收列表并映射它们

// FooList.jsx

export default class FooList extends Component {
    render() {
        return (
           <div>
               {this.props.foos.map(item => <div>{item}</div>)}
           </div>
        );
    }
}

//dublist.jsx
导出默认类扩展组件{
render（）{
返回(
{this.props.foos.map（item=>{item}}
);
}
}

现在，我想测试从Fatch-in-DouglistContainer接收到的数据是否正确地传递给了Douglist

// FooListContainer.test.jsx

describe('rendering', () => {
    it('Should passed the data from the fetch to the FooList', () => {
        const response = ['1', '2', '3'];

        manager.bringFooList = jest.fn(() => {
           return new Promise(resolve => {
               return resolve(response);
           });
        })

        const wrapper = mount(<FooListContainer />);

        const fooList = wrapper.find(FooList);

        expect(fooList.props().foos.size).toBe(3);
    });
});

//foulistcontainer.test.jsx
描述（'呈现'，（）=>{
它（'应该将数据从提取传递给傻瓜'，（）=>{
常量响应=['1'，'2'，'3']；
manager.bringFooList=jest.fn（（）=>{
返回新承诺（解决=>{
返回解析（响应）；
});
})
const wrapper=mount（）；
const愚人=wrapper.find（愚人）；
expect（愚人主义者.props（）.foos.size）.toBe（3）；
});
});

但是测试失败了，因为它期望长度为3，而由于某种原因，实际长度为0

我认为这与容器内的获取是异步的这一事实有关——因此测试并不是“等待”响应，而是在状态第一次改变并且傻瓜收到一个空列表之前进行渲染

我尝试在“it”函数中接收异步回调作为参数，并在装载后调用它，如下所示：

// FooListContainer.test.jsx

describe('rendering', () => {
    it('Should passed the data from the fetch to the FooList', (done) => {
        const response = ['1', '2', '3'];

        manager.bringFooList = jest.fn(() => {
           return new Promise(resolve => {
               return resolve(response);
           });
        })

        const wrapper = mount(<FooListContainer />);
        done();

        const fooList = wrapper.find(FooList);

        expect(fooList.props().foos.size).toBe(3);
    });
});

//foulistcontainer.test.jsx
描述（'呈现'，（）=>{
它（'应该将数据从提取传递给愚人'，（完成）=>{
常量响应=['1'，'2'，'3']；
manager.bringFooList=jest.fn（（）=>{
返回新承诺（解决=>{
返回解析（响应）；
});
})
const wrapper=mount（）；
完成（）；
const愚人=wrapper.find（愚人）；
expect（愚人主义者.props（）.foos.size）.toBe（3）；
});
});

但是上面的例子不起作用。

---

我非常感谢您能给我的一切帮助。

我在异步调用方面也遇到了同样的问题。你真的解决了这个问题吗？是的，我能够模仿这个承诺，在组件上使用async和awiat解决了这个问题