React Academy · レッスン

Zustand DevToolsとStoreのテスト

devtools middlewareでRedux DevToolsに接続し、storeのactionsを直接ユニットテストします。

レッスン 4/413 ステップ

「Zustand DevToolsとStoreのテスト」はCoddyKit上の無料React Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、ZustandストアをRedux DevToolsに接続してタイムトラベルデバッグを行い、ストアアクションのユニットテストを直接記述します。

devtoolsミドルウェア

ストアをdevtoolsミドルウェアでラップして、Redux DevToolsブラウザー拡張機能に接続します。DevToolsのタイムラインで、すべてのアクションと状態の変化を確認できるようになります。

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

const useStore = create(
  devtools(
    (set) => ({
      count: 0,
      increment: () => set(s => ({ count: s.count + 1 }), false, 'increment'),
    }),
    { name: 'CounterStore' }
  )
);

DevToolsでのアクション名

devtoolsを使用する場合は、set()の第3引数としてアクション名を渡します。このラベルがDevToolsのタイムラインに表示されるため、何が変化したのかを簡単に追跡できます。

set(s => ({ count: s.count + 1 }), false, 'counter/increment');
// Appears as 'counter/increment' in Redux DevTools

persistとdevtoolsの組み合わせ

複数のミドルウェアを連結します。persistの内側にdevtoolsをラップすると、ストレージからの再ハイドレーションによるものを含め、すべての状態変化を確認できます。

const useStore = create(
  devtools(
    persist(
      (set) => ({ /* ... */ }),
      { name: 'my-store' }
    ),
    { name: 'MyStore' }
  )
);

Zustandストアのテスト

Zustandストアは単純なJavaScriptです。Reactコンポーネントをレンダリングせずに直接テストできます。ストアをインポートし、テスト内でgetState()とsetState()を呼び出します。

import { useCounterStore } from './store';

beforeEach(() => useCounterStore.setState({ count: 0 }));

test('increment increases count', () => {
  useCounterStore.getState().increment();
  expect(useCounterStore.getState().count).toBe(1);
});

テスト間での状態のリセット

beforeEachで初期値を指定してsetStateを呼び出し、テスト間でストアをリセットします。これにより、テストケース間で状態が漏れるのを防げます。

const initialState = { count: 0, user: null };

beforeEach(() => {
  useMyStore.setState(initialState);
});

コンポーネントテストでのストアのモック

コンポーネントテストでは、ストアフックをモックして制御された値を返します。実際のストアロジックを使わずに、さまざまなストア状態でコンポーネントがどのようにレンダリングされるかをテストできます。

vi.mock('./useCounterStore', () => ({
  useCounterStore: vi.fn(() => ({ count: 5, increment: vi.fn() })),
}));

非同期アクションのテスト

テスト内でfetchをモックし、getState()を介して非同期アクションを呼び出します。awaitで非同期処理の完了を待ってから、更新された状態をアサートします。

global.fetch = vi.fn().mockResolvedValue({
  json: () => Promise.resolve({ id: 1, name: 'Alice' }),
});

await useUserStore.getState().fetchUser(1);
expect(useUserStore.getState().user.name).toBe('Alice');

本番環境でのDevToolsガード

ミドルウェアを条件付きで適用し、本番環境ではdevtoolsを無効にします。これにより、ストアの構造がユーザーに公開されるのを防げます。

const isDev = process.env.NODE_ENV === 'development';

const useStore = create(
  isDev ? devtools(storeCreator, { name: 'App' }) : storeCreator
);

ロギングミドルウェア

カスタムのロギングミドルウェアを作成し、すべての状態変化をコンソールに記録できます。ブラウザー拡張機能をインストールできない場合に役立ちます。

const log = (fn) => (set, get, api) => fn(
  (args, replace, name) => {
    console.log('action', name, args);
    set(args, replace, name);
  }, get, api
);

確認問題

テスト間でZustandストアを初期状態にリセットするには、どうすればよいですか？

対話的なレッスンで答える

まとめ

devtoolsミドルウェアを追加し、アクションに名前を付けて読みやすいDevToolsのタイムラインを作成します。コンポーネントをレンダリングせず、getState()/setState()でストアを直接テストします。beforeEachで状態をリセットして、テストを分離します。

コース完了

おめでとうございます！**State Management with Zustand**を修了しました。これでストアの作成、セレクターの使用、状態の永続化、DevToolsによるデバッグ、ストアロジックのユニットテストができるようになりました。

無料で開始

AI チューターと学ぶ React — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 88
レッスン: 324

無料で学習を始めるコース全体を表示

よくある質問

「Zustand DevToolsとStoreのテスト」レッスンは無料ですか？

はい。「Zustand DevToolsとStoreのテスト」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全4レッスンが含まれています。

「Zustand DevToolsとStoreのテスト」で何を学びますか？

devtools middlewareでRedux DevToolsに接続し、storeのactionsを直接ユニットテストします。ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Zustand DevToolsとStoreのテスト」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← React Academyに戻る