如何在测试VueJS组件时将数据设置为此。$ root？

在VueJS 2.4，我们可以在此的jsfiddle访问从组件感谢根数据到这个$根，如：

如果你点击一个按钮，就可以看到在显示的“橙色”控制台，这是一个根数据，不属于触发它的待办事项。

现在我在茉莉花测试中。此测试正常运行/运行/正常。

但todo-item组件中的console.log输出'undefined'。

如何在测试中向此。$ root实例注入数据？

describe("TodoItem", function() { 

    var sut; 
    var message = {text:'word'} 

    beforeEach(function() { 
    var Constructor = Vue.extend(TodoItem); 
    sut = new Constructor({ 
     propsData: { 
     todo: message, 
     } 
    }).$mount(); 
    }); 

    it("Should be able to reverse the given word", function() { 
    // Given 
    expect(sut.todo.text).toEqual('word'); 
    expect($(sut.$el).find('li').text()).toEqual('word'); 

    //When 
    sut.reverseMessage(); 

    // Bang !! problem here. 'undefined' is printed, because there is nothing attached to this.$root when inside a test   

    // Then 
    expect(sut.todo.text).toEqual('drow'); 

    }); 
});

来源

2017-08-12 bdavidxyz

当您从一个扩展组件创建Vue公司，你在这里做的：

var Constructor = Vue.extend(TodoItem); 
sut = new Constructor({ 
    propsData: { 
    todo: message, 
    } 
}).$mount();

Constructor是的$root。 TodoItem组件中没有display_light属性，这就是为什么console.log会输出undefined，因为它实际上是undefined。

如果你想将数据属性添加到组件，以便为预期（可能是一个坏主意），你的测试将工作，你可以这样来做：

var Constructor = Vue.extend(TodoItem); 
sut = new Constructor({ 
    propsData: { 
    todo: {text: "hello world"}, 
    }, 
    data(){ 
    return { 
     display_light: 'orange' 
    } 
    } 
}).$mount();

这是你的fiddle updated。

来源

2017-08-12 16:59:52 Bert

如何在测试VueJS组件时将数据设置为此。$ root？

回答

相关问题