jest enzyme testing a component with async fetch to api - reactjs

Question

I'm using react, jest and enzyme with immutable. I'm trying to mount a component that fetching data from the API, and I'm having a little difficulties.
// 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} />
}
}
This is the ui component all it does is receive list and map them
// FooList.jsx
export default class FooList extends Component {
render() {
return (
<div>
{this.props.foos.map(item => <div>{item}</div>)}
</div>
);
}
}
Now I would like to test the data received from the fetch in FooListContainter is passed correctly to FooList.
// 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);
});
});
But the test fails because it expects the length to be 3 and it actual length is 0 from some reason.
I think that it has something to do with the fact that the fetch inside the container is async - so the test is not 'waiting' to the response and render is happening before the state change for the first time and the FooList receive an empty list.
I have tried to receive in the 'it' function an async callback as an argument and call it after the mount, like this:
// 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);
});
});
But the above example did not work.
I would really appreciate every help you could give me.