我有一个带有handleAdd
函数的组件。这个函数调用一个库,然后调用axios
并返回一个promise。一旦解决了这个问题,handleAdd()
方法就会更新组件状态,进而呈现child(ren)。
换句话说,它首先与服务器进行检查,以确保在本地显示项之前添加该项。
当用Jest测试时,我必须在expect运行之前等待几毫秒的睡眠,否则浅层渲染还没有更新,即使我模拟/覆盖API调用。在promise resolving、rerender和expect()之间有一些延迟。这是它的样子:
it('adds a thing', async () => {
ThingManager.default.addPlan = () => {
const response = new Promise((resolve, reject) => { resolve() })
return response;
}
const wrapper = shallow(<Home />)
wrapper.find('button').simulate('click')
const input = wrapper.find('#plan-title')
input.simulate('change', { target: { value: 'TEST ITEM' } })
await sleep(500) // without it, <Thing /> isn't rendered yet.
expect(wrapper.find('Thing').length).toBe(1)
});
做这件事的正确方法是什么?
3条答案
按热度按时间t5zmwmid1#
您可以从
test-utils
使用act
。这是React文档的建议,但我在testing-library
的waitFor
上取得了更大的成功。uhry853o2#
只是想把它扔在那里,我使用简单的
setTimeout
与jest的done()
的组合。编辑
ozxc1zmp3#
我不是一个酶用户,但我用笑话。下面是我使用@testing-library/react的方法。建议您不要直接查看状态,而是查看由设置的状态产生的标记。