How to use Jest for unit testing in a project

Preface

As application size and complexity increase, ensuring code quality and stability becomes increasingly important. Unit testing, as part of software testing, can effectively catch errors in the code and prevent new bugs from being introduced during development. Among many testing frameworks, Jest has become the first choice for many developers due to its ease of use, powerful features and good compatibility.

This article will explain in detail how to use Jest in a project for unit testing. From environment building, basic configuration to writing and executing tests, we will guide you step by step to ensure that your application maintains high quality and stability through continuous iteration.

Why choose Jest

Easy to configure: Jest is simple to configure and very convenient to use.

Powerful: Supports features such as snapshot testing and coverage reporting.

Community Support: Jest has huge community support and it’s very easy to solve problems.

Steps to use

1. Install Jest

Go to the project directory and install Jest along with vue-jest and babel-jest:

cd my-vue-app
npm install --save-dev jest vue-jest babel-jest @vue/test-utils

2. Configure Jest

Next, we need to configure Jest. Create a file in the project root directory and add the following:

 = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '^.+\\.js$': 'babel-jest'
  },
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)',
    '**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  }
};

This configuration file tells Jest how to handle .vue files and JavaScript files, and specifies the matching pattern for the test files.

3. Write unit tests

Now that we have Jest configured, we can write some unit tests next.

Create a simple Vue component

Create a component named :

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

4. Write test files

Create a test file named :

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/';

describe('', () => {
  it('renders  when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(()).toMatch(msg);
  });
});

In this test file, we use the shallowMount method provided by @vue/test-utils to mount the component and pass propsData to test whether the component correctly renders the incoming msg property.

5. Run the test

Once everything is ready, we can run tests to verify the behavior of the component. Run the following command in the project root directory:

npm run test:unit

If everything works fine, you should see the test passes:

PASS tests/unit/

✓ renders when passed (15ms)

Advanced Features

In actual projects, testing may be more complicated. Next, we will explore some advanced features and best practices to help you write more robust tests.

1. Use snapshot test

Snapshot testing is a very efficient method to capture the rendered output of a component and compare it to the previously stored snapshot. Let's add a snapshot test for .

First, make sure you have Jest's snapshot plugin installed (mostly, Jest already has this feature built in, you don't need an extra installation).

Then, modify your test file and add a snapshot test:

import { shallowMount } from '@vue/test-utils';
import HelloWorld from '@/components/';

describe('', () => {
  it('renders  when passed', () => {
    const msg = 'new message';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect(()).toMatch(msg);
  });

  it('matches the snapshot', () => {
    const msg = 'snapshot message';
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    });
    expect().toMatchSnapshot();
  });
});

Run the test command:

npm run test:unit

A snapshot file is generated at the first run, stored in the snapshots directory. Each time you run the test later, Jest will compare the current rendered output to this snapshot. If there is any change, you can decide whether to update the snapshot or repair the code.

2. Test asynchronous code

There are often asynchronous operations in components, such as getting data from the API. We can use the asynchronous testing method provided by Jest to handle these scenarios.

Suppose we have a component that fetches data from the API when mounted:

<template>
  <div>{{ data }}</div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  async mounted() {
    const response = await fetch('/data');
    const result = await ();
     = ;
  }
};
</script>

Next, we write unit tests for this component. To test asynchronous code, we can use Jest's mock function.

First, create:

import { shallowMount } from '@vue/test-utils';
import AsyncComponent from '@/components/';

 = (() =&gt;
  ({
    json: () =&gt; ({ data: 'async data' })
  })
);

describe('', () =&gt; {
  it('fetches async data and updates the data property', async () =&gt; {
    const wrapper = shallowMount(AsyncComponent);
    await .$nextTick(); // Wait for the next DOM update loop    expect(()).toContain('async data');
  });
});

Here, we use Jest's () to simulate the fetch method and return a predefined response. Then in the test, after the component is mounted and wait for the asynchronous operation to complete, check whether the component's data is updated correctly.

3. Coverage Report

Code coverage is an important indicator for measuring the quality of tests. Jest can easily generate coverage reports.

Configure the coverage options in :

{
  "scripts": {
    "test:unit": "jest --coverage"
  }
}

Then, run the test:

npm run test:unit

Jest will generate a coverage report and show which codes are covered by tests and which are not. This helps you identify test blind spots and write more comprehensive tests.

Best Practices

Keep test independent: Each test should be independent, avoiding interdependence between tests.

Test boundary conditions: Not only should you test the normal situation, but you should also test the boundary conditions and exception conditions.

Use mock (Mock): Use Jest's mocking capabilities appropriately to isolate external dependencies (such as API requests).

Continuous Integration: Integrate tests into a continuous integration (CI) system to ensure that tests are automatically run with each code change.

Summarize

Through this tutorial, we have a comprehensive understanding of how to use Jest in a project for unit testing. From the initial project configuration to writing unit tests, snapshot tests, and processing asynchronous code, we have implemented comprehensive testing of components step by step. Finally, we also explore the importance and best practices of code coverage to help you write more robust and reliable tests.

Unit testing not only improves code quality, but also enhances developers' confidence, ensuring that applications always maintain high stability during continuous updates and maintenance.

This is the end of this article about how to use Jest for unit testing in a project. For more information about Vue using Jest unit testing, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!