問題タブ [enzyme]

現在、 this.refs [ data ] を含む関数の単体テストを行っています。浅いレンダリングしかできないので、未定義になり続けます。私は次のようにしてシノンを嘲笑しようとしました

しかし、関数が refs ではなく this.refs を実行しているため、機能していないと思います。this.refs をモックする方法について何か考えはありますか?

編集：

それが呼んでいるもの：

次のエラーが表示されます。スタック トレースを掘り下げると、その this.refs が原因です。

Mocha、Enzyme、Shallow レンダリングを使用しており、ReactJS をテストする予定です。私はbabelとES6を使用していません。ここでスタック オーバーフローに関する他の質問を見てきましたが、私の質問に答えたものはありません。

commonJS と Grunt で ES5 を使用して JSX を JS にコンパイルし、app.built.js ファイルを html ファイルにロードすると、すべてページに正常にロードされます。

これは私のコードですspeedoApp.jsx

これはコードですApp.js

私のHTMLファイル：

私のテストファイルspeedoSpec.js:

mocha を実行すると、次のエラー メッセージが表示されます。

app.built.jsのファイルの代わりにファイルをspeedoApp.jsx要求することも試みましたspeedoSpec.js。

誰が私が間違っているのか知っていますか?

私はreactjsと酵素ツールを初めて使用し、reactjsアプリケーションの単体テストを実装しています。親にある子コンポーネントの props 値を渡すたびに、それらの値は子の必須フィールドに割り当てられているようには見えません。しかし、私が子供に直接同じことをすると、うまくいきます。以下は、子コンポーネントのレンダリング部分です

そして、以下に示す親コンポーネントのレンダリング関数

実際に、ここでログイン操作をテストしています。私はreactjsとenzymeの両方に慣れていないので、正しい方法で行っているかどうかわかりません。以下は私のサンプルテストスニペットです

ここで問題を解決するために誰かが手を差し伸べてくれれば幸いです。

React コンポーネントにコンテキストを渡そうとしていますが、Enzyme でテストしているため、コンポーネントをその親に動的に追加して、その状態を調べることができます。テストは次のようになります。

コンテキストを介して継承する必要がありますが、コンポーネントの状態のpersistentプロパティが であるため、テストは失敗します。BeaconundefinedBeaconConfig

Beaconマウント時にJSX内に直接配置しようとすると正常に動作しますが、この場合、ルートではないため、BeaconConfigEnzymeはコンポーネントの状態に到達できません。Beacon

コンポーネントを親に動的に追加したときに、React がコンポーネントにコンテキストを伝播しないのは正常ですか?

反応を使用してドロップ ライブラリの非常に単純なラッパーを作成しました。酵素を使用してテストしようとしています。

ドロップ ライブラリは基本的に「ドロップ ターゲット」要素と「ドロップ コンテンツ」要素を使用し、特定のマウス イベントが「ターゲット」に発生したときに「コンテンツ」を表示するようにします。これは、コンテンツを表示するために css 遷移メカニズムで使用される css クラスをターゲットに追加することによって行われます。

だから...私がテストしようとしていたのは、いくつかのマウスイベントが発生したときに、いくつかのcssクラスがいくつかの要素に追加されるということです。

コンポーネント自体は次のとおりです。

これがテストです（モカ、チャイ、酵素を使用）：

最後のexpectステートメントはfalse、予想される重要なクラス ( drop-enabled) が「ドロップ ターゲット」に表示されないという点です。

github リポジトリ全体は、参照用にここで見つけることができます

酵素を使用してこのテストに正しくアプローチする方法について、誰かがガイダンスを提供できますか?

Mocha、Expect、および Enzyme の実行に問題があります。まず、babel を使用して webpack 構成ファイルをトランスパイルします。以下は、私が取得したエラーの添付のスクリーンショットであり、テスト ファイルは有効です。誰かが同様の問題を抱えていましたか？

アプリを React、Enzyme、Material-UI の最新バージョンに更新する作業を行っています。

バージョン 15 では、何も指定されていない場合に作成されるデフォルトのテーマ コンポーネントが Material-UI によって削除されたことを私は知っています。MuiThemeProvider現在推奨されている方法は、使用したいスタイルのコンポーネントでアプリケーション全体をラップすることです。これは何の問題もなく動作しますが、私のテストは、すべきではないときに壊れてしまいます。

Material-UI コンポーネントを使用し、ここで を呼び出すすべてのコンポーネントは、ShallowWrapper.html()次のメッセージでテストを失敗させますTypeError: Cannot read property 'prepareStyles' of undefined。

ShallowWrapper.html()を使用しない場合、エラーは発生しないことに注意してください。したがって、失敗するのは、HTML 出力を確認する必要がある場合だけです。これは理にかなっていますが、Material-UI は実際に何かをレンダリングするときにのみスタイルを気にする必要があります。

どのように行っているかを示すために、非常に単純なテスト ケースを作成しました。

コンポーネントをラップするだけでうまくいくはずだと思っていました。明らかに、私はどこかでステップを逃しています。誰かが私を正しい方向に向けることができますか?