web-dev-qa-db-ja.com

非同期コンポーネントの場合のReactのJestとEnzymeによるテスト

  • 反応：16.3.0-alpha.1
  • jest： "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
reactjstypescriptjestjsenzyme
11
Whj

溶液：

1：async/await構文を使用します。

2：マウントを使用します（浅くない）。

3：非同期コンポーネントのライフサイクルを待ちます。

例：

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

このような何かがあなたのために働くはずです：-

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

これを試して：

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

また、テストでは非同期を実装する必要があります。
例：

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