現在、Jest テストを React アプリケーションに追加しようとしています (ここにあります)。

ただし、次のテストを実行すると、

次のエラーが表示されます。

私のアプリとCategoryPageコンポーネントの両方が、react-router を明確に使用しています。CategoryPage には、認証に react-router を使用する mixin が含まれています。私自身のデバッグに基づいて、JestmakeHrefがナビゲーション用の react-router の組み込みメソッドの 1 つである を呼び出そうとすると、エラーが発生することがわかりました。

これを修正するために、最初に を呼び出してみjest.dontMock('react-router')ましたが、効果はありませんでした。問題は、 をモックしないことによってCategoryPage、 jest がそのすべての依存関係をモックなしで自動的かつ不可逆的にインクルードすることです。

この問題の解決が非常に難しい理由の 1 つは、React で Jest を使用しているほとんどの人がコンポーネントをテストしていないように見えるためです。これは、テストに重点を置いていないか、Flux を使用してストア、ディスパッチャーなどのテストのみを行っているためです。まだ Flux を使用していないため、これはオプションではありませんが、将来的に移行する必要があるかもしれません。

編集 1: を削除するとjest.dontMock('../js/components/CategoryPage.jsx')テストに合格しますが、そのコンポーネントの機能を実際にテストすることはできません。

編集2:除外するjest.dontMock('jquery')と、モーダルの作成に使用するミックスインに関連する別のエラーが発生します:

EDIT 3:バグをreact-routerのNavigation mixinに分離したように見えますthis.context.makeHref。React チームはthis.contextバージョン .9 以降非推奨になっているため、これが問題の原因である可能性があると思います。したがって、回避策または修正this.contextは大歓迎です。

submitReact、TestUtils、および Jest を使用してフォーム イベントをテストできません。

<form>DOM 要素をレンダリングするコンポーネントがあります。同じコンポーネントには、onSubmitイベントを処理してステートメントをログに記録するメソッドもあります。onSubmit私の目標は、ハンドラーをモックし、それが呼び出されたことをアサートすることです。

フォームコンポーネント.cjsx

__tests__/test-form-component.coffee

関連する質問:

• Jest を使用して React コンポーネントの機能をテストする
• Jest および React JS TestUtils を使用してフォームをテストする

Jest を使用して、CoffeeScript + React jsx で記述された React コンポーネントをテストするにはどうすればよいですか?

Jest で提供される唯一の CoffeeScript の例はプレーンな CoffeeScript を使用しており、CoffeeScript + React JSX では機能しません (a に達すると構文エラーになります<)。

私が試したこと

最初の試行: execSync

これは機能しますが、時間がかかりすぎます (ダミー テストでは 12 秒が適切です)。

それから私は試しました：

2 回目の試行: coffee-react-transform

これにより、次のような奇妙なエラーがスローされます。

TypeError: function() {...} にはメソッド「getPooled」がありません

「メソッド 'getPooled' がありません」に対する唯一の Google の結果は、この gistです。これは、私が取得したエラーを正確に示していますが、他の洞察は提供していません。

3 回目の試み

私はcoffee-reactifyを使用できると思いますが、非同期のストリームを返しますが、process関数preprocess.jsは同期的に使用され、これまでのところ、ストリームを同期的に読み取る方法は見つかりませんでした。

私に何ができる？

jQueryを使用してイベントをトリガーする非常に単純なReact mixinがあります

これは、browserify を使用して新しいコンポーネント セットの一部としてメイン サイトにインポートされます。これらのコンポーネントを保持するメイン サイトには常に jQuery が含まれるため、重複するため、browserify で jQuery を要求したくありません。

これは動作上の問題ではありませんが、jest を実行してこの mixin を使用してコンポーネントを単体テストすると、エラーが発生して問題が発生します。

browserify を介して jQuery を含めることでこれを修正できることはわかっていますが、2 つのコピーがサイトに読み込まれます。

反応コンポーネントにjQueryがすでにウィンドウに存在し、それについて心配しないように冗談で伝える方法はありますか?

bower、grunt、bowerify (shim を使用) を使用するプロジェクトがあり、Jest が大好きなので、それをテストしたいとします。テストを実行するときに、ブラウザー化された shim モジュールを見て冗談を言うにはどうすればよいでしょうか。grunt を使用して npm test コマンドを開始します。これが私のpackage.jsonファイルです。

現在、テストを実行する前に、私のうなり声ファイルでこれを行うことで、これをほぼ解決しています。

と。

問題は、browserify を使用して、ブラウザーのすべてを組み合わせると、私のセットアップでうまく機能し、このような shimmed モジュールを要求できることです。 require('jquery') //exampleしかし、jest cli では、何らかの方法でプレフィックス ./ を付けない限り、モジュールを見つけることができるため、テストは失敗します。require('./jquery')

storeと通信するReact ビューがあります。ビューとストアを別々にテストしましたが、組み合わせてテストすることはできませんでした。

ここに記載されている構造に従いましたが、 TypeErrorを受け取りました。を使ってもJestがストアをコンポーネントとして登録しようとしているようdontMockです。

関連するコードと思われるものを以下に含めましたが、必要に応じて全体を提供できます。

Jestテストを見る

ありがとうございました！

Jest を使用して React コンポーネントをテストしています。ただし、サブコンポーネントにメソッドを (小道具として) 渡すコンポーネントをテストする方法がわかりません (または何も見ていません)。たとえばForm、 、MemberList、Member、 がありFormButtonます。コードでこれに似たもの：

形：

メンバーリスト：

メンバー：

フォームボタン:

私は正しい考え方で考えていますか？追加するために、実用的な例はありますか?

*React と Jest を試す前にテストしたことはありません。

UI にこのライブラリを使用します: https://github.com/calleall/material-uiおよび単体テストには Jest を使用します。

しかし、コンポーネントでそのライブラリを使用する必要がある場合、エラー構文エラーが発生しました。他のコンポーネントは冗談です。

以下のpackage.jsonでjestを更新しました。

それは動作しません。