前提・実現したいこと
Reactコンポーネントのテストを Jest + testing-library を使って書いています。
セレクトボックスの値が変更されることをテストコードで書いていて以下のエラーが発生しました。
発生している問題・エラーメッセージ
TestingLibraryElementError: Unable to find an element with the display value: First
該当のソースコード
<Select>
というセレクトボックスのコンポーネントに配列形式でcategory
という Props を渡すと、option にカテゴリとして選択項目が追加されます。デフォルトでは '選択してください' という項目が表示されています。
typescript
1const categories = [ 2 { 3 id: 1, 4 name: 'First', 5 }, 6 { 7 id: 2, 8 name: 'Second', 9 description: 'Second', 10 }, 11] 12 13const onSubmit = jest.fn() 14 15// テストコード 16describe('<Select />', () => { 17 test('セレクトボックスの値が変更される', async () => { 18 render( 19 <CategorySelect 20 categories={categories} 21 onSubmit={onSubmit} 22 /> 23 ) 24 25 const selectCategory = screen.getByDisplayValue('選択してください') 26 fireEvent.change(selectCategory, { target: { value: '1' } }) //1番目のoptionを選択 27 28 await waitFor(() => expect( 29 screen.getByDisplayValue(categories[0].name) 30 ).toBeInTheDocument()) <- この部分で上記のエラーメッセージが出ます
試したこと
getByDisplayValue
と await 句を使うことでテストが失敗します。
1.getByDisplayValue
をgetByText
に書き換えたところ、テストがパスします。
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。