問題タブ [enzyme]

子入力コンポーネントのレンダリングを担当する App コンポーネントがあります。また、 というメソッドを介して Twitch API へのフェッチ要求を処理する役割もありますchannelSearch。React で ajax/fetch を操作するために、ここで概説されている推奨されるベスト プラクティスを順守しようとしました。

メソッドは props を介して渡され、コールバックを介して呼び出されます。

fetch メソッドは実際には isomorphic-fetch であることに注意してください。

channelSearch現在、メソッドのテストを作成しようとしています。現在、DOM のコンポーネントmount全体に酵素と jsdom を使用しています。<App>コールバックで子ノードを見つけ、クリックをシミュレートし (コールバックを起動する必要があります)、コンポーネントの状態が変更されたかどうかを確認します。ただし、これは機能しないようです。

メソッドを直接呼び出してみましたが、this.state未定義の問題が発生しました。

私は本当に道に迷いました。メソッド自体の記述が不十分なのか、それともジョブに適切なツールを使用していないのかわかりません。どんなガイダンスでも大歓迎です。

更新 #1:

コメントで推奨されているようにnockを含めました。テストは次のようになります。

これはまだコンポーネントの状態を変更していないようです。

提案のために react-intl を調べましたが、酵素の明示的なドキュメントは残っていません。

これが、私がテストを書こうとしてきた方法です。

しかし、私はエラーが発生し続けます

不変違反: [React Intl] 必要なintlオブジェクトが見つかりませんでした。コンポーネントの祖先に存在する必要があります。

彼らのレポを調べたところ、「react-addons-test-utils」で動作するようになったようです。

私は何か間違ったことをしていますか？

テストを実行すると、このエラーが発生します:

テスト対象のコンポーネント:

単体テスト：

パッケージ.json:

編集：解決しました！答えは下にスクロール

react-intlコンポーネント テストでは、コンテキストにアクセスできるようにする必要があります。問題は、親ラッパーmount()なしで (Enzyme の) 単一コンポーネントをマウントしていることです。<IntlProvider />これは、プロバイダーをラップすることで解決されますが、 は ではなくインスタンスをroot指します。IntlProviderCustomComponent

The Testing with React-Intl: Enzymeドキュメントはまだ空です。

<カスタム コンポーネント />

標準テストケース (望ましい) (酵素 + モカ + チャイ)

ただし、コンポーネントはライブラリFormattedMessageの一部として使用react-intlするため、上記のコードを実行すると次のエラーが発生します。

Uncaught Invariant Violation: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

で包むIntlProvider

これにより、必要なコンテキストが提供CustomComponentさintlれます。ただし、次のようなテスト アサーションを実行しようとすると、次のようになります。

次の例外が発生します。

AssertionError: expected undefined to equal ''

IntlProviderこれはもちろん、私たちの ではなくの状態を読み取ろうとするためCustomComponentです。

アクセスの試みCustomComponent

以下を試してみましたが、役に立ちませんでした：

問題は、「ルート」操作を実行しながら、コンテキストを使用してマウントするにはどうすればよいかCustomComponentintlCustomComponentということです。

モカと酵素のフロントエンドでReactの単体テストをしようとしています。Mocha がアプリ ファイルに入り、インポート ステートメントを解析すると、テストは停止します。

package.json テスト コマンドで .css および .scss ファイルを無視できました。

これらのインポート ファイルを無視する方法がよくわかりません。(スタックオーバーフローでignore-stylesの解決策を見つけましたが、このようなものではありません。

私が得るエラー：

単体テストは初めてですが、助けていただければ幸いです。

update: //babelrc

script/run.sh は、テスト ヘルパー ファイルを指します。

バックエンドチームのメンバーが単体テストのためにヘルパーファイルをまとめたので、ヘルパーファイルがどのように役立つかは完全にはわかりませんが、有望なようです.

御時間ありがとうございます。

Web ブラウザーでhttps://github.com/lelandrichardson/enzyme-example-mocha/blob/master/src/Foo.jsを使用できますか?

私は試してみましたが、babelは未定義の単語でjsを作成します。

生成されたコード例: Object.defineProperty(exports, "__esModule", { value: true });

メッセージ: ReferenceError: エクスポートが定義されていません