在 moxios 中指定 response.request.responseURL答案

【问题标题】：Specify response.request.responseURL in moxios在 moxios 中指定 response.request.responseURL
【发布时间】：2017-12-23 13:57:11
【问题描述】：

我目前正在尝试编写一些功能，需要在 axios 处理响应时设置 response.request.responseURL 值。但是，我似乎无法使用 moxios 设置此值。这是我的测试的样子：

it('resets list selection if input contents were replaced', (done) => {
    component.currently_selected_list_value = 10;
    component.last_called_url = 'henkiehoutman';

    let input = domElt.querySelector('input');
    ReactTestUtils.Simulate.change(input);

    moxios.wait(() => {
        let request = moxios.requests.mostRecent();
        request.respondWith({
            status: 200,
            response: [{
                customer_info_customers: ['', '', '', '', ''],
                domain_info_customers: {},
            }],
            request: {responseURL: 'banaan'}
        }).then(() => {
            // The contents were replaced, so it's best to forget whatever our selection was.
            expect(component.currently_selected_list_value).toEqual(-1);
            done();
        });
    });
});

这是我的实际应用程序的样子：

onChange (event) {
    return axios.get(
        this.props.ApiUrl + encodeURIComponent(event.target.value)
    ).then(
        (response) => {
            let response_url = response.request.responseURL;  // This is the value I want to set manually.
            if(this.shouldHandleResponse(response_url)){
                this.last_called_url = response_url;
                let data = response.data;
                this.setState({results: data, dropdown: data.length > 0});

                if ( this.currently_selected_list_value > max_index) {
                    this.currently_selected_list_value = max_index;
                }
            }
        }
    );
},

但是，当我记录这个值是什么时，它只会显示undefined。这就是response.request 的实际值（将其放在引号中，这样更易读）：

LOG: Request{resolve: function (a) { ... }, reject: function (a) { ... }, config: Object{adapter: function mockAdapter(config) { ... }, transformRequest:对象{0：...}，transformResponse：对象{0：...}，超时：0，xsrfCookieName：'XSRF-TOKEN'，xsrfHeaderName：'X-XSRF-TOKEN'，maxContentLength：-1，validateStatus：函数validateStatus(status) { ... }, headers: Object{Accept: ..., X-CSRFToken: ...}, method: 'get', url: 'my_api_url/', data: undefined}, headers: Object {Accept: 'application/json, text/plain, /', X-CSRFToken: 'my_csrf_token'}, url: 'my_api_url/', timeout: 0, withCredentials: false, responseType: undefined}

这会破坏我的应用程序，因为应该始终定义 responseURL。看起来它正在覆盖我在 moxios 中定义的请求。这不一定是坏事，因为我认为它需要这些东西才能正常运行。但是，如果我可以在这个请求中添加一些值，那就太好了。

所以;如何在 moxios 中向此请求添加 responseURL 值？

【问题讨论】：

标签： javascript reactjs testing axios moxios

【解决方案1】：

事实证明，由于我将其链接到 respondWith() 的方式，无法设置 responseURL。在 moxios 源代码中检查此函数后，我发现您在此处传递的值实际上只与返回的实际数据有关，而不是实际的响应对象。

我还看到respondWith() 函数返回一个Promise 对象，这很符合逻辑。我想我不应该在Promise 上设置任何东西，而是根据实际请求。所以我将返回的Promise 分配给了promise 变量，并解开了测试的.then() 部分。之后我设置了请求的responseURL。然后我再次致电promise.then() 断言我的测试已通过。

这是我最终追求的目标：

it('resets list selection if input contents were replaced', (done) => {
    component.currently_selected_list_value = 10;
    component.last_called_url = 'henkiehoutman';

    let input = domElt.querySelector('input');
    ReactTestUtils.Simulate.change(input);

    moxios.wait(() => {
        let request = moxios.requests.mostRecent();
        let promise = request.respondWith({
            status: 200,
            response: [{
                customer_info_customers: ['', '', '', '', ''],
                domain_info_customers: {},
            }],
        });
        request.responseURL = 'banaan';

        promise.then(() => {
            // The contents were replaced, so it's best to forget whatever our selection was.
            expect(component.currently_selected_list_value).toEqual(-1);
            done();
        });
    });
});

【讨论】：