Макет API звонков из сборника рассказов

Question

Есть ли axios-mock-adapter работать только по запросам, сделанным с axios?

Я написал компонент, который отправляет в API (используя vanilla XHR, а не axios). Я тестирую его в 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, и я получаю ответ 404, а не ожидаемый ответ 500.

Есть ли axios-mock-adapter работать только по запросам, сделанным с axios? Ли mock звонок должен быть внутри MyComponent?

Благодарю.

Answer 1

xhr-mock должен работать для локального тестирования, когда вы, вероятно, не хотите делать запросы через Интернет.

Вне тестирования, если вы ожидаете создания реальных конечных точек, вы можете использовать Mock / it ( https://mockit.io/) при разработке. Вы можете запросить свой собственный выделенный поддомен и поменять его позже на настоящий. Отказ от ответственности: это побочный проект, который я недавно выпустил, и я хотел бы получить любые отзывы о нем!

Answer 2

Вы можете использовать xhr-mock вместо axios-mock-adapter.

Утилита для насмешки XMLHttpRequest.

Отлично подходит для тестирования. Отлично подходит для создания прототипов, пока ваш бэкэнд еще строится.

Работает в NodeJS и в браузере. Совместим с Axios, jQuery, Superagent > и, вероятно, с любой другой библиотекой, построенной на XMLHttpRequest

import mock from 'xhr-mock';

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

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

    return <MyComponent />
    },
    {}
)

Кроме того, вам нужно добавить скрипт jquery в файл preview-head.html в сборнике рассказов.

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

Answer 3

Вы можете использовать Storybook-addon-mock для имитации любого запроса выборки или XHR с помощью панели аддонов. Этот пакет поддерживает

1. Измените ответ с панели и протестируйте на лету.
2. Измените код состояния, чтобы проверить реакцию на ошибку.
3. Добавьте время задержки, чтобы испытать состояние загрузки.

Answer 4

Я начал использовать json-server перехватывать вызовы API. Вы должны запустить его в одной вкладке и запустить сборник рассказов в другой, но это довольно круто.

Answer 5

You can use fetchMock npm module. All XHR call will be mocked with data you provide.

Storybook configuration:

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',
};

The complete tutorial how to do it is on YouTube