Reactガイドを読んでいくその282
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
テストのレシピ集
レンダー
与えられたpropsに対してコンポーネントが正しくレンダーされているかをテストしたい場合、propsに合わせてメッセージレンダーをするコンポーネントを考える。
// hello.js import React from "react"; export default function Hello(props) { if (props.name) { return <h1>Hello, {props.name}!</h1>; } else { return <span>Hey, stranger</span>; } }
これは以下のようにかけると記載されている。
// hello.test.js import React from "react"; import { render, unmountComponentAtNode } from "react-dom"; import { act } from "react-dom/test-utils"; import Hello from "./hello"; let container = null; beforeEach(() => { // setup a DOM element as a render target container = document.createElement("div"); document.body.appendChild(container); }); afterEach(() => { // cleanup on exiting unmountComponentAtNode(container); container.remove(); container = null; }); it("renders with or without a name", () => { act(() => { render(<Hello />, container); }); expect(container.textContent).toBe("Hey, stranger"); act(() => { render(<Hello name="Jenny" />, container); }); expect(container.textContent).toBe("Hello, Jenny!"); act(() => { render(<Hello name="Margaret" />, container); }); expect(container.textContent).toBe("Hello, Margaret!"); });
今日はここまで。