Jestのコンポーネントテストで「何も表示しない」をテストする方法

Reactで何も表示しない場合にnullを返しているんだけど、どうやってテストすればいいの？

今回は、こういった疑問にお答えします。

少しでもReact等でコンポーネント開発をする場合の参考になれば幸いです。

Jestのコンポーネントテストで「何も表示しない」をテストする方法

Reactで開発をしていると、「特定の条件の場合に何も表示しないこと」をテストしたい場合があります。

例えば、以下のようなコードです。

export const Sample = ({ isFalse }) => {
  if (isFalse) {
    return null;
  }

  return <div>isOk</div>;
};

このようなコードでisFalseがtrueの場合にnullを返す（何も表示しない）ことをテストするには、以下のようなテストコードを書けば良いです。

import { render } from "@testing-library/react";
import { Sample } from "./Counter";

describe("Sample", () => {
  describe("falseの場合", () => {
    test("何も表示しない", () => {
      const result = render(<Sample isFalse={true} />);
      expect(result.container.innerHTML).toBe("");
    });
  });
});

innerHTMLでレンダリングされたHTMLを見て、それが空（””）かどうかを見ています。

もちろん他にも方法はあるとは思いますが、私は基本この方法でテストしています。

Jestのコンポーネントテストで「何も表示しない」をテストする方法:まとめ

最後にもう一度結論を言うと、Jestのコンポーネントテストで「何も表示しない」をテストするには以下のようなコードを書けばよいです。

import { render } from "@testing-library/react";
import { Sample } from "./Counter";

describe("Sample", () => {
  describe("falseの場合", () => {
    test("何も表示しない", () => {
      const result = render(<Sample isFalse={true} />);
      expect(result.container.innerHTML).toBe("");
    });
  });
});

今回は以上となります。

この記事が開発を進める上で少しでも参考になれば幸いです。