My first unit testing of Vue.js with Jest and @testing-library

#vue #testing #webdev

Hello! My name is Clark! On this post, we're gonna write a test case for component of Vue.js with Jest and @testing-library, let's starts 😃!

Create Vue project

First of all, Even though I am sharing about test case of Vue.js on this post, but actually I am more familiar with ReactJS than Vue.js, so I'll use Vue-CLI to create my first Vue project fast.

Install Vue-CLI

npm install -g @vue/cli

Create project

vue create hello-world

After typing vue create hello-world, The CLI tool would ask if you need other library:

But we don't need that, so pick default and let it start creating project
. After creating, you can check current path if emerge the project:

Or at the path of project, you can type cmd on terminal to open local server:

npm run serve

Open browser and input url http://localhost:8080/:

Okay, now we have a project let we start unit testing!

Install library about unit testing

I choose Jest and @testing-library to test Vue.js.

But why not pick @vue/test-utils? According to introduction of @testing-library:

The core library has been wrapped to provide ergonomic APIs for several frameworks, including React, Angular, and Vue. There is also a plugin to use testing-library queries for end-to-end tests in Cypress and an implementation for React Native.

So @testing-library provide to component of test or manipulation, whatever the component is from to Vue.JS or ReactJS or Angular!

As Far as I'm concerned, this is very convenient to let me write unit testing between ReactJS and Vue.js.

First of all on this stage, we must install above core library for unit testing:

npm install jest @testing-library/vue --save-dev

Next, we can create a __tests__ folder in project root path, and create a HelloWorld.test.js inside, then just try to write first case of unit testing.

For example, our target of test component is HelloWorld.vue, then this content is:

./src/component/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>

    /* The some tag be omitted... */

  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

Okay, when using this component, I hope that if I give it a msg prop, it will be rendered by h1, so I add attribute test-dataid for h1:

<h1 data-testid="title">{{ msg }}</h1>

When testing we can find it by queries of @testing-library provide, so the case of unit testing can write:

./tests/HelloWorld.test.js

// import library of unit testing library
import { render } from '@testing-library/vue';
import HelloWorld from '../src/components/HelloWorld.vue';

// The case of unit testing for check render msg
test('Check if render props msg text in HelloWorld', async () => {
  const { getByTestId, } = render(HelloWorld,{
    props: { msg: 'Hello, My name is Clark!', },
  })

  const title = getByTestId('title');

  expect(title.innerHTML).toBe('Hello, My name is Clark!');
})

On Vue.js, render of @testing-library can have two parameters, first is component also our target of test, the second is content of props with use component, and render would be return all kinds of queries(ex. ByLabelText, ByText...in detail), the above getByTestId also contain this queries, it can queries data-testid.

After finding h1 tag, we can use innerHTML to check if this text same of the msg of props.

So far, we have to make some preparations before test, install about compiler library of Vue.js for NodeJS execute test and config of jest:

npm i babel-jest jest-vue vue-jest --save-dev

Open the package.json and add the new scripts and config of jest:

./package.json

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test": "jest" // Add this script for test
},
"jest": {
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "babel-jest",
    ".*\\.vue$": "<rootDir>/node_modules/vue-jest"
  },
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  }
},