#reactjs #axios #storybook
#reactjs #axios #сборник рассказов
Вопрос:
Я пытаюсь имитировать свои запросы REST для проекта react / ts при тестировании в Storybook с использованием Axios. Несмотря на то, что я устанавливаю ответ на объект массива, он по-прежнему, похоже, отвечает статусом «Ошибка запроса с кодом состояния 404».
Вот мой компонент, выполняющий вызов REST: TestPrompt.tsx
const onClickHandler = () => {
requestOrMock("http://localhost:9002/projectPlan/projectTasks?project=FAKEWID")
}
Вот метод, который мой компонент TestPrompt использует для отправки запроса: UtilityFunctions.ts
import axios from 'axios';
export const axiosMock = axios.create();
export const requestOrMock = async (uri: string) => {
const response = axiosMock.get(uri);
return response;
}
Вот мой тест, который имитирует ответ: Prompt.stories.tsx
import * as React from "react";
import {storiesOf} from '@storybook/react';
import TestPrompt from "../components/common/Prompt";
import MockAdapter from 'axios-mock-adapter';
import { axiosMock } from "../utils/utilityFunctions";
const mock = new MockAdapter(axiosMock);
const blankPromptRequestUri = "http://localhost:9002/projectPlan/projectTasks?project=FAKEWID";
const footballTeams = [
{
"descriptor": "New England Patriots",
"id": "NewEnglandPatriots"
},
{
"descriptor": "Seattle Seahawks",
"id": "SeattleSeahawks"
}
];
storiesOf('Components/MultiSelect', module)
.add('Prompt1', () => {
mock.onGet(blankPromptRequestUri).reply(200, footballTeams);
return (
<TestPrompt/>
);
})
Когда я нажимаю на этот компонент в storybook, он отправляет запрос на указанный URL-адрес, но получает ответ 404, а не указанный мной объект footballTeams. Есть идеи, что я сделал не так? Спасибо за вашу помощь.
Ответ №1:
Если я правильно понял вашу проблему, вам нужно вызвать OnGet() из mock для настройки макетной конечной точки, а затем отправить запрос на эту конечную точку.
mock.onGet("/teams").reply(200, footballTeams);
storiesOf('Components/MultiSelect', module)
.add('Prompt1', () => {
axios.get("/teams")
.then(res => console.log(res.data))
return (
<TestPrompt/>
);
})
Комментарии:
1. Я забыл упомянуть об этом в вопросе, но запрос к этой конечной точке отправляется, когда я нажимаю на компонент в Storybook, и именно тогда я вижу 404, а не ответ footballTeams. Вопрос обновлен.
2. Вы пытались удалить хост (localhost: 9002), просто сохранив маршруты?
Ответ №2:
Выполняемые запросы выполнялись относительно хоста, поэтому вместо «http://localhost:9002/projectPlan/projectTasks?project=FAKEWID » будучи отправленным, это было на самом деле «/projectPlan /projectTasks?project= FAKEWID». Вероятно, вам нужно будет только передать маршруты здесь.