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("テキスト名")
screen.queryByText("テキスト名")
screen.getByTestId("ID名")
screen.getByPlaceholderText("プレースホルダーで設定した名前")
プレースホルダーで設定した名前の検証を行えます。
.innerHTML
タグのテキスト内容を取得できます。
expect
判定するメソッドです。
toBeTruthy():Jestのマッチャー
要素が存在するかチェックをします。
toBeNull()
テストの実行
下記コマンドでテストを実行することが可能です。
1 |
npm test |
この記事へのコメントはありません。