javascript - Jest XMLHttpRequest 模拟请求显示错误

Question

我有以下功能。

export function sendWeatherrequest(countryName) {
    let xmrRequest = new XMLHttpRequest();
    xmrRequest.onload = requestListener;
    xmrRequest.onerror = requestError;

    xmrRequest.open('get', generateUrl(name), true);
    xmrRequest.send(); 
}

function requestListener() {
    let data = JSON.parse(this.responseText);
    displayPage(data); 
}

我正在使用 jest 进行单元测试。

因为，我在某处读到测试原始 XMLHttpRequest 是个坏主意。是真的吗？

因此，根据 XHR testing in Jest 创建回答

let open, send, status, onload, setRequestHeader, response;
function createXHRmock() {
    open = jest.fn();
    status = 200;
    response = JSON.stringify([{
        title: 'some data.',
        weather: 'wind'
    }]);

    send = jest.fn().mockImplementation(function(){   
        onload = this.onload.bind(this);
        onerror = this.onerror.bind(this);
    });

    const xhrMockClass = function () {
        return {
            open,
            send,
            status,
            setRequestHeader,
            response
        };
    };

    window.XMLHttpRequest = jest.fn().mockImplementation(xhrMockClass);
}

it('XHR success', () => {
    createXHRmock();

    expect(open).toBeCalledWith('GET', 'http://example.com', true);
    expect(send).toBeCalled();

    onload();
});

但是，我遇到了以下错误。

XHR success

expect(jest.fn()).toBeCalledWith(expected)

Expected mock function to have been called with: ["GET", "http://example.com", true] But it was not called.

我可能犯了一些愚蠢的错误，但我想不通。我的单元测试很差。

如有任何帮助，我们将不胜感激。

Answer 1

查看 answer you linked ，示例答案中有一点:

createXHRmock();

// here you should call GET request

expect(open).toBeCalledWith('GET', 'http://example.com', true);

在这两个语句之间，您需要调用您的 sendWeatherrequest，并修改您的 expect(open) 期望从您的 generateUrl 函数返回的 URL。

例如

createXHRmock();

sendWeatherrequest('FR')

expect(open).toBeCalledWith('GET', 'http://theweather.net/france', true);