Testing Vue.js components is crucial for building robust and maintainable applications. Jest and Vue Test Utils are powerful tools that make this process a breeze. Let’s dive into how we can use these tools to write effective tests for our Vue components.
First things first, we need to set up our testing environment. If you’re using Vue CLI, you’re in luck – it comes with Jest pre-configured. If not, don’t worry! It’s pretty straightforward to set up Jest manually. Just install the necessary packages and create a jest.config.js file in your project root.
Once we’ve got our environment set up, let’s start with a simple example. Imagine we have a counter component that displays a number and has buttons to increment and decrement it. Here’s what our component might look like:
<template>
<div>
<p>{{ count }}</p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}
</script>
Now, let’s write a test for this component. We’ll use Vue Test Utils to mount our component and interact with it:
import { mount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'
describe('Counter', () => {
it('increments count when button is clicked', async () => {
const wrapper = mount(Counter)
const button = wrapper.find('button:first-child')
await button.trigger('click')
expect(wrapper.vm.count).toBe(1)
})
it('decrements count when button is clicked', async () => {
const wrapper = mount(Counter)
const button = wrapper.find('button:last-child')
await button.trigger('click')
expect(wrapper.vm.count).toBe(-1)
})
})
In these tests, we’re mounting our Counter component, finding the buttons, triggering click events, and then checking if the count has been updated correctly. Pretty neat, right?
But wait, there’s more! We can also use snapshot testing to ensure our component’s rendered output doesn’t change unexpectedly. Here’s how we can add a snapshot test:
it('renders correctly', () => {
const wrapper = mount(Counter)
expect(wrapper.element).toMatchSnapshot()
})
This test will create a snapshot of the component’s rendered HTML and compare it against future renders. If anything changes, the test will fail, alerting us to unexpected changes in our component’s structure.
Now, let’s talk about testing more complex components. Say we have a component that fetches data from an API and displays it. We don’t want our tests to actually make API calls, so we’ll need to mock the API. Here’s how we can do that:
<template>
<div>
<ul v-if="users.length">
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
<p v-else>Loading...</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
users: []
}
},
async created() {
const response = await axios.get('https://api.example.com/users')
this.users = response.data
}
}
</script>
And here’s how we can test it:
import { mount } from '@vue/test-utils'
import UserList from '@/components/UserList.vue'
import axios from 'axios'
jest.mock('axios')
describe('UserList', () => {
it('displays users when API call is successful', async () => {
const users = [
{ id: 1, name: 'John Doe' },
{ id: 2, name: 'Jane Smith' }
]
axios.get.mockResolvedValue({ data: users })
const wrapper = mount(UserList)
await wrapper.vm.$nextTick()
expect(wrapper.findAll('li').length).toBe(2)
expect(wrapper.text()).toContain('John Doe')
expect(wrapper.text()).toContain('Jane Smith')
})
it('displays loading message when API call is pending', () => {
axios.get.mockReturnValue(new Promise(() => {}))
const wrapper = mount(UserList)
expect(wrapper.text()).toContain('Loading...')
})
})
In these tests, we’re mocking the axios.get method to return our test data (or a pending promise). This allows us to test both the success and loading states of our component without making actual API calls.
Testing Vue components isn’t just about checking functionality – it’s also about ensuring our components are accessible. We can use jest-axe to test for accessibility issues:
import { mount } from '@vue/test-utils'
import { axe, toHaveNoViolations } from 'jest-axe'
import MyComponent from '@/components/MyComponent.vue'
expect.extend(toHaveNoViolations)
describe('MyComponent', () => {
it('should be accessible', async () => {
const wrapper = mount(MyComponent)
const results = await axe(wrapper.element)
expect(results).toHaveNoViolations()
})
})
This test will check for common accessibility issues in our component’s rendered output.
Now, let’s talk about testing Vue components that use Vuex. We’ll need to create a mock store for our tests. Here’s an example:
import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import MyComponent from '@/components/MyComponent.vue'
const localVue = createLocalVue()
localVue.use(Vuex)
describe('MyComponent', () => {
let store
let actions
let state
beforeEach(() => {
state = {
count: 0
}
actions = {
increment: jest.fn()
}
store = new Vuex.Store({
state,
actions
})
})
it('dispatches "increment" when button is clicked', () => {
const wrapper = mount(MyComponent, { store, localVue })
wrapper.find('button').trigger('click')
expect(actions.increment).toHaveBeenCalled()
})
it('renders "count" state', () => {
const wrapper = mount(MyComponent, { store, localVue })
expect(wrapper.text()).toContain('Count: 0')
})
})
In these tests, we’re creating a mock Vuex store with the state and actions our component expects. We can then test that our component interacts with the store correctly.
Testing Vue components with props and emitted events is another important aspect. Let’s look at an example:
<template>
<div>
<p>{{ message }}</p>
<button @click="$emit('click', 'Hello from child')">Click me</button>
</div>
</template>
<script>
export default {
props: ['message']
}
</script>
And here’s how we can test it:
import { mount } from '@vue/test-utils'
import MyComponent from '@/components/MyComponent.vue'
describe('MyComponent', () => {
it('renders prop.message', () => {
const wrapper = mount(MyComponent, {
propsData: { message: 'Hello, Vue!' }
})
expect(wrapper.text()).toContain('Hello, Vue!')
})
it('emits "click" event with correct payload', async () => {
const wrapper = mount(MyComponent)
await wrapper.find('button').trigger('click')
expect(wrapper.emitted().click[0]).toEqual(['Hello from child'])
})
})
These tests ensure that our component correctly renders its props and emits events with the right payload.
When testing Vue components, it’s also important to test edge cases and error handling. For example, if we have a component that divides two numbers, we should test what happens when we try to divide by zero:
<template>
<div>
<p v-if="error">{{ error }}</p>
<p v-else>Result: {{ result }}</p>
</div>
</template>
<script>
export default {
props: ['numerator', 'denominator'],
data() {
return {
result: null,
error: null
}
},
created() {
try {
if (this.denominator === 0) {
throw new Error('Cannot divide by zero')
}
this.result = this.numerator / this.denominator
} catch (err) {
this.error = err.message
}
}
}
</script>
And here’s how we can test it:
import { mount } from '@vue/test-utils'
import DivisionComponent from '@/components/DivisionComponent.vue'
describe('DivisionComponent', () => {
it('calculates division correctly', () => {
const wrapper = mount(DivisionComponent, {
propsData: { numerator: 10, denominator: 2 }
})
expect(wrapper.text()).toContain('Result: 5')
})
it('handles division by zero', () => {
const wrapper = mount(DivisionComponent, {
propsData: { numerator: 10, denominator: 0 }
})
expect(wrapper.text()).toContain('Cannot divide by zero')
})
})
These tests ensure our component handles both normal operation and error conditions correctly.
Testing async components is another crucial aspect of Vue.js testing. Let’s say we have a component that fetches data asynchronously:
<template>
<div>
<p v-if="loading">Loading...</p>
<ul v-else>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
loading: true,
items: []
}
},
async created() {
this.items = await this.fetchItems()
this.loading = false
},
methods: {
async fetchItems() {
// Simulate API call
return new Promise(resolve => {
setTimeout(() => {
resolve([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' }
])
}, 1000)
})
}
}
}
</script>
Here’s how we can test this component:
import { mount } from '@vue/test-utils'
import AsyncComponent from '@/components/AsyncComponent.vue'
describe('AsyncComponent', () => {
it('shows loading state initially', () => {
const wrapper = mount(AsyncComponent)
expect(wrapper.text()).toContain('Loading...')
})
it('renders items after async call', async () => {
const wrapper = mount(AsyncComponent)
await wrapper.vm.$nextTick()
await new Promise(resolve => setTimeout(resolve, 1000))
expect(wrapper.findAll('li').length).toBe(2)
expect(wrapper.text()).toContain('Item 1')
expect(wrapper.text()).toContain('Item 2')
})
})
These tests check both the initial loading state and the final rendered state after the async operation completes.
When testing Vue components, it’s also important to test any watchers you might have. Here’s an example of a component with a watcher:
<template>
<div>
<input v-model="searchTerm" />
<ul>
<li v-for="result in searchResults