Jestは、すべての非同期コードがアサーションを期待する前に実行を終了するのを待ちます。

Question

Reactアプリケーション用の統合テスト、つまり多くのコンポーネントを一緒にテストするテストを作成しています。 。

問題は、非同期コールバックが実行される前にテストが実行されているように見えるため、テストが失敗することがあります。

とにかくこの周辺にはありますか？どうやら、コール非同期コードが終了するのを待つことはできますか？

ここにいくつか悪いです私のポイントを説明する擬似コードです。

私はParentをマウントするときに、子コンポーネントが外部サービスから返されたコンテンツをレンダリングすることをテストしたいと思います。

class Parent extends component 
{ 
    render() 
    { 
     <div> 
      <Child /> 
     <\div> 
    } 
} 
class Child extends component 
{ 
    DoStuff() 
    { 
     aThingThatReturnsAPromise().then((result) =>{ 
      Store.Result =result 
     }) 
    } 

    render() 
    { 
     DoStuff() 
     return(<div>{Store.Result}</div>) 


    } 
} 
function aThingThatReturnsAPromise() 
{ 
    return new Promise(resolve =>{ 
      eternalService.doSomething(function callback(result){ 
       resolve(result) 
      } 
    } 

} 

私は私のテストでこれを行うときには、コールバックが発射される前に実行し得るので、それは失敗します。

jest.mock('eternalService',() => { 
    return jest.fn(() => { 
     return { doSomething: jest.fn((cb) => cb('fakeReturnValue'); 
}); 

describe('When rendering Parent',() => { 
    var parent; 

    beforeAll(() => { 
     parent = mount(<Parent />) 
    }); 

    it('should display Child with response of the service',() => { 
     expect(parent.html()).toMatch('fakeReturnValue') 
    }); 
}); 

これはどのようにテストしますか？私はangularjをzonejsで解決することを理解していますが、Reactには同等のアプローチがありますか？

Answer 1

あなたが探しているものを達成するために、リアクションにネイティブなものは知らない。

しかし、セットアップが完了した後にbeforeAll（）の@doneを呼び出すことで、これを同様のコードで実行できました。以下のコードに変更を参照してください。

let setupComplete; 
 
jest.mock('eternalService',() => { 
 
    return jest.fn(() => { 
 
     return { doSomething: jest.fn((cb) => { cb('fakeReturnValue'); setupComplete(); }) }; 
 
}); 
 
. 
 
. 
 
. 
 
    beforeAll(done => { 
 
     parent = mount(<Parent />) 
 
     setupComplete = done; 
 
    }); 
 
});

を私はそれらを使用していないが、潜在的な関心の冗談のrunAllTicksとrunAllImmediatesで決してきました。