Ajaxの後でレンダリングされるテストリアクトコンポーネント（Jest＆Enzyme）

Question

Ajaxコールが成功した後で、<Loading />が完了した後で、レンダリングされた場合、コンポーネントをテストするにはどうすればよいでしょうか？

私はJest and Enzymeを使用しています。ただし、Enzymeでは、スナップショットはAjax呼び出し後の最終的なレンダリング状態ではなく、読み込みコンポーネントを持つPersonになります。私は私のAjaxコールを嘲笑する必要がありますが、それは擬似で何のように見えるでしょうし、その後スナップショットを取る？

class Person extends Component { 
... 
    componentWillMount() { 
    // ajax call to person data, including ID 
    // on successful Ajax completion, set state.personID and other values, etc. 

    axios.get('.../person', { 
     params: { 
     AltID: 12345 
     } 
    }).then(function (response) { 
     this.setState({personID: response.data.personID,...}); 

    }).catch(function (error) { 
     ... 
    }); 
    } 

    render() { 
     if (!this.state.personID) { 
     return (
      <div className="App"> 
      <Loader /> 
      </div>); 
     } 
     return (
     <div className="App"> 
      ... 
      Person ID: {{this.state.personID}} 
      ... 
     </div> 
    ); 
    } 
} 

酵素スナップショットテスト（飾る必要があります）：テストでthis.setState({personID: value})の設定など

describe('Person',() => { 
    it('renders correctly',() => { 
    const rendered = renderer.create(<Person />); 
    expect(rendered.toJSON()).toMatchSnapshot(); 
    }); 
}); 

最後に、そのような周りの作業は、実際の未発表のシナリオでは、私は以来、探しされるものではありませんcomponentWillMountは、Ajax呼び出しを実行してユーザーを認証します。現在、エラーページにプッシュされています。

Answer 1

apiコールをhttps://facebook.github.io/jest/docs/en/tutorial-async.htmlにすることも、2つのテストを行うこともできます.1つは条件がTrue、もう1つは条件がFalseです。あなたのAPI呼び出しは状態をある状態から別の状態に変更するだけです。状態に応じてすべてが正しくレンダリングされているかどうかをテストする必要があります。

例：先端のための

test('the data is peanut butter', done => { 
    function callback(data) { 
    expect(data).toBe('peanut butter'); 
    done(); 
    }W 

    fetchData(callback); 
});