时间戳

首页 > 解决方案 > 在使用 Jest 进行测试之前等待 React 组件状态更新

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

问题描述

我有一个具有handleAdd功能的组件。该函数调用一个库，该库依次调用axios并返回一个 Promise。一旦解决了这个问题，该handleAdd()方法就会更新组件状态，进而呈现 child(ren)。

换句话说，它首先与服务器进行检查，以确保在本地显示之前添加了该项目。

使用 Jest 进行测试时，我必须在期望运行之前等待睡眠几毫秒，否则即使我模拟/覆盖了 api 调用，浅渲染也没有更新。承诺解决、重新渲染和期望（）之间有一些延迟。这就是这种情况：

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)
  });

这样做的正确方法是什么？

标签： javascriptreactjsunit-testingjestjsenzyme

解决方案

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

推荐阅读