2021/09/29
はじめに
先日初めて npm package を公開してみた．
初公開時は手動＆目視テストだったが，今後の保守性・心理的安全性のためにテストを導入した．
recoil のテストはいつかまた必要になりそうだが忘れそうなので，備忘録として残す．
方法
jest を使う．特に，hooks のためのreact-hooks-testing-libraryも同時に使う．
フロントエンドのテストは難しいが，今回私が公開した package はカスタムフックであるためその限りではない．つまり，入力や処理に対する出力や結果を確認することでライブラリの要件を満たせると言い換えることが出来る．
依存
テスト導入のためにインストールした package は以下．
package.json
"devDependencies": {
"@testing-library/react-hooks": "^7.0.2",
"@types/jest": "^27.0.2",
"jest": "^27.2.3",
"ts-jest": "^27.0.5",
}
コード
テスト導入のために準備したファイルは以下．
jest.config.jslib/useXxx.test.ts
jest.config.js
jestの設定ファイル．*.tsのために設定した．
jest.config.js
module.exports = {
transform: {
'^.+\\.ts?$': 'ts-jest',
},
};
useXxx.test.ts
テストコードである．
基本的にはjestだが，Hooks に関わる箇所のみ工夫が必要．
最低限の書式をある程度，網羅的に書くと以下．
xxx.test.ts
// hooksをit/test内で使うための関数
import { renderHook, act } from '@testing-library/react-hooks';
// テスト対象となるhooks
import { useXxx } from './useXxx'
// 変数に代入しなくてもよいが，ここでは変数を準備
const initialState = xxx;
// describe(): (it/testのかたまりというイメージ)
// 文字列はdescribeの名前
describe('useXxx', () => {
// it()，これはtest()のエイリアスである
// 文字列はtestの名前
it('initialize', () => {
// このようにrenderHooks()を用いることでhooksを扱うことが出来る
const { result } = renderHook(() => useXxx(initialState));
// expect(result).toBe(expire)の書式で値を比較
// [0]の意は，普段react hooksを使うときの第一戻り値を使うということである
// 配列等を比較する場合はtoBe()の代わりにtoStrictEqual()を使う
expect(resut.current[0]).toBe(yyy);
});
it('action', () => {
const { result } = renderHook(() => useXxx(initialState));
// このようにhooksのアクションを呼び出す
// [1]の意は，普段react hooksを使うときの第２戻り値を使うということである
act(() => result.current[1].setXxx(zzz))
expect(resut.current[0]).toBe(zzz);
})
});
おわりに
React のテスト自体は数回作ったことがあったので，Hooks のためのライブラリの導入と簡単な書式の学習のみで導入することができました．
同じ事をする方の助けになればと思います．