// MyComponent.spec.js
import { shallowMount } from "@vue/test-utils";
import MyComponent from "@/components/MyComponent.vue";
describe("MyComponent", () => {
let wrapper;
it("is a Vue component", () => {
wrapper = shallowMount(MyComponent);
expect(wrapper.exists()).toBe(true);
});
});
// MyComponent.spec.js
// component factory
function createComponent() {
wrapper = shallowMount(MyComponent);
}
// destroying a wrapper
afterEach(() => {
wrapper.destroy();
});
// MyComponent.spec.js
it('does not render title when showTitle prop is false', () => {
createComponent()
expect(wrapper.find("[data-testid='title']").exists()).toBe(false)
})
function createComponent({ props = {} } = {}) {
wrapper = shallowMount(MyComponent, {
propsData: {
...props,
},
})
}
...
createComponent({ showTitle: true })
let wrapper
const findTitle = () => wrapper.find("[data-testid='title']")
const findTitle = () => wrapper.find("[data-testid='title']")
const findIncrementButton = () => wrapper.find('.test-increment-button')
...
it('increments count on increment button click', () => {
createComponent()
expect(findCount().text()).toBe('Count: 0')
findIncrementButton().trigger('click')
})
const findTitle = () => wrapper.find("[data-testid='title']")
const findIncrementButton = () => wrapper.find('.test-increment-button')
...
it('increments count on increment button click', async () => {
createComponent()
expect(findCount().text()).toBe('Count: 0')
findIncrementButton().trigger('click')
await nextTick()
expect(findCount().text()).toBe('Count: 1')
})
it('renders a correct doubled value', () => {
createComponent()
expect(findDoubleCount().text()).toContain('0')
})
function createComponent({ props = {}, data = {} } = {}) {
wrapper = shallowMount(MyComponent, {
propsData: {
...props,
},
data() {
return {
...data,
}
},
})
}
it('renders a correct doubled value', () => {
createComponent({ data: { count: 3 } })
expect(findDoubleCount().text()).toContain('6')
})
it('emits a custom event on emitter button click', () => {
createComponent()
wrapper.find('.test-emitter').trigger('click')
expect(wrapper.emitted('custom-event')).toBeTruthy()
expect(wrapper.emitted('custom-event')).toEqual([['Hello World']])
})
it('emits an event on showTitle change', async () => {
createComponent()
wrapper.setProps({ showTitle: true })
await nextTick()
expect(wrapper.emitted('watcher-triggered')).toBeTruthy()
})
it('changes childCounter on MyButton click', async () => {
createComponent()
wrapper.findComponent(MyButton).vm.$emit('click')
await nextTick()
expect(findChildCounter().text()).toContain('2')
})
function createComponent({ props = {}, data = {} } = {}) {
wrapper = shallowMount(MyComponent, {
propsData: {
...props,
},
data() {
return {
...data,
}
},
mocks: {
$route: {
path: '/',
},
},
stubs: ['router-link'],
})
}
import { shallowMount } from '@vue/test-utils'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [{ path: '/', component: MyComponent }],
})
function createComponent({ props = {}, data = {} } = {}) {
wrapper = shallowMount(MyComponent, {
router,
...
})
}
import store from '@/store'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
describe('MyComponent', () => {
let wrapper
let mockStore
function createComponent({ props = {}, data = {} } = {}) {
wrapper = shallowMount(MyComponent, {
router,
store: mockStore
...
})
}
beforeEach(() => {
mockStore = Vuex.Store(store)
})
})
import { mutations } from '@/store'
describe('mutations', () => {
let state
it('updateUsername', () => {
const newUsername = 'Test2'
state = {
username: 'Test',
}
mutations.updateUsername(state, newUsername)
expect(state.username).toBe(newUsername)
})
})