title: How to set data to this.$root when testing a VueJS component?
body: <p>In VueJS 2.4, we can access root data from component thanks to this.$root, like in this JSFiddle:</p>
  
  <p><a href="https://jsfiddle.net/bjg2yL1u/1/" rel="nofollow noreferrer">https://jsfiddle.net/bjg2yL1u/1/</a></p>
  
  <p>If you click on a button, you can see 'orange' displayed in the console, which is a root data, not owned by the todo-item who triggered it.</p>
  
  <p>Now I am inside a Jasmine test. This test works/run/is green properly.</p>
  
  <p>But the console.log inside todo-item component outputs 'undefined'.</p>
  
  <p>How can I inject data to this.$root instance when inside a test ?</p>
  
  <pre><code>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');
  
    });
  });
  </code></pre>