Unit Testing | Introduction To Vuejs

Writing Unit Tests for VueJS Components

Unit testing is essential for ensuring the reliability and correctness of your VueJS components. This guide covers the basics of writing unit tests for VueJS components, using popular testing frameworks such as Jest and Vue Test Utils.

Key Points:

Unit testing helps ensure the reliability and correctness of your components.
Jest and Vue Test Utils are popular tools for testing VueJS components.
Tests should be written to cover various scenarios, including edge cases.

Setting Up the Testing Environment

Install Jest and Vue Test Utils

First, install Jest and Vue Test Utils:


# Install Jest
$ npm install --save-dev jest

# Install Vue Test Utils
$ npm install --save-dev @vue/test-utils

Configure Jest

Add a Jest configuration file or update the package.json file:


// jest.config.js
module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/no-babel'
};

// or in package.json
"jest": {
  "preset": "@vue/cli-plugin-unit-jest/presets/no-babel"
}

Writing Unit Tests

Basic Test Example

Here is an example of a basic unit test for a VueJS component:


// src/components/HelloWorld.vue




// tests/unit/HelloWorld.spec.js
import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'Hello Vue!';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

Testing Component Methods

You can also test the methods of a VueJS component:


// src/components/Counter.vue




// tests/unit/Counter.spec.js
import { shallowMount } from '@vue/test-utils';
import Counter from '@/components/Counter.vue';

describe('Counter.vue', () => {
  it('increments count when button is clicked', async () => {
    const wrapper = shallowMount(Counter);
    await wrapper.find('button').trigger('click');
    expect(wrapper.find('p').text()).toBe('1');
  });
});

Mocking Dependencies

When testing components that rely on external dependencies, you can mock those dependencies:


// src/components/FetchData.vue




// tests/unit/FetchData.spec.js
import { shallowMount } from '@vue/test-utils';
import FetchData from '@/components/FetchData.vue';
import axios from 'axios';

jest.mock('axios');

describe('FetchData.vue', () => {
  it('fetches data when button is clicked', async () => {
    const data = 'Hello from API';
    axios.get.mockResolvedValue({ data });

    const wrapper = shallowMount(FetchData);
    await wrapper.find('button').trigger('click');
    expect(wrapper.find('p').text()).toBe(data);
  });
});

Example Application

Here is an example application demonstrating unit tests for VueJS components:


// src/components/App.vue




// src/main.js
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

Best Practices

Follow these best practices when writing unit tests for VueJS components:

Write Tests for All Scenarios: Ensure that your tests cover various scenarios, including edge cases.
Mock External Dependencies: Mock external dependencies to isolate the component being tested.
Use Shallow Mounting: Use shallow mounting to test components in isolation without rendering child components.
Keep Tests Simple: Write simple and focused tests that are easy to understand and maintain.
Run Tests Frequently: Run your tests frequently during development to catch issues early.

Summary

This guide provided an overview of writing unit tests for VueJS components, including setting up the testing environment, writing basic and advanced tests, and mocking dependencies. By understanding and utilizing these techniques, you can ensure the reliability and correctness of your VueJS components.

VueJS - Unit Testing