ReactのJestのテストでuseStateを使用する方法

#背景

業務でReactのテストをJestで作成した際、HooksのuseStateでエラーになり、かなり悩んだのでその解決策をまとめておく。

#開発言語 (バージョン情報)

• React.js (17.0.2)
• Next.js (11.1.2)
• TypeScript (4.4.3)
• Jest (27.2.2)

#解決策

sample.spec.tsx

import React, { useState as useStateMock } from 'react';
import TestRender from 'react-test-renderer';

jest.mock('react', () => ({
 ...jest.requireActual('react'),
 useState: jest.fn(),
}));

describe('Snapshot test', () => {
  const setState = jest.fn();

  beforeEach(() => {
    (useStateMock as jest.Mock).mockImplementation(init => [init, setState]);
  });

  test('test case 1', () => {
    const [open, setOpen] = useStateMock(true);
    const tree = TestRenderer.create(
      <>
        {open}
        test
      </>,
    ).toJSON();
    expect(tree).toMatchSnapshot();
  });

});

#参考