jest java api_jest酶测试一个组件，异步提取到api

我正在使用反应，开玩笑和酶与不可变的 . 我正在尝试安装从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

}

}

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

// FooList.jsx

export default class FooList extends Component {

render() {

return (

{this.props.foos.map(item =>

{item}

)}

);

}

}

现在我想测试从FooListContainter中的fetch接收的数据是否正确传递给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();

const fooList = wrapper.find(FooList);

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

});

});

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

我认为它与容器内的提取是异步的事实有关 - 所以测试不是'等待'响应并且渲染在第一次状态改变之前发生并且FooList接收空列表 .

我试图在'it'函数中接收异步回调作为参数并在mount之后调用它，如下所示：

// 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();

done();

const fooList = wrapper.find(FooList);

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

});

});

但上面的例子没有用 . 我非常感谢你能给我的每一个帮助 .