Q&A
実現したいこと
reactで作ったコンポーネントに対してテストしたいんですが、やり方がわかりません。
テスト内容
投稿データ(posts)を取得し、一覧表示できているか確認する。
テストデータを3つ用意するので、項目が3つ表示されればよい。
前提
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;
試したこと
上記コードはimportなどは省略してます。
テストコードのほうは、このやり方ですとrenderに失敗しています。
調べても情報が出てこなくて、困ってます
補足情報(FW/ツールのバージョンなど)
react
typescript
jest
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/02 01:20