テスト
Jest
React
Snapshot
useState
0
どのような問題がありますか?

投稿日

更新日

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();
  });

});

参考

ユーザー登録して、Qiitaをもっと便利に使ってみませんか。
  1. あなたにマッチした記事をお届けします
    ユーザーやタグをフォローすることで、あなたが興味を持つ技術分野の情報をまとめてキャッチアップできます
  2. 便利な情報をあとで効率的に読み返せます
    気に入った記事を「ストック」することで、あとからすぐに検索できます
ユーザー登録ログイン
kashimuuuuu
React+TypeScriptメインで開発するWebエンジニア React / Next.js / Golang / JavaScript / TypeScript / GraphQL / Nest.js / PHP / VB.NET / ASP.NET / C / SQL / PLSQL

コメント

この記事にコメントはありません。
あなたもコメントしてみませんか :)
ユーザー登録
すでにアカウントを持っている方はログイン
0
どのような問題がありますか?
ユーザー登録して、Qiitaをもっと便利に使ってみませんか

この機能を利用するにはログインする必要があります。ログインするとさらに下記の機能が使えます。

  1. ユーザーやタグのフォロー機能であなたにマッチした記事をお届け
  2. ストック機能で便利な情報を後から効率的に読み返せる
ユーザー登録ログイン
ストックするカテゴリー