各コンポーネントからuseDispatchなどでRedux Tool Kit内のReducer関数を呼び出したり、useSelectorでstateを参照したりすると思いますが、RTK独自の構文になるのでRenderでそのまま呼び出そうとしてもエラーになってしまいます。
Redux Tool Kitのテストをする場合は下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import React from 'react'; import { Provider } from 'react-redux'; import { configureStore } from '@reduxjs/toolkit'; import xxxReducer from '../features/xxxSlice'; import XXX from '../components/XXX'; describe('XXX Component Test Cases', () => { // テスト用のstore let store; beforeEach(() => { store = configureStore({ reducer: { xxx: xxxReducer, }, }); }); it('テストケース1', async () => { render( <Provider store={store}> <XXXコンポーネント /> </Provider> ); // screen.debug(); expect(screen.getByTestId('xxx')).toBeTruthy(); }); }); |
テストコードにテスト用のストア(store)を定義して、beforeEachによって各コンポーネントごとにstoreを再構築します。
各コンポーネントごとに、Providerでstoreを毎回渡します。
そうすることで、RTKのuseDispatchや、useSelectorを使ったとしてもエラーになることなくテストを実施することが可能になります。
なお、今回はAPIリクエストなどの非同期処理が全くからまない純粋なテストについてのご紹介でしたが、extraReducerなどの非同期関数などのテストに関しては以下の記事で解説しています。
この記事へのコメントはありません。