問題タブ [enzyme]

反応アプリケーションのテスト スイートを構築しようとしています。アプリケーション内のコンポーネントは次を使用しますAudio。

これはブラウザで動作しますが、これによると、node.js にはありません。したがって、酵素を使用してコンポーネントをレンダリングしようとすると、エラーが発生します。

私はテストに慣れていませんが、これを回避する方法はありますか? どうにかしてオブジェクトをモックしてAudioの代わりにすることはできますか? 私は font-end/javascript 単体テストが初めてなので、まだトリックを学ぼうとしています。

みんな。

で非同期呼び出しが発生した後に状態の更新をテストすると、奇妙な問題が発生しますcomponentDidMount。

これが私のコンポーネントコードです:

今、私がテストファイルで行っていること (Mocha + Chai + Sinon で構成されたセットアップがあり、すべて動作しています):

update()ラッパーを呼び出しても、状態は更新されません。長さはまだ 0 です。何か不足していますか? サーバーの応答を別の方法でモックする必要がありますか?

助けてくれてありがとう！

反応コンポーネントをテストするために酵素/モカを使用しています。

テストしている親コンポーネントがあります。

この親には、レンダリング関数に子コンポーネントがあります

親の foo 関数をテストできるように、子の onChange 関数を起動したいと思います。

これまでのところ、私はこれを行う方法を見つけていません.sinonとスタブについて読んだことがありますが、それは主に関数をインターセプトし、それらを起動しないことに関するものです.

次のテスト

子と親を接続するコード行をテストしないため、弱いテストです。また、子の単体テストを作成していない場合は、子の onChange 機能もテストしません。IMHO - コンポーネントを親/子に分割することでテスト容易性が低下する場合、このフレームワークに何か問題があります

どんな助けでも感謝します、ありがとう

アプリのユニット/機能テストを実装しています (または実装しようとしています) 。InternJSをEnzymeテスト ユーティリティのテスト ランナーとして使用したいと考えています。

コンポーネントを単体テストするには、JSX をトランスパイルする必要があります。Intern docs には React の例が含まれていますが、JSXTransformer が非推奨になったため、この例は関連性がなくなりました。

そのため、 SystemJS プラグインsystemjs-plugin-babelを介して Babel を使用しようとし、推奨されるloader構成を使用しました。

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

テストから JSX を削除すると、エラーがテストの JSX に関連していることがわかります。

Intern と Enzyme を使用して React コンポーネントをテストすることは可能ですか? その場合、コンポーネントをテスト用に準備するには、Intern をどのように構成しますか?

React には、ユーザーがクリックすると簡単な確認ウィンドウを開くボタンがあります。confirm メソッドを追加する前は、以下のテストは緑色でした。確認を追加した後、それは赤です。追加の確認で動作するようにテストを変更するにはどうすればよいですか?

削除ボタンに反応:

これがテストです（酵素を使用）：

こんにちは、接続されたダッシュボード コンテナーがあります。接続された redux-form である子があります。ダッシュボード コンテナーのインスタンス メソッドをテストしたいと思います。ダッシュボードをプロバイダーでラップして、ストアを子コンポーネントに渡すことができることはわかっています。しかし、その後、wrapper.instance().someInstanceMethod() へのアクセスを失います (プロバイダーをルートとしてマウントし、ダッシュボードではなくなったためです。誰かがこれに対処し、解決策を考え出しましたか?

エラーメッセージによると、ストアを小道具として明示的に渡すことができますが、これは機能していません。また、コンテキストとしてラップする 2 番目の引数として渡すこともありません。多分私は何かを逃しています。以下は、機能しないテストの例ですが、何をしようとしているのかについての一般的な考えを示しています。

これは、AirBnB の React テスト ライブラリであるEnzymeを使用して React コンポーネントの一部をリファクタリングしようとしているときに遭遇した興味深い問題です。

私の問題を説明する最良の方法は、例を使用することだと思います。

以下は、親コンポーネントから受け取った props に応じてメッセージを表示する小さな React コンポーネントです。

test.js:

そして、これはこのコンポーネントのテスト スイートで、2 つのテストに合格しています。

test.spec.js:

これは問題なく動作しますが、Test コンポーネントの現在の実装は、可能な限り効率的ではありません。を使用することで、関数が呼び出される.call(this)たびに新しい関数を作成しています。次のように、コンポーネントのコンストラクターでrender()正しいコンテキストをバインドすることで、これを回避できます。this

この変更の後、コンポーネントは引き続き意図したとおりに動作しますが、テストは失敗し始めます。

コンストラクターにa を追加しconsole.log(props.foo)ました。これにより、コンストラクターが期待どおりに呼び出されていること、および受け取っている小道具が正しいことが確認されました。しかし、私は のconsole.log(foo)内部を追加しました。プロパティを明示的に に設定しrenderInnerSpanてコンポーネントを再レンダリングした後でも、値は常に true のように見えます。foofalse

バインドされるのは 1 回だけのように見えますがrenderInnerSpan、Enzyme はこれをテストごとに再利用しています。それで、何が得られますか？テストでコンポーネントを再作成していますが、期待する値でコンストラクターを呼び出しています。バインドされたrenderInnerSpan関数が古い値を使用し続けているのはなぜですか?

助けてくれてありがとう。

Enzyme と React を使い始めたばかりで、少し戸惑っています。React を必要としない単純なテストに合格しました。

src/containers/App/App.spec.js:

npm test

ここで、App コンポーネントの基本的なテストを行い、それが div としてレンダリングされるかどうかを確認したいと思います [これは、ブラウザーにロードしたときに行われます]。ここで失敗が発生します。

src/containers/App/App.spec.js:

npm test

null is not an objectエラーの原因を知りたいです。App何かがオブジェクトであることを期待しているように感じますが、そうではありませんか?

ブラウザをレンダリングする実際のアプリは次のとおりです。

src/containers/App/App.js

src/app.js

参考までに、私のpackage.json

className を使用して酵素 (マウントまたは浅い) を使用して css クラスを設定する反応コンポーネントをテストする場合、div の場合は正しくテストできますが、h1 タグで動作させることはできません。

これはいくつかありますか

• マウントやシャローとの関係は？
• それは私が見逃しているものですか？
• バグですか？

どんな考えでも大歓迎です！

JSX:

仕様:

試験結果：

クラス myheader の h1 を示すデバッグ ログに注意してください。ただし、h1.myheader の要素が見つからず、テストは失敗します。