反応成分内のJest模擬非同期呼び出し

Question

私はjest/enzymeには新しく、Promiseを返すaync関数への呼び出しを嘲笑しようとしています。この呼び出しは、componentDidMountメソッドの反応コンポーネント内で行われます。

テストでは、componentDidMountがPromiseが返す配列を状態で設定するかどうかをテストしようとしています。

問題は、テストが完了し、配列が状態に追加される前に通過することです。私は約束が解決するまでテストを待つために 'done'コールバックを使用しようとしていますが、これはうまくいかないようです。

私はdone（）呼び出しの前に行へのexpect呼び出しを移動しようとしましたが、どちらもうまくいかないようです。

誰でも私がここで間違っていることを教えてもらえますか？

テストされているコンポーネント：

componentDidMount() { 
    this.props.adminApi.getItems().then((items) => { 
    this.setState({ items}); 
    }).catch((error) => { 
    this.handleError(error); 
    }); 
} 

私のテスト：

import React from 'react'; 
    import { mount } from 'enzyme'; 
    import Create from '../../../src/views/Promotion/Create'; 

    import AdminApiClient from '../../../src/api/'; 
    jest.mock('../../../src/api/AdminApiClient'); 

    describe('view',() => { 

     describe('componentDidMount',() => { 

     test('should load items into state', (done) => { 
      const expectedItems = [{ id: 1 }, { id: 2 }]; 

      AdminApiClient.getItems.mockImplementation(() => { 
      return new Promise((resolve) => { 
       resolve(expectedItems); 
       done(); 
      }); 
      }); 

      const wrapper = mount(
      <Create adminApi={AdminApiClient} /> 
     ); 

      expect(wrapper.state().items).toBe(expectedItems); 
     }); 

     }); 
    }); 

Answer 1

テストには二つの問題があります。まずはモックAdminApiClientのようなモットーをこのようにしないでください。 jest.mockはundefinedとモジュールを置き換えますので、getItems.mockImplementationは効果がないか、エラーが発生します。また、元のものを使用する必要はありません。あなたが小道具を介して議論としてそれを渡すときには、あなたはテストですぐに模擬を作成することができます。第二に、あなたが約束して作業する場合、あなたのいずれかがあなたのテストからの約束を返すか、async/await（docs）を使用する必要があります。説明のため

it('', async() = > { 
    const expectedItems = [{ id: 1 }, { id: 2 }]; 
    const p = Promise.resolve(expectedItems) 
    AdminApiClient = { 
    getItems:() = > p 
    } 
    const wrapper = mount(
    <Create adminApi={AdminApiClient} /> 
); 
    await p 
    expect(wrapper.state().items).toBe(expectedItems); 
})