web-dev-qa-db-ja.com

Storybookからの模擬API呼び出し

axios-mock-adapteraxiosで行われたリクエストでのみ機能しますか？

APIにPOSTするコンポーネントを作成しました（axiosではなくVanilla XHRを使用）。 Storybookでテストしていて、エンドポイントがまだ存在しないため、これらのPOSTリクエストをインターセプトしたい：

import React from "react"
import { storiesOf } from "@kadira/storybook"
import MyComponent from "./MyComponent"
import axios from "axios"
import MockAdapter from "axios-mock-adapter"

var mock = new MockAdapter(axios)

storiesOf("My Component", module).addWithInfo(
  "Simulator",
  () => {
    mock.onPost().reply(500)
    return <MyComponent />
  },
  {}
)

私のコンポーネントはまだAPIエンドポイントに到達しようとしていますが、期待される500応答ではなく404応答を受け取ります。

axios-mock-adapteraxiosで行われたリクエストでのみ機能しますか？ mock呼び出しはMyComponent内にある必要がありますか？

ありがとう。

reactjsmockingaxiosstorybookaxios-mock-adapter
9
Alan P.

xhr-mockは、おそらくインターネットを介してリクエストを行いたくないローカルテストで機能するはずです。

テスト以外では、実際のエンドポイントが構築されるのを待っている場合は、開発でMock/it（ https://mockit.io ）を使用できます。専用のサブドメインを申請して、後で実際のサブドメインと交換することができます。免責事項：これは私が最近リリースしたサイドプロジェクトであり、フィードバックをお待ちしています。

3
Vance Faulkner

Axios-mock-adapterの代わりにxhr-mockを使用できます。

XMLHttpRequestをモックするためのユーティリティ。

テストに最適です。バックエンドがまだ構築されている間のプロトタイピングに最適です。

NodeJSとブラウザで動作します。 Axios、jQuery、Superagent>、そしておそらくXMLHttpRequestに基づいて構築された他のすべてのライブラリと互換性があります

import mock from 'xhr-mock';

storiesOf("My Component", module).addWithInfo("Simulator",
() => {

    mock.post('', {
      status: 500,
      body: '{}'
    });

    return <MyComponent />
    },
    {}
)

さらに、ストーリーブックのpreview-head.htmlファイルにjqueryスクリプトを追加する必要があります

1） https://www.npmjs.com/package/xhr-mock

1
michalbegej

json-serverを使用してAPI呼び出しをインターセプトし始めました。 1つのタブで開始し、別のタブでストーリーブックを開始する必要がありますが、それはかなりクールです。

1
Alan P.

FetchMocknpmモジュールを使用できます。すべてのXHR呼び出しは、提供されたデータでモックされます。

ストーリーブックの構成：

import React from 'react';
import Messages from '../components/messagesList';

import fetchMock from "fetch-mock";
import MESSAGES from './data/messages';

fetchMock.get('/messages', MESSAGES);

export default {
  title: 'Messages',
  component: Messages
};

export const ToStorybook = () => <Messages  />;

ToStorybook.story = {
  name: 'Messages list',
};

それを行う方法の完全なチュートリアルは YouTube にあります

0
Maxim Rudniy