Reactガイドを読んでいくその280

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

テストのレシピ集

セットアップ/後始末

通常Reactツリーをdocumentに結び付いたDOM要素として描画する。
テスト終了後にクリーンアップを行いdocumentからツリーをアンマウントする。

よく使われるものとしてbeforeEachとafterEachブロックのペアを使い常に実行することでテストの副作用がそれ自身にとどまる。

import { unmountComponentAtNode } from "react-dom";

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;
});

他のパターンを利用するとしてもクリーンアップコードは必ず実行するべき。
クリーンアップを忘れるとそこに穴ができてしまい、デバッグが困難になってしまう。

今日はここまで。