Возможно ли получить доступ к реальному API в React Storybook - PullRequest
Новая
       11

Возможно ли получить доступ к реальному API в React Storybook

0 голосов
/ 03 мая 2020

Я использую Storybook для тестирования своих компонентов пользовательского интерфейса React.

Однако, когда я добираюсь до точки, где мое Действие выполняет запрос Ax ios, я получаю ответ 404.

Ниже приведен код, используемый в файле действий реакции:

предположим, что определение * ax ios реализации, thunk и определения действий 

    getDelayedThunkRes: () => {
        return (dispatch) => {
            dispatch(delayedResActions.getInitialRes());
            axios.get("/test").then(success => {
                console.log(success);
            }).then(err => {
                console.log(err);
            })
        }
    }

localhost: 8080 - мой реальный сервер, на котором я хочу подключиться к. Очевидно, это должно вызвать у меня ошибку, потому что мой сборник рассказов работает на 9009. Как я могу соединить два?

Обратите внимание, это работает для моего приложения Create React. Пакет Create React App предоставляет возможность проксировать все вызовы к серверу, используя поле «proxy» в пакете. json

Существуют ли какие-либо аналогичные инструменты в Storybook или Storybook предполагается использовать исключительно со стати c фиктивные данные?

1 Ответ

0 голосов
/ 03 мая 2020

Хорошо, я нашел удивительный пост о том, как создать промежуточное программное обеспечение для сборника рассказов React для API https://medium.com/@wathmal / добавление маршрутизатора-промежуточного программного обеспечения-реагирования-storybook-4d2585b09f c

Пожалуйста, перейдите по ссылке. Парень заслуживает должного уважения.

Вот моя реализация этого в ES5 (каким-то образом промежуточное ПО Storybook не может переноситься):

создайте это промежуточное ПО. js внутри каталога .storybook: 

const express = require('express');
const bodyParser = require('body-parser');

const expressMiddleWare = function(router) {
    router.use(bodyParser.urlencoded({extended: false}));
    router.use(bodyParser.json());
    router.get('/test', function(req, res) {
        res.send('Hello World!');
        res.end();
    });
}

module.exports = expressMiddleWare

Предупреждение: вам придется перезапускать Storybook каждый раз, когда вы вносите изменения в промежуточное ПО.

Благодаря этому я могу позвонить из моего реагировать на действия.

Далее я попытаюсь реализовать промежуточное ПО HTTP-прокси express, чтобы перенаправить эти вызовы промежуточного программного обеспечения сборника рассказов на мой настоящий express сервер.

Редактировать 1:

Кажется, в новой технике используются декораторы, особенно с stroybook-addon-headless. Сборник рассказов для установки URL-адресов серверов

https://github.com/ArrayKnight/storybook-addon-headless

Я еще не попробовал

...