2

私は仕事のためにしばらくの間 React で開発を行ってきましたが、最近、Istanbul を使用して、いくつかのアプリケーションを ~100% のテスト カバレッジにするように依頼されました。過去数日間で、このアプリケーションだけで 160 以上のテストを作成しましたが、コードの特定の部分をカバーできませんでした。AJAX 呼び出し、setTimeout コールバック、および別のコンポーネントが適切に動作する必要があるコンポーネント メソッドをカバーするのに最も苦労しています。私はいくつかのSOの質問を無駄に読んだことがありますが、それは私がこれに間違って取り組んでいるためだと思います。Enzyme、Chai アサーション、Mocha、Istanbul カバレッジ、スパイ用の sinon を使用していますが、sinon fakeServer が機能しないため、nock を検討していました。

問題のコンポーネントメソッドは次のとおりです。

_getCategoriesFromServer() {
const _this = this;
sdk.getJSON(_this.props.sdkPath, {
    itemsperpage: 10000
}).done(function(data) {
    _this.setState({
        isLoaded: true,
        categories: _this.state.categories.concat(data)
    });
});

}

そのコンポーネントのテストは次のとおりです。

 it('should call _getCategoriesFromServer', () => {
    sinon.spy(CategoryTree.prototype, '_getCategoriesFromServer');
    wrapper = mount(<CategoryTree {...props} />);
    expect(CategoryTree.prototype._getCategoriesFromServer.calledOnce).to.be.true;
});

SDK は、getJSON を使用して jQuery API 呼び出しを構築する単なるモジュールです。私のテストは関数呼び出しをカバーしていますが、ここに見られる .done コールバックはカバーしていません:ここに画像の説明を入力 私の質問は、.done を適切にテストするにはどうすればよいですか? コンポーネントメソッドを適切にテストする方法を説明する記事、チュートリアル、ビデオなどを誰かが持っていれば、本当に感謝しています!

2 番目の質問は、prop として子コンポーネントに渡されるメソッドをテストするにはどうすればよいですか? テスト範囲の要件により、そのメソッドをテストする必要がありますが、その唯一の目的は、onClick として使用される子コンポーネントに渡されることです。これは問題ありませんが、その onClick は、子コンポーネントでデータを返す別の AJAX 呼び出しに依存しています。私の最初の衝動は、酵素 .find を使用してその onClick を見つけてクリック イベントをシミュレートすることでしたが、AJAX 呼び出しがテスト環境でデータを返さなかったため、その onClick を持つ要素はそこにありません。ここまで読んでくれたなら、私はあなたに敬意を表します。そして、あなたが助けることができれば、私は感謝します!

4

1 に答える 1