simple vue unit test

List.spec.js

import List from '@/components/List'
import Vue from 'vue'

describe('List.vue', () => {
  it('displays items from the list', () => {
    // our test goes here
    const Constructor = Vue.extend(List)
    const ListComponent = new Constructor().$mount()
    expect(ListComponent.$el.textContent).to.contain('play games')
  })
})

List.vue

<template>
  <div>
    <h1>My To Do List</h1>
    </br>
    <!--displays list -->
    <ul>
      <li v-for="item in listItems">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'list',
  data () {
    return {
      listItems: ['buy food', 'play games', 'sleep']
    }
  }
}
</script>

In the above, I am running a simple unit test, which checks a Vue component to make sure it is rendering correctly and displaying the list data.

on line 8 of the List.spec.js test file the component is mounted, this renders the data which allows for the test to be conducted on line 9.

const ListComponent = new Constructor().$mount()
expect(ListComponent.$el.textContent).to.contain('play games')

Please see link to video of the unit test running and passing.

https://www.youtube.com/watch?v=RadJv8xk2Qs