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

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でイテレートしたコンポーネントなどの要素をテストしたい場合、どのような方法を取るべきなのでしょうか?

行動規範の内容に同意します

回答1件

ベストアンサー

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

投稿2021/03/30 09:55