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); 
}

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

我在某处读到，测试原始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成功

expect（jest.fn（））。toBeCalledWith（expected）

预期的模拟函数已被调用：         [“ GET”，“ http://example.com”，是]       但是它没有被调用。

我是我犯了一些愚蠢的错误，但是无法弄清楚。我的单元测试很差。

任何帮助将不胜感激。

Answer 1

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

createXHRmock();

// here you should call GET request

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

在这两个语句之间，您需要调用sendWeatherrequest，并修改您的generateUrl函数返回的期望（打开）期望URL。

例如

createXHRmock();

sendWeatherrequest('FR')

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

开玩笑的XMLHttpRequest模拟请求显示错误

1 个答案: