来自 Storybook 的模拟 api 调用

Posted 2023-02-19

【中文标题】来自 Storybook 的模拟 api 调用

【英文标题】：Mock api calls from Storybook

【发布时间】：2018-08-13 18:31:13

【问题描述】：

axios-mock-adapter 是否仅适用于使用 axios 发出的请求？

我编写了一个 POST 到 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 内？

谢谢。

【问题讨论】：

我认为 axios 模拟适配器不会拦截来自其他库的 ajax 调用。如果你想在 storybook 上使用 axios 和 mock api 调用，我写了一个小教程：medium.com/@rafaelrozon/mock-axios-storybook-72404b1d427b

【参考方案1】：

xhr-mock 应该适用于您可能不想通过 Internet 发出请求的本地测试。

在测试之外，如果您正在等待构建真正的端点，您可以在开发中使用 Mock/it (https://mockit.io)。您可以声明自己的专用子域，然后将其换成真正的子域。免责声明：这是我最近发布的一个副项目，希望有任何反馈！

【参考方案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 />
    ,
    
)

另外，您需要在 storybook 的 preview-head.html 文件中添加 jquery 脚本

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

【参考方案3】：

我已经开始使用json-server 来拦截 API 调用。您必须在一个选项卡中启动它，然后在另一个选项卡中启动故事书，但这很酷。

【参考方案4】：

您可以使用 fetchMock npm 模块。所有 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上

【讨论】：

这是一个不错的库，而且很容易使用。

【参考方案5】：

您可以使用 storybook-addon-mock 使用插件面板模拟任何 fetch 或 XHR 请求。 这个包支持

修改面板的响应并即时测试。 修改状态码以验证错误响应。 添加延迟时间来体验加载状态。