在使用Jest测试之前等待React组件状态更新

bvn4nwqk 于 2023-09-28 发布在 Jest

关注(0)|答案(3)|浏览(142)

我有一个带有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)
  });

做这件事的正确方法是什么？

jestjs

来源：https://stackoverflow.com/questions/63326272/waiting-for-react-component-state-to-update-before-testing-with-jest

3条答案

按热度按时间

t5zmwmid1#

您可以从test-utils使用act。这是React文档的建议，但我在testing-library的waitFor上取得了更大的成功。

赞(0）回复(0）举报 2023-09-28

uhry853o2#

只是想把它扔在那里，我使用简单的setTimeout与jest的done()的组合。

编辑

it('sample test case', (done) => {
        // initialize your component

        setTimeout(function () {
            // expect something that's available after the timeout
            done();
        }, 500);
    });

赞(0）回复(0）举报 2023-09-28

ozxc1zmp3#

我不是一个酶用户，但我用笑话。下面是我使用@testing-library/react的方法。建议您不要直接查看状态，而是查看由设置的状态产生的标记。

const view = render(<Thing />);
const input = await screen.findByTestId('input-test-id');
fireEvent.change(input, {
  target: {value: 'new value'},
});
// This element is then displayed as a result of the state getting set
// resulting from the change event. screen.findByTestId (or any screen.find*) waits for 
// the element to appear timing out if it does not.
expect(await screen.findByTestId('logo-image-test-id')).toBeDefined();

赞(0）回复(0）举报 2023-09-28

我来回答

在使用Jest测试之前等待React组件状态更新

3条答案

相关问题

热门标签

最新问答