フロントエンドのテストのモックには msw を使うのが最近の流行りらしい
皆様フロントエンドのテストを書いていらっしゃいますでしょうか？ フロントエンドのテストを書くときには API コールする処理を全てモックする必要があります。外部の API をコールする処理をテストに含めると API サーバーが落ちているなどの外部の要因によってテストが失敗してしまう可能性がありますし、テストを実行するたびに実際に API をコールしてしまうとサーバーに負荷がかかってしまうなど外部に対しても悪影響を与えてしまいます。 さて、従来のモックする手段としては Jest のモックを利用して axios や fetch などのモジュールをモック化する手法がよく使われていたかと思います。 最近のテスト手法として API コールをモックする際に Jest ではなく Mock Service Worker (以下 msw ）を使用する手法が注目されています。実施にどのように使用されているのか
Stop mocking fetch
What's wrong with this test? // __tests__/checkout.js import * as React from 'react' import {render, screen} from '@testing-library/react' import userEvent from '@testing-library/user-event' import {client} from '~/utils/api-client' jest.mock('~/utils/api-client') test('clicking "confirm" submits payment', async () => { const shoppingCart = buildShoppingCart() render(<Checkout shoppingCart={shoppi
OpenAPIとMSWを組み合わせてAPIモックしている話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2021の10日目の記事です。 こんにちは。食べログ フロントエンドチームの原田です。 現在食べログでは、jQuery+Railsで実装されているフロントエンドをReact/TypeScriptベースに置き換えるリプレースプロジェクトを進めています。 食べログでは、リプレース戦略としてRails上に部分的にReactを導入する戦略をとっており、 以前の記事で部分導入するにあたってRailsに依存しないコンポーネント結合環境を用意していることを紹介しました。 Railsに依存しないコンポーネント結合環境を構築するにあたって必要となるAPIモックについて、 いままでPrismを利用してきましたが、今期に入ってからMock Service Worker（以後、「MSW」と表記）も利用して開発を行っています。 API定義は以前よりOpenAPI（Swagger
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Support mocking WebSocket APIs · Issue #156 · mswjs/msw
Can I mock external content in an iframe? · mswjs/msw · Discussion #952
Generate API responses from swagger doc · Issue #394 · mswjs/msw
GitHub - mswjs/data: Data modeling and relation library for testing JavaScript applications.
GitHub - mswjs/examples: Examples of Mock Service Worker usage with various frameworks and libraries.
