JavaScript單元測試的工作方式

Question

考慮一下我的javascript函數的以下代碼段-

firstJs.prototype.SetSum=function(a,b){
    var htmlToBind="<div>"+(a+b)+"</div>";
    $('#setSum').html(htmlToBind);
};

這里的setSum是DOM中的elementID。我想了解這個函數將如何通過Jasmine或Jest完成的單元測試，並且當單元測試運行時它將不會在DOM中找到'setSum'，因此無法通過測試用例。我是測試用例中的新秀

Answer 1

依賴注入之類的技術將在這里為您提供幫助。

與其假定與$('#setSum')對應的元素對函數不可用， $('#setSum')將其作為參數傳遞。

例如，將函數轉換為此：

function (a, b, element) {
    var htmlToBind = "<div>" + (a + b) + "</div>";
    element.innerHTML(htmlToBind);
}

現在，您的測試函數可以將任何HTML元素傳遞給第三個參數。

Answer 2

您可以創建一個id為setSum的元素並附setSum DOM。使用jasmine-jquery證明了可以用作匹配器的一組方法。

希望這個片段會有用

 describe('Your test description',function(){
    //rest of the code
    // appending an element to the DOM, the original function will append
    // the new div inside this element
   $('body').append('<div id = "setSum"></div>');
   it('Should test element is bind to DOM',function(){
       firstJS.SetSum(4,5);
       expect($('#setSum')).toContainHtml('<div>9</div>');
       // remove the element after test

     }}
})

如果您打算失敗，則跳過$('body').append('<div id = "setSum"></div>'); 。 該測試將找不到DOM，並且將無法在其上使用html方法