Jestを使ってReact rendered非同期データをテストするには？

Question

私はレンダリングにはReactを、テストにはJest/Jasmineを使用しています。私は古いJest/Jasmine waitsForとrunsを使用してテストを書いていますが、これはJasmine 2になりました。新しいdone asyncsと置き換える方法がわかりません。

私のコードでReactは、ユーザーについて小さなページをレンダリングします。そのページには、ユーザー投稿を取得するためのAJAX呼び出しがあります。私はユーザーの投稿がうまく戻ってきたことをテストしたいと思います。waitsForは非常にうまくいきました。ユーザーが投稿をするまで待ってから続行してください。

Jestテストの中でAJAXコールを使用することについて話している人がたくさんいます。これは私が望んでいないものです。 My JestテストではAJAX呼び出しが行われているかどうかわからないため、結果が返るまで待つ方法が必要です。ここで

はwaitsForとrunsと私の現在のコードです：

it('loads user post',() => { 
    var page = TestUtils.renderIntoDocument(
     <UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} /> 
    ); 

    waitsFor(() => { 
     return page.state.posts.length > 0; 
    }, "post loaded", 10000); 

    runs(() => { 
     var posts = TestUtils.scryRenderedDOMComponentsWithClass(page, 'post'); 
     expect(posts.length).toEqual(10); 
    }); 
}); 

どのように私はwaitsForとrunsを削除し、作品ジャスミン2.0のコードで置き換えることができますか？すべてのJestテストの知識では、page.state.posts.lengthは0より大きくなければならず、expect何かを入力する必要があります。

Answer 1

このテストを2つの単体テストにリファクタリングして、コードをより厳密にテストする必要があります。テストを互いに独立させ、より洗練された範囲でエラーを特定するのに役立ちます。

it('generates the expected properties for a page', function() { 
    var page = TestUtils.renderIntoDocument(
     <UserPage params={{user: 'fizzbuzz', 'pass': 'xxx'}} /> 
    ); 

    expect(page.someProperty).toBeDefined(); 
    expect(page.user).toEqual('fizzbuzz'); 
}); 

it('generates the correct number of posts from a given page object', function() { 
    var fakePage = { 
     // put your fake mock data here that TestUtils expects 
    }; 

    var posts = TestUtils.scryRenderedDOMComponentsWithClass(fakePage, 'post'); 

    expect(posts.length).toEqual(10); 
}); 

私はあなたのrenderIntoDocument関数内で何が起こっているのかあまりわからない - これらは、私はあなたのコードがどのようなものであるかを知っているが、ここで私が見ることを期待する線に沿って何かしていないと正確ではありません一番上のテストは少し壊れているかもしれません...関数の中であまりにも多くのことが起こっているように見えるか、関数が代わりに行う呼び出しをテストする必要があります。あなたが何をしているのか詳しく説明するなら、私は答えを編集します。