問題タブ [reactjs-testutils]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
unit-testing - マテリアル UI ダイアログを使用した React コンポーネントの単体テスト
現在、React + MaterialUi アプリケーションの単体テストを作成しています。
私のアプリケーションにはダイアログがあります。ダイアログでどのボタンが押されたかに応じて確認したい:
それに応じて内部状態が変化すること。
TestUtils.scryRenderedComponentsWithType(FlatButton)
残念ながら、またはなどを使用してダイアログの内容を把握できません
scryRenderedComponentsWithTag("button")
。
そのフローをテストする方法についてのアイデアはありますか?
更新 1
したがって、TestUtils.scryRenderedComponentsWithType(Dialog) を呼び出して、Dialog インスタンスを取得できます。しかし、ダイアログの内容を取得できません。DOM に関しては、コンテンツはビュー自体の内部ではレンダリングされません。ドキュメント レベル (div) で新しく作成されたノードにレンダリングされます。だから私はこれを試しました:
上記の場合の cancelButton は正しい DOM 要素です。ただし、Simulate.click はコンポーネントのクリック機能をトリガーしません。
よろしくジョナス
reactjs - ReactJS TestUtils ガベージ コレクション
ReactJS のテスト ユーティリティ クラス: TestUtils では、ガベージ コレクションをどのように処理しますか? renderIntoDocument メソッドで事前に作成された React モジュールの割り当てを解除または破棄するメソッドはありません
ソースへのリンクは 次のとおりですhttps://github.com/facebook/react/blob/87bcbff21896e6b362012a0bc82c35d42a6f955d/src/test/ReactTestUtils.js
わかりやすくするために、TestUtils.renderIntoDocument(); データを初期化しますが、このコンポーネントをアンマウントするか、このコンポーネントを完全に削除するにはどうすればよいですか?
前もって感謝します。
reactjs - React 0.14.5 複合コンポーネントと子のパブリック メソッド
React クラスでパブリック メソッドをテストしようとしています。最初の仕様でわかるように、これは簡単ですが、コンテキストを提供する必要がある場合は、コンポーネントを複合コンポーネントでラップする必要があり、子のパブリック メソッド (2 番目の仕様) にアクセスする方法がわかりません。 .
その方法に到達する方法についてのアイデアはありますか? ありがとう!
unit-testing - React/Jasmine/Karma/Phantom 単体テスト: findDOMNode と renderIntoDocument が期待どおりに機能しない
私は簡単な単体テストを書こうとしていますが、それを理解できないようです。ブートストラップ モーダルをテストして、特定のオブジェクト プロパティを渡したときに正しい内容が表示されることを確認したいと考えています。私のモーダルコードは次のようになります。
したがって、テストのために、 contentBody フィールドを含む prop modalBox を渡すと、モーダルボディの contentBody が返されることを確認したいと思います。これが私がテストしようとしているものの例です:
また、TestUtils.createRenderer を使用して浅いレンダリングを試み、そのアプローチを試みましたが、うまくいきませんでした。私がオンラインで見た例と、react <0.14 での以前のテスト経験に基づいて、このテストは機能するはずだと思います。何が欠けているか、誤解しているのかわかりません。以前、以下のようなことをして、componentNode オブジェクトを調べて要素などを検索しただけですが、componentNode が null を返しています。
ご協力いただきありがとうございます!
javascript - 酵素による反応テスト コンポーネント prop の変更
ここにある例を変更しています:
https://github.com/airbnb/enzyme/blob/master/docs/api/ReactWrapper/setProps.md
テストの結果から、prop の変更時に className 属性が正しく更新されたことがわかります。しかし、入力の値は間違って 'foo' に設定されたままです。
入力の値属性に新しい小道具を受け取るコンポーネントで値が正しく変更されたことをどのように主張できるかについてのアイデアはありますか?
javascript - Jest 0.8.x で react-router 2.0 のようなコンテキストを使用する React コンポーネントをテストする方法
私が使用して解決した古いバージョンのreact-routerを使用しているときに、過去にこの問題がありました:stubRouterContext +コンポーネントインスタンスにアクセスするハックな方法(参照を使用:https ://github.com/reactjs/react-router/issues/ 1140#issuecomment-113174774 )
これは将来改善されると思っていましたが、react-router 2.0 で同じ壁にぶつかっています (これが react-router の問題だと言っているわけではありませんが、コンテキストを使用するため、テストに影響します)。したがって、コンテキストを使用して新しい状態を URL にプッシュするコンポーネントがありthis.context.router.push(...)
ます
。 #プログラマティック ナビゲーション
私は言っていますjest.dontMock('react-router')
が、私のテストは次のように失敗します:
TypeError: Cannot read property 'push' of undefined
これは、によって返されるインスタンスが次のようになるために発生しますTestUtils.renderIntoDocument
。
context: Object { router: undefined }
さて、ここで本当の問題は何ですか?ジェストですか?これに遭遇したのは私だけではないと確信しています.stubRouterContext以来、react-routerの公式ドキュメントにはもうありません.これに対する広く受け入れられている解決策はありますか?
テストを機能させるにはどうすればよいですか?これは、基本的に正しいコンテキストを持ち、によって返されるコンポーネント インスタンスからすべてにアクセスできることTestUtils.renderIntoDocument
です。
反応 0.14.7、jest-cli 0.8.2、および反応ルーター 2.0 を使用しています。