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

実現したいこと

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するのかな？とか考えてます。

該当のソースコード

todo.test.tsx
1
2describe(‘Form’, () => {
3  beforeEach(() => {
4    jest.clearAllMocks()
5  })
6 
7  const setupList = () => {
8  const todos: Todo[] = []
9  const setTodos = jest.fn();
10  const data = [{ contents: ‘sampleA’,},{contents: ‘sampleB’,},{contents: ‘sampleC’,},];
11  render(<List todos={data} setTodos={setTodos} />);
12  }
13
14  it(‘check’, async() => {
15    setupList();
16    await waitFor(() => {
17      const listElements = screen.getAllByRole(‘listitem’);
18      expect(listElements).toHaveLength(3);
19    })
20  });
21});

todolist.tsx
1 export const List = ({ todos, setTodos }: TodoListProps) => {
2    return (
3<ul>
4            {
5             todos.map((todo: Todo, index: number) => (
6                <Item key={index} todo={todo} setTodos={setTodos}/>
7              ))
8            }
9</ul>
10    )
11  }
12export default List

todoitem.tsx
1export const Item = ({ todo, setTodos }: TodoItemProps) => {
2
3   return (
4     <li>
5      <p>{todo.contents}</p>
6    </li>
7   )
8 }
9export default Item

todotop
1  export const TodosTop = () => {
2  
3    const [todos, setTodos] = useState<Todo[]>([]);
4
5    const handleGetPosts = async () => {
6      try {
7        const res = await getTodos()
8        if (res?.status === 200) {
9          setTodos(res.data);
10        }
11      } catch (err) {
12        console.log(err)
13      }
14    }
15    useEffect(() => {
16      handleGetTodos()
17    }, [])
18  
19    return (
20      <div>
21            <List todos={todos} setTodos={setTodos}/>
22      </div>
23    )
24  }
25export default TodosTop;