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

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

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

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

ソフトウェアテスト

ソフトウェアテストは、プログラムを実行し、要求通りに正しく動作が行えているかどうか確認する作業です。プログラム中のバグをできる限り多く発見することを目標として行われます。

TypeScript

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

React.js

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

解決済

testing-library : await waitFor(() => でテストが通りません

Mirak
Mirak

総合スコア6

Jest

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

ソフトウェアテスト

ソフトウェアテストは、プログラムを実行し、要求通りに正しく動作が行えているかどうか確認する作業です。プログラム中のバグをできる限り多く発見することを目標として行われます。

TypeScript

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

React.js

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

1回答

0評価

1クリップ

1101閲覧

投稿2021/12/05 15:40

前提・実現したいこと

Reactコンポーネントのテストを Jest + testing-library を使って書いています。
セレクトボックスの値が変更されることをテストコードで書いていて以下のエラーが発生しました。

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

TestingLibraryElementError: Unable to find an element with the display value: First

該当のソースコード

<Select>というセレクトボックスのコンポーネントに配列形式でcategoryという Props を渡すと、option にカテゴリとして選択項目が追加されます。デフォルトでは '選択してください' という項目が表示されています。

typescript

const categories = [ { id: 1, name: 'First', }, { id: 2, name: 'Second', description: 'Second', }, ] const onSubmit = jest.fn() // テストコード describe('<Select />', () => { test('セレクトボックスの値が変更される', async () => { render( <CategorySelect categories={categories} onSubmit={onSubmit} /> ) const selectCategory = screen.getByDisplayValue('選択してください') fireEvent.change(selectCategory, { target: { value: '1' } }) //1番目のoptionを選択 await waitFor(() => expect( screen.getByDisplayValue(categories[0].name) ).toBeInTheDocument()) <- この部分で上記のエラーメッセージが出ます

試したこと

getByDisplayValueと await 句を使うことでテストが失敗します。
1.getByDisplayValuegetByTextに書き換えたところ、テストがパスします。
2.また、waitFor(() =>の前の await を記述しないでおくと、getByDisplayValueでもテストがパスします。

そこで、2の方法で await を記述せずwaitFor(() =>のみを書いたテストコードをレビューに提出したところ、await句が必須であると指摘されました。
セレクトボックスの中の値は getByText ではなく getByDisplayValue で取得した方がよいと考えているのですが、上記のテストが通らない原因には何が考えられるのでしょうか?
また、testing-library のwaitForを使う際は await 句は必須でしょうか?

testing-libraryに詳しい方、お力を貸していただけると幸いです。

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

React v.17
testing-library/react v11.2.2

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Jest

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

ソフトウェアテスト

ソフトウェアテストは、プログラムを実行し、要求通りに正しく動作が行えているかどうか確認する作業です。プログラム中のバグをできる限り多く発見することを目標として行われます。

TypeScript

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

React.js

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