eddyerburgh

// Example data
//
// const values = {
//   name: 'Edd',
//   lastName: 'Yerburgh',
// }

// Command
const each = require('async/each');

eddyerburgh

import { mount } from 'vue-test-utils'
import Component from '@/components/ComponentToTest'

const wrapper = mount(ComponentToTest)

// Traversal
const Foo = wrapper.find(Foo)
const divs = wrapper.findAll('div')
const div = divs.at(0)

eddyerburgh

import { mount } from 'vue-test-utils'
import ComponentWithSlots from '@/components/ComponentWithSlots'
import AnotherComponent from '@/components/AnotherComponent'

// mount the component with options
const wrapper = mount(ComponentWithSlots, {
  slots: {
    default: 'div'
  },
  propsData: {

eddyerburgh

import { shallow } from 'vue-test-utils'
import ComponentWithChildren from '@/components/ComponentWithSlots'
import ChildComponent from '@/components/AnotherComponent'

// shallow mount the component
const wrapper = mount(ComponentWithChildren)

// you can still find the child component, but it doesn't render any nodes
const childComponent = wrapper.find(ChildComponent)

eddyerburgh

import { shallow, createLocalVue } from 'vue-test-utils'
import ComponentToTest from '@/components/ComponentsToTest'

const localVue = createLocalVue()

localVue.component('router-link')

localVue.mixin({
  created: function () {
      console.log('hello')

eddyerburgh

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],

eddyerburgh

import Vue from 'vue'
import MessageToggle from '@/components/MessageToggle.vue'

describe('MessageToggle.vue', () => {
  it('displays default message', () => {
    const Ctor = Vue.extend(MessageToggle)
    const vm = new Ctor().$mount()

    expect(vm.$el.textContent).toContain('default message')
  })

eddyerburgh

import { mount } from '@vue/test-utils'
import MessageToggle from '@/components/MessageToggle.vue'

describe('MessageToggle.vue', () => {
  it('displays default message', () => {
    const wrapper = mount(MessageToggle)
    expect(wrapper.text()).toContain('default message')
  })
})

eddyerburgh

import { mount } from '@vue/test-utils'
import MessageToggle from '@/components/MessageToggle.vue'

describe('MessageToggle.vue', () => {
  it('displays default message', () => {
    const wrapper = mount(MessageToggle)
    expect(wrapper.text()).toContain('default message')
  })

  it('toggles message when button is clicked', () => {

eddyerburgh

import { shallow } from '@vue/test-utils'
import List from '@/components/List.vue'

describe('List.vue', () => {
  it('renders li for each item in props.items', () => {
    const items = ['', '']
    const wrapper = shallow(List, {
      propsData: { items }
    })
    expect(wrapper.findAll('li')).toHaveLength(items.length)