使用 Jest 測試 jquery ajax 調用

Question

我的腳本文件中有以下 javascript 代碼，我正在使用 JEST 為以下 function 編寫測試

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並且未涵蓋“失敗”。 我已經花了一天時間，但沒有找到任何解決方案任何對此的幫助將不勝感激。

Answer 1

由於你的XHR.done回調有分支（當它被調用時html並且沒有html ）你將不得不將它模擬為調用回調的 function

• 一旦有了價值

   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% 覆蓋率的工作示例