jestでreactのテストをしたいのですが、やり方がわかりません。

Question

実現したいこと

reactで作ったコンポーネントに対してテストしたいんですが、やり方がわかりません。

テスト内容
投稿データ（posts）を取得し、一覧表示できているか確認する。
テストデータを３つ用意するので、項目が３つ表示されればよい。

前提

jestに不慣れなので、どのように記述したらいいかわからないのです。

発生している問題・エラーメッセージ

・実物は、APIをたたいて、バックエンドのrailsのコードを起動し、dbから取得したjson形式のデータをreactで受取り、画面に表示する。
しかし、jestでテストする際はこの動きをどう表現すればよいのか？

・APIをたたき、取得したデータをtodotop.tsxで受取り、todolist.tsxへ引き渡す。
todolist.tsxでmapを使ったループ処理を行う。その中でtodoitem.tsxに個別のデータを引きわたす。todoitem.tsxでデータを表示する
複雑な動きしており、どのようにrenderしたらいいのかわかりません。
todolist.tsxとtodoitem.tsx両方renderするのかな？とか考えてます。

該当のソースコード

describe(‘Form’, () => {
  beforeEach(() => {
    jest.clearAllMocks()
  })
 
  const setupList = () => {
  const todos: Todo[] = []
  const setTodos = jest.fn();
  const data = [{ contents: ‘sampleA’,},{contents: ‘sampleB’,},{contents: ‘sampleC’,},];
  render(<List todos={data} setTodos={setTodos} />);
  }

  it(‘check’, async() => {
    setupList();
    await waitFor(() => {
      const listElements = screen.getAllByRole(‘listitem’);
      expect(listElements).toHaveLength(3);
    })
  });
});

 export const List = ({ todos, setTodos }: TodoListProps) => {
    return (
<ul>
            {
             todos.map((todo: Todo, index: number) => (
                <Item key={index} todo={todo} setTodos={setTodos}/>
              ))
            }
</ul>
    )
  }
export default List

export const Item = ({ todo, setTodos }: TodoItemProps) => {

   return (
     <li>
      <p>{todo.contents}</p>
    </li>
   )
 }
export default Item

  export const TodosTop = () => {
  
    const [todos, setTodos] = useState<Todo[]>([]);

    const handleGetPosts = async () => {
      try {
        const res = await getTodos()
        if (res?.status === 200) {
          setTodos(res.data);
        }
      } catch (err) {
        console.log(err)
      }
    }
    useEffect(() => {
      handleGetTodos()
    }, [])
  
    return (
      <div>
            <List todos={todos} setTodos={setTodos}/>
      </div>
    )
  }
export default TodosTop;

試したこと

上記コードはimportなどは省略してます。
テストコードのほうは、このやり方ですとrenderに失敗しています。
調べても情報が出てこなくて、困ってます

補足情報（FW/ツールのバージョンなど）

react
typescript
jest

Answer 1

複雑な動きしており、どのようにrenderしたらいいのかわかりません。

ユニットテストは、複雑なまま行うものではありません（どちらかといえばE2Eテストの領分です）。

「親コンポーネントからリクエストが行われる」とか「表示部分では、適切なデータ構造を与えれば適切に描画される」とか、そういった要素要素を検証するのがユニットテストです。

Comments

[gomes_2222]

なるほど。
テストへの考え方が適切でなかったのですね。
ありがとうございました。