やったこと

• react router dom
• react testing library

学んだこと

React Router Dom を使用したテスト

render関数の第二引数に、wrapper componentを記載する。

render(<App />, {wrapper: BrowserRouter})

以下のコードを追記することで、 react-router-dom の useParams に依存するコンポーネントをテストできた。

jest.mock("react-router-dom", () => ({
  ...jest.requireActual("react-router-dom"),
  useParams: () => ({ paramGroupId: "Group1" }),
}));

useRef

useState は、 stateが変更されるたびに再レンダリングされる。
再レンダリングさせたくない場合は、 useRef を使用する。

関数本体をメモ化する

useMeme ( () => {...},[]) は、関数の実行結果をメモ化する。

useCallback(() => {...},[]) は、関数本体をメモ化する。