异步 componentDidMount 时使用 React 的 Jest 和 Enzyme 进行测试

IT技术 reactjs typescript jestjs enzyme
2021-05-18 05:55:09
  • react：16.3.0-alpha.1
  • 开玩笑：“22.3.0”
  • 酶：3.3.0
  • typescript：2.7.1

代码：

class Foo extends React.PureComponent<undefined,undefined>{
   bar:number;
   async componentDidMount() {
     this.bar = 0;
     let echarts = await import('echarts'); // async import
     this.bar = 100;
   }
}

测试：

describe('...', () => {
  test('...', async () => {
    const wrapper = shallow(<Foo/>);
    const instance = await wrapper.instance();
    expect(instance.bar).toBe(100);
  });
});

错误：

Expected value to be:
  100
Received:
  0
4个回答

解决方案：

1：使用 async/await 语法。

2：使用mount（不浅）。

3：等待异步组件生命周期。

例如： 

    test(' ',async () => {
      const wrapper = mount(
         <Foo />
      );
      await wrapper.instance().componentDidMount();
    })

这样的事情应该对你有用：-

 describe('...', () => {
   test('...', async () => {
     const wrapper = await mount(<Foo/>);
     expect(wrapper.instance().bar).toBe(100);
   });
 });

试试这个：

it('should do something', async function() {
  const wrapper = shallow(<Foo />);
  await wrapper.instance().componentDidMount();
  app.update();
  expect(wrapper.instance().bar).toBe(100);
});

这里提供的解决方案都没有解决我的所有问题。最后我发现https://medium.com/@lucksp_22012/jest-enzyme-react-testing-with-async-componentdidmount-7c4c99e77d2d解决了我的问题。

概括

function flushPromises() {
    return new Promise(resolve => setImmediate(resolve));
}

it('should do someting', async () => {
    const wrapper = await mount(<Foo/>);
    await flushPromises();

    expect(wrapper.instance().bar).toBe(100);
});
其它你可能感兴趣的问题
上一篇通过网络共享打印机 下一篇如何在react中删除新的 firebase onAuthStateChanged 侦听器