フロントエンドのリクエストに渡す値のテストについて

今回は短い備忘録です。

普段フロントエンドでAPI通信する際は、皆さんmockを使っていると思います。
よく見るのが、完全にmockにして、ハードコードで値を返してしまうといったテストです。
Pythonなどのバックエンドなら、渡す値も割とコードで明確に示せるので良いのですが、フロントエンドの開発だとGUIコンポーネントの値がガンガン変わっていったりするので果たして正しい値が渡されているのか・・・？といった不安に苛まれたことは一度や二度ではありません。

そこで僕がやってる方法をここに記録として残してみます。

以下はTypeScriptっぽい擬似コードになります。

// asset用の変数を用意
let varForAssert;
// 通信モジュールをmock
const mock = jest.spyOn(通信モジュール, '通信メソッド').mockImplementation((methodName: string, formData: { [p: string]: any }, とか、その後の処理を受け取ったりする) => {
    if(methodName == 'method_A'){
        varForAssert = formData;
    }
});
// 通信を呼び出すような処理を行う
~~ なんかいい感じの処理  ~~
// assert
expect(mock).toBeCalledTimes(呼ばれた回数);
expect(varForAssert).toStrictEqual(期待するデータ)

基本的には

1. assert用の変数を用意
2. 通信処理をmockする。mock内ではどの通信かを特定、僕は渡されたデータをassert用変数に格納の2種類は必須処理としている。
3. 通信処理を行うなにかの処理を実行
4. assertする

の流れになってます。 mockの中でassertしてもいいかもしれませんね。それは好きにやると良いと思います。

これはリクエストに渡された値のテストだけなので、この処理をいろんなテストに挟み込んで対応しているといった形になります。