質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

TypeScript

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

React.js

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

Q&A

解決済

1回答

542閲覧

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

gomes_2222

総合スコア90

Jest

Jestは、JavaScriptのテストフレームワークです。設定が不要で、高速且つ安全にテストを開始できます。コードカバレッジを生成できる他、テストスコープ外のオブジェクトを容易にモック化できるなど、豊富な機能によりテストの導入を簡単にします。

TypeScript

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

React.js

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

Ruby on Rails 7

Ruby on Rails 7は、2021年12月に正式リリースされました。Ruby on Railsのバージョン7であり、フロントエンド開発環境を大幅に刷新。Node.jsを用いない構成がデフォルトになっています。

0グッド

0クリップ

投稿2023/02/01 11:20

実現したいこと

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

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

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

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

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

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

guest

回答1

0

ベストアンサー

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

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

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

投稿2023/02/01 11:54

maisumakun

総合スコア145121

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

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

gomes_2222

2023/02/02 01:20

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問