「ACCESS Advent Calendar 2020」 の17日目の記事となります！
概要
ReactでAPIを叩いて非同期処理をするとき一般的にReduxでactionからreducerの処理の間にredux-sagaやredux-thunkで非同期処理を行い、受け取ったdataをreducerに渡します。
その実装でredux-sagaを使用してテストコードを書く場合、多くのテストコードライブラリが存在します。
- redux-saga-test
- redux-saga-testing
- redux-saga-test-plan
- redux-saga-test-engine
- redux-saga-tester
この中からredux-saga-test-planを使用してredux-sagaとその値をreducerで管理するまでのテストコードの書き方とつまずいたポイントについて書きます。
とは言っても書き方については「公式ドキュメント」とQiitaの「redux-saga-test-planを使って、redux-sagaのテストを書く」の記事が参考になり、それらを読めば使い方は理解できるかと思います。
作業環境
使用した各ライブラリのversionを記載します。
また、actionとreducerの処理をtypescriptで書いたため、それらの型定義とaction creatorを簡単に生成してくれる「typescript-fsa」のライブラリを使用しています。
※Next.jsは使用せずSPAでの実装となります
"react-redux": "7.2.1",
"redux": "4.0.5",
"redux-saga": "1.1.3",
"redux-saga-test-plan": "4.0.0-rc.3",
"typescript-fsa": "3.0.0",
"typescript": "4.0.2",
"@types/react-redux": "7.1.9",
Reduxとredux-sagaの処理
ではテストコードについて書く前にdispatchしてactionを呼び出し、redux-sagaでAPIを叩いてreducerを更新するまでのコードをtypescript-fsaを使用して説明します。
GETメソッド
getメソッドでdataを取得する際はuse-effectのなかで処理を書きます。
Component
const dispatch = useDispatch();
useEffect(() => {
dispatch(getAllAction.started(null));
}, []);
actionはこのように書きます。
typescript-fsaを使用すると簡単にaction creatorが作れるからいいですね。
Action
type Data = {
id: string;
name: string;
}
type ResultData<T> = {
data: T[];
};
export const FETCH_GET_ALL = 'FETCH_GET_ALL' as const;
export const FETCH_GET_ALL_STARTED = 'FETCH_GET_ALL_STARTED' as const;
const actionCreator = actionCreatorFactory();
export const getAllAction = actionCreator.async<
null,
ResultData<Data>,
ResponseError
>(FETCH_GET_ALL);
action creatorを作成したので、次にredux-sagaを使用して非同期処理でAPIのdataを取得します。
fetch処理はaxiosライブラリを使用しています。
getAllAction.started(null)をトリガーにジェネレーター関数fetchGetAllが呼ばれます。
Saga
export function* fetchGetAll(): Generator<unknown, void, AxiosResponse> {
try {
const res = yield call(api);
yield put(
getAllAction.done({ params: null, result: { data: res.data } })
);
} catch (error) {
yield put(getAllAction.failed({ params: null, error }));
}
}
function* getAllWatcher(): SagaIterator {
yield takeEvery(FETCH_GET_ALL_STARTED, fetchGetAll);
}
export default getAllWatcher;
apiのresponseデータをtypescript-fsaのdone関数に設定します。
そのdataをreducerに渡してstateで管理します。
Reducer
if (isType(action, getAllAction.done)) {
const {
payload: {
result: { data },
},
} = action;
return {
loading: false,
data,
error: {
description: '',
},
};
}
redux-saga-test-planでテストコードを書く
では実際にredux-saga-test-planを使ってテストコードを書きます。
上記のactionからredux-saga、reducerまでの処理に対してテストコードを書きますので記述する関数は上記から引用します。
テストコード
テストコードを書く際は、APIから取得する実際のdataやstateの実際のdataは使用せずにモックデータ(ダミーデータ)を使用して期待した通りのdataになっているかをテストします。そのためにまずはモックデータ(fakeData)を作成しています。
モックデータ
const fakeData = {
data: [
{
id: '12345ABC',
name: 'hoge',
},
{
id: '6789DEFG',
name: 'foo',
},
],
};
```
次に`redux-saga-test-plan`のredux-sagaのテスト関数`expectSaga`を使用してテストコードを書きます。
```javascript:テストコード
return expectSaga(fetchGetAll)
.withReducer(reducer)
.provide([[call(api), fakeData]])
.put(
getAllAction.done({
params: null,
result: { data: fakeData.data },
})
)
.run()
.then((result) => {
expect(result.storeState).toEqual({
data: [
{
id: '12345ABC',
name: 'hoge',
},
{
id: '6789DEFG',
name: 'foo',
},
],
error: {
description: '',
},
loading: false,
});
});
```
処理の流れは以下になります。
1. `expectSaga`関数の引数にredux-sagaのジェネレーター関数を呼びます。
2. `withReducer`メソッドの引数にreducerの関数を指定してreducerを接続します。
3. `provide`メソッドの引数の配列で最初の要素でAPIを呼び、その次の要素にAPIの結果(モックデータ)を指定します。
4. モックデータをreducerに渡すために`put`メソッドの引数にdataを設定します。
5. reducerに渡したデータの期待するデータを`toEqual`の引数に指定します。
APIの結果をモックデータにしてreducerで管理するデータがそれと同じになるというテストコードになります。
GETメソッドに限らず、PUT、POST、DELETEも同じような手順を踏めばおおよそのテストコードは書けるかと思います。
## つまずきポイント
上記の手順を踏めばおおよそのテストコードが書けますが、一部テストコードがPASS出来なかったのでその対処法について書きます。
DELETEメソッドやPUTメソッドを実装する際に、対象のidやcallback関数を`redux-saga`に付与するケースがあるかと思います。それを例に説明します。
### DELETEメソッド(ReduxとRedux-sagaの処理)
DELETEメソッドでidを`redux-saga`に付与する場合、削除ボタンを押下したときにdispatchでdeleteActionを呼ぶようにします。
`typeacript-fsa`のstarted関数では第一引数にpayloadのdataを設定し、第二引数にはmetaのdataを設定することができますので、APIにvalueを渡したいときはpayloadに、PUTやDELTEメソッドでその対象のidを付与するときはmetaに設定します。
ここではDELETEメソッドについて書くのでidを第二引数に設定します。
```javascript:Component
const handleClick = () => {
dispatch(
deleteAction.started(null, {
id: '12345ABC',
})
);
};
```
次にactionですが、上記のGETメソッドの相違としてmetaのidが付与されるのでその型定義とAPIでdeleteを実行したときにそのidを結果として受け取りたいので`ResultData`にidを付与しています。
```javascript:Action
type Meta = {
meta: {
id: string;
};
};
type ResultData = {
id: string;
};
export type DeleteAction = Action & Meta;
export const FETCH_DELETE = 'FETCH_DELETE' as const;
export const FETCH_DELETE_STARTED = 'FETCH_DELETE_STARTED' as const;
const actionCreator = actionCreatorFactory();
export const deleteAction = actionCreator.async<
null,
ResultData,
ResponseError
>(FETCH_DELETE);
```
`redux-saga`の処理は上記のGETメソッドとほぼ同じなのですが、ジェネレーター関数`fetchDelete`の引数にpayloadとmetaが含まれたactionを設定しています。そのactionにdelete対象のidが付与されていてAPIを叩くとき(`call(api, action)`)で使用しています。
また、reducerにidを渡したいので`typescript-fsa`のdone関数`deleteAction.done({ params: null, result: { id } })`にも付与しています。
このidの付与がテストコードを書く際につまずいたポイントとなります。
```javascript:Saga
export function* fetchDelete(
action: DeleteAction
): Generator<unknown, void, AxiosResponse> {
try {
yield call(api, action);
const {
meta: { id },
} = action;
yield put(deleteAction.done({ params: null, result: { id } }));
} catch (error) {
yield put(deleteAction.failed({ params: null, error }));
}
}
function* deleteWatcher(): SagaIterator {
yield takeLatest(FETCH_DELETE_STARTED, fetchDelete);
}
export default deleteWatcher;
```
reducerはdeleteの対象idを受け取って、そのid以外をstateとして更新します。
```javascript:Reducer
if (isType(action, deleteAction.done)) {
const {
payload: {
result: { id },
},
} = action;
return {
loading: false,
data: state.data.filter((state: State) => state.id !== id),
error: {
description: '',
},
};
}
```
### テストコード
上記のGETメソッドのテストコードを元に書くとこのようになります。
```javascript:テストコード
const id = '12345ABC';
it('テストコード', () => {
return expectSaga(fetchDelete)
.withReducer(reducer)
.provide([[call(api), null]])
.put(
deleteAction.done({
params: null,
result: { id },
})
)
.run()
.then((result) => {
expect(result.storeState).toEqual({
data: [],
error: {
description: '',
},
loading: false,
});
});
});
```
これでjestコマンドを叩くとerrorになります。
```
SagaTestError:
put expectation unmet:
Expected
--------
{ '@@redux-saga/IO': true,
combinator: false,
type: 'PUT',
payload:
{ channel: undefined,
action:
{ type: 'FETCH_DELETE_DONE',
payload: { params: null, result: [Object] } } } }
Actual:
------
1. { '@@redux-saga/IO': true,
combinator: false,
type: 'PUT',
payload:
{ channel: undefined,
action:
{ type: 'FETCH_DELETE_DONE',
payload: { params: null, result: [Object] } } } }
at new SagaTestError (node_modules/redux-saga-test-plan/lib/shared/SagaTestError.js:17:57)
at node_modules/redux-saga-test-plan/lib/expectSaga/expectations.js:67:13
at node_modules/redux-saga-test-plan/lib/expectSaga/index.js:563:7
at Array.forEach (<anonymous>)
at checkExpectations (node_modules/redux-saga-test-plan/lib/expectSaga/index.js:562:18)
```
エラーの原因を調べるためデバッグをしてみると`redux-saga`がcatchブロックで処理されてることが分かりました。
さらにデバッグをするとidが`undefined`となっていることが分かりました。
```javascript
const {
meta: { id },
} = action;
```
### idをテストコードに付与する
jestコマンドを叩くとidが`undefined`でcatchブロックで処理されるためテストコードがerrorになることが分かったので、テストコードにidを付与すればいいのですが、上記のactionオブジェクトを`redux-saga-test-plan`のどこで受け取るのかが分からずに途方に暮れてしまいました。
結論から書くと`expectSaga`関数の第二引数でactionオブジェクトが受け取れます。
```javascript:テストコード
return expectSaga(fetchDelete, {
meta: {
id: '12345ABC'
},
})
```
公式ドキュメントで「[expectSaga](https://github.com/jfairbank/redux-saga-test-plan#readme)」について記載されている箇所を引用します。
> Import the expectSaga function and pass in your saga function as an argument. Any additional arguments to expectSaga will become arguments to the saga function. The return value is a chainable API with assertions for the different effect creators available in Redux Saga.
> expectSagaへの追加の引数は、saga関数への引数になります。
ジェネレーター関数で指定したこのコードのことですね。
```javascript:Saga
export function* fetchDelete(
action: DeleteAction
)
```
`expectSaga`関数の第二引数にidを付与したらテストコードがPASSされました！
以上となります。同じerrorで困ってる方の一助となれば幸いです。