javascript - 测试VueJS组件时如何将数据设置到this.$root？

Question

在 VueJS 2.4 中，我们可以通过 this.$root 从组件访问根数据，就像在这个 JSFiddle 中一样:

https://jsfiddle.net/bjg2yL1u/1/

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

现在我正在进行 Jasmine 测试。该测试正常工作/运行/为绿色。

但是 todo-item 组件内的 console.log 输出“未定义”。

在测试中如何将数据注入(inject)到 this.$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');

  });
});

Answer 1

当您像这里一样从扩展组件创建 Vue 时:

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

构造函数是$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 .