Reactガイドを読んでいくその284
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
テストのレシピ集
モジュールのモック化
テスト環境ではうまく機能しないもの、本質的にテストとは違うもの、色々なモジュールがある。
これらをダミーに差し替えることでテストがやりやすくなる。
例:
// map.js import React from "react"; import { LoadScript, GoogleMap } from "react-google-maps"; export default function Map(props) { return ( <LoadScript id="script-loader" googleMapsApiKey="YOUR_API_KEY"> <GoogleMap id="example-map" center={props.center} /> </LoadScript> ); } // contact.js import React from "react"; import Map from "./map"; function Contact(props) { return ( <div> <address> Contact {props.name} via{" "} <a data-testid="email" href={"mailto:" + props.email}> email </a> or on their <a data-testid="site" href={props.site}> website </a>. </address> <Map center={props.center} /> </div> ); }
依存モジュール自体をダミーコンポーネントにモック化してテストを実行できる。
// contact.test.js import React from "react"; import { render, unmountComponentAtNode } from "react-dom"; import { act } from "react-dom/test-utils"; import Contact from "./contact"; import MockedMap from "./map"; jest.mock("./map", () => { return function DummyMap(props) { return ( <div data-testid="map"> {props.center.lat}:{props.center.long} </div> ); }; }); 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("should render contact information", () => { const center = { lat: 0, long: 0 }; act(() => { render( <Contact name="Joni Baez" email="test@example.com" site="http://test.com" center={center} />, container ); }); expect( container.querySelector("[data-testid='email']").getAttribute("href") ).toEqual("mailto:test@example.com"); expect( container.querySelector('[data-testid="site"]').getAttribute("href") ).toEqual("http://test.com"); expect(container.querySelector('[data-testid="map"]').textContent).toEqual( "0:0" ); });
今日はここまで。