[解決済み] リアクトエンザイムが2番目(またはn番目)のノードを見つける
2022-04-25 16:15:29
質問
Jasmine Enzymeのシャローレンダリングで、Reactコンポーネントをテストしています。
この質問の目的のためにここで簡略化すると...
function MyOuterComponent() {
return (
<div>
...
<MyInnerComponent title="Hello" />
...
<MyInnerComponent title="Good-bye" />
...
</div>
)
}
MyOuterComponent
のインスタンスが2つあります。
MyInnerComponent
で、それぞれでプロップをテストしたい。
最初のものは、私がテストする方法を知っています。 私は
find
と
first
...
expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello');
しかし、2つ目のインスタンスである
MyInnerComponent
.
こんな感じでうまくいくかと思ったのですが・・・。
expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye');
あるいは、こんなのも。
expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye');
しかし、もちろん上記のどちらもうまくいきません。
当たり前のことを見逃しているような気がします。
しかし、目を通すと ドキュメント 類似の例は見当たりませんね。
誰かいませんか?
解決方法は?
あなたが欲しいのは
.at(index)
メソッドを使用します。
.at(index)
.
では、例の場合。
expect(component.find('MyInnerComponent').at(1)).toHaveProp('title', 'Good-bye');
関連
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み] テスト
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避するにはどうすればよいですか?
-
[解決済み] React の open mailto E-Mail クライアントの onClick で textarea から本文を取得する。
-
[解決済み] 非必須項目に対するYupバリデーション
-
[解決済み] Webpack のコンパイルに失敗した
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] Reactのこの3つの点は何をするところなのでしょうか?
-
[解決済み】Angular 2 Unit Tests。名前 'describe' が見つからない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み] テスト
-
[解決済み] SVGサークル内の画像にボーダーを追加する方法
-
[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?
-
[解決済み] React - 予想外のトークン、予想外の;
-
[解決済み] react.jsでng-ifに相当するものは何ですか?
-
[解決済み] は、gatsby-imageで動作する良いreactのカルーセルコンポーネントはありますか?[って聞かれます。]
-
React はエラー TypeError を報告します。未定義のプロパティ 'XX' を読み取ることができない、問題は解決されました。
-
[解決済み] React Hooksの「exhaustive-deps」lintルールを理解する
-
[解決済み] Reactのrender()にFont Awesomeのアイコンを入れる方法