🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1068閲覧

APIから取得した配列データをテストしたい

kobaryo04ysh

総合スコア29

ユニットテスト

ユニットテストは、システムのテスト手法の一つで、個々のモジュールを対象としたテストの事を指します。対象のモジュールが要求や性能を満たしているか確認する為に実行します。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/03/29 02:20

React+TypeScriptでアプリを作成しています。

親のコンポーネントでfetchしたデータを子のコンポーネントでmapメソッドを使ってイテレートして、いくつかの文字列を画面に表示しています。これらの文字列が表示されているかテストをしようとしたものの、screen.debug()でコンソールに表示してみると、イテレートしている中身の部分がうまく取得できていないようでした。

ソースコード

Child.tsx

1const Child: React.FC<Props> = (props) => { 2 return ( 3 <div className="wrraper"> 4 {props.prefectures.map((prefecture: PF, index: number) => ( 5 <div key={index} className="checkbox"> 6 <input 7 type="checkbox" 8 onChange={() => props.handlecheck(prefecture.prefCode)} 9 checked={props.isSelected[prefecture.prefCode - 1]} 10 id={`checkbox_${index}`} 11 /> 12 <label htmlFor={`checkbox_${index}`}>{prefecture.prefName}</label> 13 </div> 14 ))} 15 </div> 16 ); 17};

test.tsx

1 }); 2 it('チェックボックスが47個表示される', () => { 3 const { container } = render( 4 <Child 5 prefectures={[]} 6 handlecheck={jest.fn()} 7 isSelected={[false, false]} 8 /> 9 ); 10 screen.debug(); 11 expect(container.getElementsByTagName('input').length).toEqual(47); 12 });

コンソールに表示されたテスト結果

● Console console.log <body> <div> <div class="wrraper" /> </div> </body> 21 | /> 22 | ); > 23 | screen.debug(); | ^ at logDOM (node_modules/@testing-library/dom/dist/pretty-dom.js:80:13) ● レンダリングテスト › チェックボックスが47個表示される expect(received).toEqual(expected) // deep equality Expected: 47 Received: 0 22 | ); 23 | screen.debug(); > 24 | expect(container.getElementsByTagName('input').length).toEqual(47); | ^ 25 | }); 26 | }); 27 |

このような、mapでイテレートしたコンポーネントなどの要素をテストしたい場合、どのような方法を取るべきなのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

上記のテストはChildコンポーネントの単体テストなのでprefectures={[]}となっている部分に実際の値を渡す必要があります
実際にはAPIからデータを取得していると思いますが、そうしたネットワーク通信が必要な部分など外部に依存する部分はこうした単体テストの範囲外なのでmockするなどしてテスト内で処理が完結するようにしましょう

投稿2021/03/30 09:55

mikan3rd

総合スコア220

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問