reactでのテスト

why

業務委託の面接でreact-testを覚えた方がいいと言われた

電気屋のサイトで実行する

ja.reactjs.org

コンポーネントツリーのレンダリングをシンプルなテスト環境で行い、その結果を検証するアプリケーション全体の動作をブラウザ同等の環境で検証する（end-to-end テストとして知られる）

の前者を行う． // localhostと何が違うんだ？

tools

Jtest, React-testing-Library, がある

recipe

テストが終了した際に「クリーンアップ」を行い、document からツリーをアンマウントします。

とあるのでun-mountするらしい

このためによく行うのは beforeEach と afterEach ブロックのペアを使い、それらを常に実行することで、各テストの副作用がそれ自身にとどまるようにすることです。

beforeEach, afterEachのナカでやるらしい

レンダー、ユーザイベント、データの取得といったタスクはユーザインターフェースへのインタラクションの「ユニット (“unit”)」である

act() でこれらのassertation？を行う前に

これらの「ユニット」に関連する更新がすべて処理され、DOM に反映されていることを保証

してくれるらしい．

これはReact-Testing-Libraryがやってくれるらしい？

ちなみにAssertionとは

shorturl.at/jxIW3

プログラムの前提として満たされるべき条件を記述し、実行時にそれが満たされていない場合にエラーや例外を発生させたり、メッセージを表示して処理を中断したりする機能

らしい．条件を書いて，それが満たされていない場合はエラーや例外処理をする機能．404とかをなくすのかな？

code

hello

// 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するだけのシンプルなコードだと

// 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!");
});

render, unmountComponentAtNode, をreact-domから

actをreact-dom/test-utils から

importして

テスト対象の自体をimportして

containerをnullで初期化して

beforeEachの中で

をcontainerに入れて

document.bodyをcontainerの子要素にいれる

次にafterEachの中で

unmountComponentAtNodeでcontainerをunmountして？？

container.remove(); で削除して？

containerの中身をnullに戻す．

そしてitを使って...

// ifではなくて？？？

// なんかそれ(it)って武器で戦う主人公のラノベがあったな

helloの引数がある場合とない場合の処理を書く

expectとtoBeがわからん

onChange, submit,

import React, { useState } from "react";

export default function Toggle(props) {
  const [state, setState] = useState(false);
  return (
    <button
      onClick={() => {
        setState(previousState => !previousState);
        props.onChange(!state);
      }}
      data-testid="toggle"
    >
      {state === true ? "Turn off" : "Turn on"}
    </button>
  );
}

useStateを使ってstateをonClickされるたびに

true, false, 反転させるコード．

stateによってturn off, on, を描画する

このbtnの中に

data-testid="toggle"

を追加