Master Frontend Unit Testing with Jest and Vue Test Utils

Introduction

As projects grow and undergo frequent refactoring, unit testing becomes essential for ensuring stability and maintainability. This article offers a simple, hands‑on introduction to unit testing, framework selection, environment setup, and writing test cases.

What is Unit Testing

In computer programming, unit testing (also called module testing) verifies the correctness of the smallest testable parts of a program. For procedural code a unit is a function or procedure; for object‑oriented code it is a method, including those in base, abstract, or derived classes.

In JavaScript, unit tests typically target functions, objects, and modules.

Why Use Unit Testing

Advantages

Safe refactoring: tests automatically catch side effects when code changes.

Maintainability: existing tests remain after new features are added, supporting multi‑developer teams.

Quick onboarding: test cases serve as documentation of functionality.

Improved code quality: complex or untestable functions indicate poor module design.

Popular Frontend Testing Frameworks

Jest – Developed by Facebook, simple API, fast coverage reporting, built‑in assertion library, easy to start.

Mocha – Created in 2011, active community, flexible and extensible, but requires additional configuration for assertions.

Karma – Developed by Google in 2012, watches file changes and automatically runs tests, displays results.

Choosing the Right Framework

Project requirements

Compatibility with the project and compiler.

Fast test execution.

Clear error reports.

Cost

Learning cost.

Debugging and maintenance cost.

Our team chose Jest together with Vue Test Utils because it offers comprehensive features, is easy to use, and is praised by the Vue official site as the most complete test runner.

Tip : If you have Mocha tests and want to migrate to Jest, use jest-codemods for a seamless transition.

Getting Started

Jest Installation

Method 1:

npm install --save-dev jest

npm install --save-dev jest babel-jest babel-core babel-preset-env regenerator-runtime

These Babel packages enable ES6 syntax in tests because Jest does not natively support import.

{
  "presets": [
    ["env", {"modules": false}]
  ],
  "env": {
    "test": {
      "presets": ["env"]
    }
  }
}

module.exports = {
  moduleFileExtensions: ['js','json','vue'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
  }
};

{
  "script": {
    "test": "jest"
  }
}

Optimized test command:

"test": "jest --config jest.conf.js --coverage --watch"

Flags: --coverage generates a coverage report, --watch reruns tests on file changes, and --config jest.conf.js resolves Vue component modules.

Method 2: Use the CLI initializer. npx jest --init Then install Vue Test Utils and vue-jest:

npm install --save-dev jest @vue/test-utils

npm install --save-dev vue-jest

Minimal configuration enables unit testing of Vue components.

Note: For Babel 7 or higher, add babel-bridge to devDependencies:

npm install --save-dev babel-core@^7.0.0-bridge.0

Create a test folder, add test files (e.g., testing an add function), and run:

npm run jest

Conclusion

Unit testing is worthwhile for long‑term maintained projects, stable projects, or frequently reused components and utilities. However, not every project needs a testing framework due to the maintenance cost of test cases.

References

Jest official site: https://www.jestjs.cn/docs/getting-started

Mocha official site: https://mochajs.org/

Vue Test Utils documentation: https://vue-test-utils.vuejs.org/zh/

Jest + Vue Test Utils guide: https://vue-test-utils.vuejs.org/zh/guides/#起步