[Vuejs]-Vue.js: Using propsData in a jasmine test

by

3👍

✅

Here’s a quick example on how to unit test a Vue component with propsData

Your example still failed for me, but I think you’re supposed to provide the el at instantiation instead of when defining the component like in your example. The following passed for me!

it('works with propsData', () => {
  var mount = document.createElement('div');
  var Comp = Vue.extend({
    props: ['msg'],
    template: '<div>{{ msg }}</div>'
  });

  var vm = new Comp({
    el: mount,
    propsData: {
      msg: 'hello',
    },
  });

  expect(vm.msg).toEqual('hello');
});
👤broox

2👍

In the event I used @broox’s post to point me in the right direction. The trick was extending Vue in the .vue file. 

<template>
  <tr>
    <td>{{ cast.name }}</td>
  </tr>
</template>

<script>

    import Vue from 'vue'

    export default Vue.extend({
      props....
    )}

</script>

and then in the test, creating the div element and passing that in as the el param with the propsData. After that – all good!

import Vue from 'vue'
import Cast from '../../../frontend/components/Cast.vue'

describe('Cast.vue', () => {
  it('should render name of cast correctly', () => {
    var mount = document.createElement('div');
    const vm = new Cast({
      el: mount,
      propsData: { cast: {name: 'testName'} },
    })
    expect(vm.$el.querySelector('tr td').textContent.trim()).toBe('testName')
  });

I’ll leave @broox’s answer as the accepted one, but perhaps this answer will help anyone using vueify and testing components.

👤patrickdavey

Leave a comment