Render.js
以下のようなHTMLを返してくれるファンクショナルコンポーネントを作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React from "react"; const Render = () => { return ( <div> <h1>見出し</h1> <input type="text" /> <button>ボタンタグ</button> <p>Pタグ</p> </div> ); }; export default Render; |
Render.test.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import React from "react"; import { render, screen } from "@testing-library/react"; import Render from "./Render"; describe("Rendering", () => { it("全ての要素が正常にレンダリングされていること", () => { render(<Render />); expect(screen.getByRole("heading")).toBeTruthy(); expect(screen.getByRole("textbox")).toBeTruthy(); expect(screen.getAllByRole("button")[0]).toBeTruthy(); expect(screen.getByText("pタグ")).toBeTruthy(); expect(screen.queryByText("ボタンタグxxxx")).toBeNull(); expect(screen.queryByText("ボタンタグxxxx").innerHTML).toBe("あああ"); }); }); |
describe
テストのタイトルになります。
it
テストケースになります。
render(<Render />);
importしていたRenderコンポーネントの内容を取得します。
screen.debug();
テストには直接関係ないですが、これを使えば実際にrenderでどのような内容のHTMLの構造が取得できているか確認できます。
screen.getByRole("ロール名")
h1などの見出しタグの内容を取得します。「screen.debug(screen.getByRole("heading"))」と指定すれば、実際に取得できた見出しタグの内容を確認できたりします。指定しているRoleに関しては以下の記事に載っています。
https://github.com/A11yance/aria-query#elements-to-roles
screen.getAllByRole("ロール名")[0]
全ての要素を配列で返してくれます。具体的な要素を取得したい場合は[0]等により配列の具体的な番地を指定します。
screen.getByText("テキスト名")
HTML要素内のテキスト内容を探索します。戻り値としては、該当する文字列とタグを返してくれます。(上の例で言えば「<p>Pタグ</p>」を返してくれます。）
screen.queryByText("テキスト名")
getByTextと違い、該当しない場合はnullを返してくれます。なのでテキストが存在しないことのチェックをしたい場合はこちらを使います。getByTextだと存在しないとエラーになってしまい検証できないためです。
screen.getByTestId("ID名")
タグの中にIDが存在することをチェックできます。
screen.getByPlaceholderText("プレースホルダーで設定した名前")
プレースホルダーで設定した名前の検証を行えます。
.innerHTML
タグのテキスト内容を取得できます。
expect
判定するメソッドです。
toBeTruthy()：Jestのマッチャー
要素が存在するかチェックをします。
toBeNull()
存在しないことをチェックします。
テストの実行
下記コマンドでテストを実行することが可能です。
|
1 |
npm test |
この記事へのコメントはありません。