これにデータを設定するにはどうすればいいですか？VueJSコンポーネントをテストするときは$ rootですか？ 。VueJS 2.4で

Question

は、我々はこのJSFiddleでのように、この$ルートにコンポーネントのおかげからルートデータにアクセスすることができます：あなたがボタンをクリックすると

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

すると、あなたが表示された「オレンジ」を見ることができますコンソール（ルートデータであり、それをトリガしたToDo項目によって所有されていない）。

今、私はジャスミン試験の中です。このテストは正常に動作します。

しかし、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'); 

    }); 
}); 

Answer 1

あなたがここにそうであるように、あなたが拡張コンポーネントからの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です。