javascript - 使用 Jest 测试 jquery ajax 调用

Question

我的脚本文件中有以下 javascript 代码，我正在使用 JEST 为以下函数编写测试

function getData() {
    var $messageBar = $("#message-bar");
    var messageBarLength = $messageBar.length;
    if (messageBarLength == 0) return;
    var apiUrl = $messageBar.attr("data-url");
    if (messageBarLength && apiUrl) {
        apiUrl = apiUrl.replace("{c}/{l}/{s}/{cs}"
        
        $.get(apiUrl)
            .done(function (html) {
                if (html) {
                    $messageBar.html(html);
                } else {
                    $messageBar.hide();
                }
            })
            .fail(function (error) {
                $messageBar.hide();
            });
    }
}

我的笑话测试如下

test("test",
    () => {

        const jqXHR = {
            done: jest.fn().mockImplementation(cb => {
                
                return this;
            }),
            fail: jest.fn().mockImplementation(cb => {
               
                return this;
            })
        };
        
        $.get = jest.fn().mockImplementation(() => jqXHR);
        $.get();
        getData();
        expect($.get).toHaveBeenCalled();
    });

测试运行良好，但在代码覆盖范围内，它的显示done和“失败”没有被覆盖。我已经花了一天但没有找到任何解决方案对此的任何帮助将不胜感激。

标签： javascriptnode.jsunit-testingjestjs

Answer 1

由于你的XHR.done回调有分支（当它被调用时有html和没有html）你将不得不模拟它作为一个调用回调的函数

• 一次有值

        const xhr = {
          done: jest.fn((cb) => {
            cb();
            return xhr;
          }),
          fail: jest.fn((cb) => {
            cb();
            return xhr;
          }),
        };
  

• 一次没有值

        const xhr = {
          done: jest.fn((cb) => {
            cb('<span>some HTML</span>');
            return xhr;
          }),
          fail: jest.fn((cb) => {
            cb();
            return xhr;
          }),
        };
  

这是一个覆盖率 100%的工作示例