Question

在使用Axios在Storybook中进行测试时，我正在尝试模拟对react / ts项目的REST请求。即使我将响应设置为数组对象，它似乎仍然以“请求失败，状态码为404”状态进行响应。

这是我进行REST调用的组件： TestPrompt.tsx

document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');




var calendar = new FullCalendar.Calendar(calendarEl, {
    locale: 'pt-br',
    plugins: ['interaction', 'dayGrid'],
    //defaultDate: '2019-04-12',
    
    editable: true,
    eventLimit: true,
    weekends:false,


    //hiddenDays: [ 2, 4 ] 
    events: 'list_eventos.php',
    extraParams: function () {
        return {
            cachebuster: new Date().valueOf()
        };
    },
    eventClick: function (info) {
        $("#apagar_evento").attr("href", "proc_apagar_evento.php?id=" + info.event.id);
        info.jsEvent.preventDefault(); // don't let the browser navigate
        console.log(info.event);
        $('#visualizar #id').text(info.event.id);
        $('#visualizar #id').val(info.event.id);
        $('#visualizar #title').text(info.event.title);
        $('#visualizar #title').val(info.event.title);
        $('#visualizar #start').text(info.event.start.toLocaleString());
        $('#visualizar #start').val(info.event.start.toLocaleString());
        $('#visualizar #end').text(info.event.end.toLocaleString());
        $('#visualizar #end').val(info.event.end.toLocaleString());
        $('#visualizar #color').val(info.event.backgroundColor);
        $('#visualizar').modal('show');
    },
    selectable: true,
    select: function (info) {
        //alert('Início do evento: ' + info.start.toLocaleString());
        $('#cadastrar #start').val(info.start.toLocaleString());
        $('#cadastrar #end').val(info.end.toLocaleString());
        $('#cadastrar').modal('show');
    }

    
});

calendar.render();




});

这是我的 TestPrompt 组件用来发出请求的方法： UtilityFunctions.ts

const onClickHandler = () => {
    requestOrMock("http://localhost:9002/projectPlan/projectTasks?project=FAKEWID")
}

这是我的模拟回应的测试： Prompt.stories.tsx

import  axios from 'axios';

export const axiosMock = axios.create();

export const requestOrMock = async (uri: string) => {
    const response = axiosMock.get(uri);
    return response;
}

当我在故事书中单击此组件时，它会将请求发送到指定的url，但是它将获得404响应，而不是我指定的footballTeams对象。知道我做错了什么吗？感谢您的帮助。

Answer 1

如果我正确地解决了您的问题，则需要调用模拟的onGet（）来设置模拟端点，然后向该端点发送请求。

mock.onGet("/teams").reply(200, footballTeams);

storiesOf('Components/MultiSelect', module)
  .add('Prompt1', () => {
    axios.get("/teams")
    .then(res => console.log(res.data))
    return (
      <TestPrompt/>
    );
  })

Answer 2

所发出的请求是相对于主机发出的，因此实际上不是“ / projectPlan / projectTasks？project”，而是发送了“ http：// localhost：9002 / projectPlan / projectTasks？project = FAKEWID” = FAKEWID”。您可能只需要在此处传递路线即可。

即使设置了模拟响应，为什么我的Axios响应也返回404？

2 个答案: