mswでフロントエンドのインテグレーションテストを実装する

mswでフロントエンドのインテグレーションテストを実装する

Transcript

1. msw でフロントエンドの インテグレーションテストを実装する Press Space for next page
2. 自己紹介 📝 飯野陽平（wheatandcat ） 🏢 フリーランスエンジニア（シェアフル株式会社CTO ） 💻 Blog: https://www.wheatandcat.me/ 🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
3. msw とは msw(Mock Service Worker) は、ネットワークレベルでAPI リクエストをインターセプトしてmock のデータ を返すためのライブラリ Service Worker を使用しているので、別プロセスでローカルのサーバーを立ち上げる必要が無く手軽に利 用できる フロントエンドのテストコードやStroybook などでも利用可能 デフォルトでRESTful API とGraphQL をサポートしている msw Service Worker とは msw Choose an API
4. インテグレーションテストとは？ フロントエンドのテストは主に以下の4 つに分 類される End to End Integration Unit Static 上位レイヤーに行くほど以下の特徴がある フィードバックの速度は遅い 実装コストは高い 信頼性は向上する The Testing Trophy and Testing Classifications
5. インテグレーションテストのこれまで ① msw 導入前だと各API をjest のmock 機能を使用してAPI のコールメソッドを、すべてmock させて実装させて いく必要があった コード的には次のようになっていた
6. インテグレーションテストのこれまで ② describe("components/pages/ItemDetail/Connected.tsx", () => { jest.spyOn(queries, "useItemQuery").mockImplementation((): any => ({ loading: false, data: { item: { id: "1", title: " 本を読む", categoryID: 2, date: "2021-01-01T00:00:00+09:00", }, }, error: undefined, refetch: jest.fn(), })); const wrapper = shallow(<Connected {...propsData()} />); it(" 正常にrender すること", () => { expect(wrapper).toMatchSnapshot(); }); });
7. インテグレーションテストのこれまで ② jest.spyOn(queries, "useItemQuery").mockImplementation((): any => ({ loading: false, data: { item: { id: "1", title: " 本を読む", categoryID: 2, date: "2021-01-01T00:00:00+09:00", }, }, error: undefined, refetch: jest.fn(), })); describe("components/pages/ItemDetail/Connected.tsx", () => { const wrapper = shallow(<Connected {...propsData()} />); it(" 正常にrender すること", () => { expect(wrapper).toMatchSnapshot(); }); });
8. インテグレーションテストのこれまで ② describe("components/pages/ItemDetail/Connected.tsx", () => { jest.spyOn(queries, "useItemQuery").mockImplementation((): any => ({ loading: false, data: { item: { id: "1", title: " 本を読む", categoryID: 2, date: "2021-01-01T00:00:00+09:00", }, }, error: undefined, refetch: jest.fn(), })); const wrapper = shallow(<Connected {...propsData()} />); it(" 正常にrender すること", () => { expect(wrapper).toMatchSnapshot(); }); });
9. モチベーション 今までmock 作業で実装に時間の掛かったインテグレーションテストを簡単に実装できる状態にしたい また、実際の動作に伴ったシナリオテストを実装できる状態にしたい
10. 実装に使用したライブラリ msw typed-document-node graphql-codegen-typescript-mock-data testing-library/react-native
11. 実装PR typed-document-node への移行 msw を導入してGraphQL をモックしたテストコードを書く① msw を導入してGraphQL をモックしたテストコードを書く②
12. 実装してみた ① まずは、typescript-react-apollo →typed-document-node 移行を実装 PR: typed-document-node への移行 実装の紹介 こちら、次のPR で使用するgraphql-codegen-typescript-mock-data を使用しやすくするために移行 typed-document-node は特定のGraphQL クライアントに依存せずにGraphQL のtype を自動生成してくれる codegen のプラグイン
13. 実装してみた ② 次に、msw とgraphql-codegen-typescript-mock-data を導入 PR: msw を導入してGraphQL をモックしたテストコードを書く① 実装の紹介 graphql-codegen-typescript-mock-data は、GraphQL のSchema 情報からダミーデータを生成してくれるライ ブラリ これを利用することでmock データを保守を自動生成で補うようにする 参考コード msw は以下の部分でテスト時に起動させる 参考コード テストは以下の通りに記載 参考コード
14. 実装してみた ③ 最後に、前のPR からの追加で、より正確なシナリオテストを実装 PR: msw を導入してGraphQL をモックしたテストコードを書く② 実装の紹介 アイテムの更新のシナリオテストを追加 参考コード testing-library/react-native を使用して各入力を設定 参考コード 入力に設定した値と更新のAPI 時に設定された値とGraphQL の variables を比較して一致しているかテスト 参考コード
15. まとめ msw を使えば気軽にインテグレーションテストを書けて、かなり良い。 graphql-codegen 周りの自動生成周りのツールと相性が良い テストから仕様が把握できるコードにしやすくなった
16. ご清聴ありがとうございました