AVA Testing Vue - Whitespace is the difference

Question

Right now I'm watching a Laracast Episode on Vue Testing with AVA. So far, everything works out, but now I found an interessting bug/problem.

My notification.js:

import test from 'ava';
import Notification from '../src/Notification';

test('that it renders a notification', t => {
    //V2
    let N = Vue.extend(Notification);
    let string = 'Foobar';
    string.trim();
    let vm = new N({propsData:{message: string}}).$mount();


    // V1
    //let n = new Vue(Notification).$mount();
    //t.truthy('unicorn'); // assertation needed, does not have any importance
    //console.log(n.$el.innerHTML);

    t.is(vm.$el.textContent,'Foobar');
});

And the imported Notification.js looks like this:

export default{
    template:'<div> {{ message }} </div>',

    props:['message']
};

I get the following error Message:

that it renders a notification

  test/notification.js:18

   17:                                       
   18:     t.is(vm.$el.textContent,'Foobar');
   19: });                                   

  Difference:

  - ' Foobar '
  + 'Foobar'

As you can see, AVA thinks the strings in the messages are different by two whitespaces before and after the Foobar. I even tried to trim() the string as you can see, but still the error occurs.

Has anyone an idea, where these whitespaces come from or how to solve this?

Answer 1

I found the error and it's a dumb one:

'<div> {{ message }} </div>'

has to be

<div>{{ message }}</div>'

The Whitespaces where in the div ...