Question

考虑我的javascript函数的以下片段 -

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

这里setSum是DOM中的elementID。我想了解这个函数将如何通过Jasmine或Jest完成的单元测试，当单元测试运行时，它将找不到'setSum'因此，DOM无法通过测试用例。我是测试用例的新手

Answer 1

依赖注入等技术可以帮到你。

不要假设函数可以使用与$('#setSum')对应的元素，而是将元素作为参数传递。

例如，将您的函数转换为：

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

现在，您的测试函数可以将任何HTML元素传递给第三个参数。

Answer 2

您可以创建一个标识为setSum的元素并附加到DOM.Use 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方法

JavaScript单元测试的工作原理

2 个答案: