前提・実現したいこと
下記のデモをご確認いただけますでしょうか。
demo(CodeSandBox)
input type="time"のフォームに任意の時刻を入力し、フォームの隣にある"set time"ボタンを押すことで時刻をセットします。
セットした時刻と現在時刻が一致すると、子コンポーネントを描画します。
子コンポーネント内のcloseボタンを押すと、子コンポーネントをアンマウントします。
上記のデモにおいて、「セットした時刻と現在時刻が一致すると、子コンポーネントを描画する」といった内容を検証できるテストを書きたいです。
使用しているライブラリ
・Jest
・React Testing Library
ソースコード
javascript
1test("render Child component", () => { 2 const { getByLabelText, getByTestId } = render(<App />); 3 fireEvent.change(getByLabelText("input time"), { target: { value: "00:00" }}); 4 fireEvent.click(getByLabelText("set time")); 5 expect(getByTestId("childText")).toHaveTextContent("this is Child component"); 6});
テストコードでのDateはjest-date-mockライブラリを利用してモック化を試みましたが、CodeSandBoxではライブラリが機能しませんでした(本番環境では機能しました。)
なのでテストを実行される場合は恐れ入りますが、テストの都度、fireEvent.change()
内のvalueを現在時刻に書き換えてテストを実行してください。
発生している問題・エラーメッセージ
Unable to find an element by: [data-testid="childText"]
Childコンポーネントの要素が取得できていないことから、テストコードではChildコンポーネントが描画できていないかと思われます。
試したこと
機能のコードもテストのコードもシンプルなので、何かを試す余地を見出せていません。
描画済みのSetTimeコンポーネントのテキストを持った要素に、data-testid="childText"
を付与してテストを行なったところ要素ならびにテキストを取得できたので、要素の取得方法には問題は無さそうです。
あなたの回答
tips
プレビュー