UTM CSSC

Unit Testing

What are Unit Tests?

Unit tests are a small piece of software that developers use to test and verify the functionality of their components/project when it's deployed live.

Why are Unit Tests important?

The purpose of Unit Tests are to validate that each component of the software performs as designed. When working on a large scale project, there is the potential chance of creating side effects where other components can cause an unexpected behaviour.

Getting started

Unit Test structure

All test files should belong under /components/tests and should be named as [component].spec.js

Function NameAbout
describeCreating a block to group several related tests
itAn alias of test() to test your components functionality
expectAsserts the component output with your expected output

The following is the basic template of a Unit Test:

// components/__tests__/__.spec.js

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

describe('group1', () => {
    const wrapper = mount(Component)

    it('testName', () => {
        expect()
    })
    ...
})

Examples

This test checks whether the Logo component has been initialized or not

// components/__tests__/logo.spec.js

import {mount} from '@vue/test-utils'
import Logo from '../Logo.vue'

describe('Logo', () => {
  const wrapper = mount(Logo)

  it('Is initialized', () => {
    expect(wrapper.vm).toBeTruthy()
  })
})

Running Tests

Note: Tests will soon automatically run on build time rather than requiring the developer to manually run the following command each time

yarn run test

For more information about Jest and its capabilities, you can check it out here!