React Testing Libraryを使ってみた（Custom Hooks編）

はじめに

今回はReact Testing LibraryでCustom Hooksをテストしてみます。

テスト

テスト対象コンポーネント

今回のテスト対象のコンポーネントです。
countに1を加算、1を減算するだけの簡単なCustom Hooksです。

import React from "react";

const useCustomCounter = (initialCount) => {
  const [count, setCount] = React.useState(initialCount);

  const increment = React.useCallback(() => setCount((count) => count + 1), [])
  
  const decrement = React.useCallback(() => setCount((count) => count + -1), [])

  return { count, increment, decrement };
};

export default useCustomCounter;

テストコード

import useCustomCounter from "./useCustomCounter";
import { act, renderHook } from "@testing-library/react-hooks";
import { cleanup } from "@testing-library/react";

afterEach(() => cleanup());

describe("Custom Hooksのテスト", () => {

  it("incrementのテスト", () => {
    const { result } = renderHook(() => useCounter(1));
    expect(result.current.count).toBe(1);
    act(() => {
      result.current.increment();
    });
    expect(result.current.count).toBe(2);
  });
  
  it("decrementのテスト", () => {
    const { result } = renderHook(() => useCounter(1));
    expect(result.current.count).toBe(1);
    act(() => {
      result.current.decrement();
    });
    expect(result.current.count).toBe(0);
  });
  
});

コンポーネントの内容を取得する場合は「render」を使用していましたが、Custom Hooksの内容を取得する場合は「renderHook」を使用します。

const { result } = renderHook(() => useCounter(1));

Custom Hooksを実行する場合、実行したい処理を「act」で囲み、その中に処理を書く必要があります。

act(() => {
    result.current.increment();
});

初期値が1でincrementを実行したので、2になる事をテストしています。

expect(result.current.count).toBe(2);

未分類React

Posted by ababa