Table of Content

Testing Vue using JEST | TDD

What is TDD

Key Benefits of TDD

Vue.js testing using JEST

Key Benefits of JEST in vue.js

Setting Up JEST in a Vue.js Project

Various Type of TestCase

Some basic commands and methods

Conclusion

Software Development

Web Application Development

Testing Vue using JEST | TDD

August 23, 2024

What is TDD

Test Driven Development (TDD) is a software development methodology that focuses on creating unit test cases before developing the actual code. It helps developers to catch bugs early. It is an iterative approach combining programming, unit test creation, and refactoring.

Key Benefits of TDD

Enhanced Code Quality

Writing tests before the actual code encourages developers to focus on design and requirements from the start, leading to cleaner and more maintainable code.

Reduced Debugging Effort

Since every piece of functionality is tested as soon as it is written, TDD helps in catching bugs early in the development process. This reduces the amount of time spent on debugging later.

Requirement-Driven Development

Creating tests first ensures that your code directly meets the specified requirements, preventing unnecessary features and keeping the development process aligned with project goals.

Improved Team Collaboration

TDD tests also serve as documentation, clearly outlining what the code is supposed to do. This makes it easier for team members to understand and collaborate, as everyone shares the same understanding of the code's behavior.

Early Bug Detection

TDD promotes a “fail-fast” approach, where issues are identified immediately after the test fails, helping developers address them.

Effective Regression Testing

The test suite created during TDD acts as a safety net for regression testing. Whenever changes are made, running the tests ensures that existing functionality remains intact.

Vue.js testing using JEST

JEST

A powerful delightful JavaScript testing framework that is commonly used for testing Vue applications and mainly focus on simplicity. It comes with a built-in assertion library, mocking capabilities, and support for asynchronous testing.
Jest works with many technologies like Babel, TypeScript, Node, React, Angular, Vue and more!
Features:
- Snapshot testing for components
- Easy mocking of dependencies
- Asynchronous testing support
- Fast and parallel test execution

Key Benefits of JEST in vue.js

Comprehensive Testing Framework:

JEST includes a built-in assertion library and a rich set of matchers, making it easy to write clear, expressive, and concise test cases. This all-in-one framework simplifies the testing process by providing everything you need out of the box.

Snapshot Testing:

JEST's snapshot testing feature allows you to capture the output of a component and compare it against future runs, ensuring consistent UI rendering. This is particularly useful for maintaining stable and predictable user interfaces in Vue.js applications.

Powerful Mocking Capabilities:

Jest simplifies the process of mocking dependencies, making it easy to isolate components for unit testing. It includes built-in functions for creating mocks, spies, and stubs. Jest provides mock functions that can be used to replace specific functions during testing and track their usage.

Support for Asynchronous Testing:

JEST simplifies testing asynchronous code with support for async/await and promise utilities, making it easier to test Vue.js components that rely on asynchronous operations.

Zero Configuration and Seamless Integration:

JEST requires minimal setup, with sensible defaults that allow developers to start testing quickly. It integrates seamlessly with Vue CLI, making it an ideal choice for Vue.js projects.

Active Community and Ecosystem:

With a large, active community and a robust ecosystem of plugins and extensions, JEST offers extensive resources, documentation, and continuous updates. This ensures compatibility with the latest versions of Vue.js and other libraries.

Well-Integrated with Vue Test Utils:

JEST is fully compatible with Vue Test Utils, the official testing library for Vue.js. This integration simplifies component testing and ensures that your testing tools work well together within the Vue.js ecosystem.

Consistent Testing Experience:

JEST provides a consistent testing experience across different JavaScript frameworks and libraries, making it a versatile choice for developers working on multi-technology projects.

Setting Up JEST in a Vue.js Project

Installation

npm install --save-dev jest @vue/test-utils
or
yarn add -D jest @vue/test-utils

Copy

Install another dependency for Jest configuration

Let's assume that to install and use jest in javascript base vue3 project.

npm install --save-dev babel-jest @babel/core @babel/preset-env

Copy

npm install jest-environment-jsdom --save

Copy

npm install @vue/vue3-jest

Copy

Create a .babelrc file in project root directory and add below configuration:

{
"presets": ["@babel/preset-env"]
}

Copy

Create a jest.config.js file in project root directory and add below configuration:

module.exports = {
transform: {
'^.+\\.vue$': '@vue/vue3-jest',
'^.+\\.jsx?$': 'babel-jest',
},
testEnvironment: 'jsdom',
testEnvironmentOptions: {
customExportConditions: ['node', 'node-addons'],
},
}

Copy

Add "test" : "jest" command to the script section of the package.json file

"test": "jest

Copy

Command for run test case

npm test
or
npm run test

Copy

Setting up a Test File

Start by creating a test file for the component you want to test. Conventionally, test files are placed in a `tests` or `__tests__` directory. Let's say you have a component called FruitList.vue; you can create a corresponding test file like fruitlist.test.js.

root

├── src/

│ └── components/

│ └── FruitList.vue

├── tests/

│ └── fruitlist.test.js

Various Type of TestCase

1. Test with component render

import { mount} from '@vue/test-utils'
import FruitList from '../src/components/fruitList.vue'

describe('FruitList component test', () => {
const wrapper = mount(FruitList)
test('test the fruits variable', () => {
expect(wrapper.vm.fruits).toEqual(['apple', 'banana', 'orange'])
})
})

Copy

2. Test component with props

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

describe('GreetingComponent, () => {
it('renders the msg prop correctly', () => {
const msg = 'Jest in Vue 3!'
const wrapper = mount(HelloWorld, {
props: { msg }
})

expect(wrapper.find('h1').text()).toBe(msg)
})
})

Copy

3. Testing asynchronous Vue components with Jest

import { shallowMount } from '@vue/test-utils'
import { nextTick } from 'vue'
import asyncText from '../src/components/asyncTest.vue'

test('increments by 1', async () => {
const wrapper = shallowMount(asyncText)

wrapper.find('button').trigger('click')

await nextTick()

expect(wrapper.html()).toContain('Count: 1')
})

Copy

4. Axios test with Jest

import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'

const mock = new MockAdapter(axios)

const mockData = async () => {
try {
mock.onGet('https://api.artic.edu/api/v1/artworks/search?q=cats&page=1&limit=10')
.reply(200, { id: 1, name: 'Item 1' })

return await axios.get('https://api.artic.edu/api/v1/artworks/search?q=cats&page=1&limit=10')
}
catch (e) {
console.log(e)
}
}

export default mockData

Copy

5. Routes test

import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import AboutView from '../src/pages/about-view.vue'
import TestRoute from '../src/components/TestRoute.vue'

describe('test routing ', () => {
it('render a component via routing', async () => {
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/about',
name: 'About',
component: AboutView,
},
],
})

router.push('/about')

await router.isReady()

const wrapper = mount(TestRoute, {
global: {
plugins: [router],
},
})
expect(wrapper.findComponent(AboutView).exists()).toBe(true)
})
})

Copy

6. Mock Functions

import { mount } from "@vue/test-utils";
import TestMockFunction from "../src/components/TestMockFunction.vue";

describe("TestMockFunction", () => {
it("triggers handleClick on button click", () => {
const handleClickMock = jest.fn();
const wrapper = mount(TestMockFunction, {
global: {
mocks: {
handleClick: handleClickMock,
},
},
});

wrapper.find("button").trigger("click");

expect(handleClickMock).toHaveBeenCalled();
});
});

Copy

Some basic commands and methods

mount

The mount method fully renders a Vue component along with its child components

shallowMount

The shallowMount method renders the Vue component without rendering its child components.

find

The find method is used to search for and return a single DOM node or Vue component within the wrapper that matches a given selector.

expect

The expect function is a core part of Jest's assertion library and is used to create assertions in your test cases. Assertions are used to test if a particular value meets certain conditions or expectations.

toEqual

Tests that the actual value is deeply equal to the expected value, which is useful for objects and arrays.

toBe

Tests that the actual value is strictly equal (===) to the expected value

toContain

Tests that an array or string contains the expected value

trigger

The trigger method simulates a DOM event on an element, such as a click or a keypress, allowing you to test how the component reacts to user interactions.

toHaveBeenCalled

checks if a mock function has been called at least once.

Enhance your Vue.js projects with expert support. Hire Vue.js developers from Zignuts to leverage robust testing strategies and deliver exceptional results. Contact us today!

Conclusion

Testing Vue.js applications with Jest is a highly effective approach that aligns well with Test-Driven Development (TDD) principles. Jest's powerful features, including snapshot testing, mocking, and support for asynchronous code, ensure high code quality and early bug detection. Its seamless integration with Vue.js and ease of setup make it an invaluable tool for building robust and maintainable applications. By incorporating Jest into your testing strategy, you can enhance team collaboration, streamline development, and deliver reliable, high-performing software.