Jest - Vue.js snipets

asyncData.spec.js

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component)
  
  const data = wrapper.vm.$options.asyncData()
  wrapper.setData(data)
  
  it('should be shown "test" text', () => {
    expect(wrapper.text()).toBe('test')
  })
  
  it('should be setted "test" value', () => {
    expect(wrapper.element.value.toBe('test')
  })
})

asyncDateParams.spec.js

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component)
  
  const data = wrapper.vm.$options.asyncData({
    params: {}
  })
  wrapper.setData(data)
  
  it('should be shown "test" text', () => {
    expect(wrapper.text()).toBe('test')
  })
  
  it('should be setted "test" value', () => {
    expect(wrapper.element.value.toBe('test')
  })
})

child.spec.js

import { mount } from '@vue/test-utils'
import Component from './-Component.vue'
import ChildComponent from '~/components/modules/forms/ChildComponent.vue'

const localVue = createLocalVue()

describe('Component', () => {
  let wrapper
  let child

  beforeEach(() => {
    wrapper = mount(Component)
    child = wrapper.find(ChildComponent)
  })
})

default.spec.js

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component)
  
  it('should be shown "test" text', () => {
    expect(wrapper.text()).toBe('test')
  })
  
  it('should be setted "test" value', () => {
    expect(wrapper.element.value.toBe('test')
  })
})

find.spec.js

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component)
  
  const item = wrapper.find('.item')
})

invisibleComponentLocalVue.spec.js

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Component from './Component.vue'
import VueRouter from 'vue-router'

const localVue = createLocalVue()
localVue.use(VueRouter)

describe('Component', () => {
  const wrapper = shallowMount(Component, {
    localVue
  })
})

invisibleComponentStubs.spec.js

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component, {
    stubs: ['invisible-component']
  })
})

plugin.spec.js

import { mount, createLocalVue } from '@vue/test-utils'
import Pluging from 'plugin'
import Component from '~/components/modules/forms/Component.vue'

const localVue = createLocalVue()
localVue.use(VeeValidate)

describe('Component', () => {
  it('is a Vue instance', () => {
    const wrapper = mount(Component, {
      localVue
    })
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

props.spec.js

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component, {
    propsData: {
      text: 'test'
    }
  })
})

routerLinkStubs.spec.js

import { mount, RouterLinkStub } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = mount(Component, {
    stubs: {
      RouterLink: RouterLinkStub
    }
  })
})

slot.spec.js

import { shallowMount } from '@vue/test-utils'
import Component from './Component.vue'

describe('Component', () => {
  const wrapper = shallowMount(Component, {
    slots: {
      default: 'test'
    }
  })
})

store.spec.js

import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import Component from './-Component.vue'
import { state, mutations } from '~/store'

const localVue = createLocalVue()
localVue.use(Vuex)

describe('Component', () => {
  let store
  let wrapper

  beforeEach(() => {
    store = new Vuex.Store({
      modules: {
        namespaced: true,
        state: Object.assign(state(), {
          company: 'test'
        }),
        mutations
      }
    })
    wrapper = mount(Component, {
      store,
      localVue
    })
  })
})