Mastering Unit Testing, CI, and Coverage for Vue Component Libraries

The article contains 6205 characters and takes about 16 minutes to read.

Unit testing is essential for component library development, ensuring correctness and consistency. This article explores unit testing in the NUTUI Vue component library, covering how to write tests, set up continuous integration, and generate coverage reports with Coveralls.

If you're interested, let's dive in together!

Unit Test Configuration

Before diving into the configuration, we consider two questions:

What is unit testing?

Why do we need unit testing?

What is Unit Testing?

Unit testing checks and validates the smallest testable parts of software, making it easier to add features and track issues.

Why Do We Need Unit Testing?

Unit tests help developers design components, refactor existing ones, and run automatically on code changes, providing confidence and reducing debugging time.

Provides documentation of component behavior.

Reduces debugging and manual testing time.

Prevents bugs when adding new features.

Speeds up bug localization.

Facilitates safe refactoring.

How to Write Unit Tests?

We use three tool groups: a test framework, a test runner, and an assertion library.

Test Framework

For Vue we use Vue Test Utils , the official unit‑testing library for Vue components. npm install --save-dev @vue/test-utils Because it relies on a browser environment, we also install jsdom to simulate a browser in Node. npm install --save-dev jsdom jsdom-global Create a /test folder and add setup.js:

require('jsdom-global')();

Test Runner

We choose a runner that works with Vue Test Utils. Options include:

Jest – full‑featured, minimal configuration, includes JSDOM.

mocha-webpack – combines webpack and Mocha, preserving full single‑file component support.

We select mocha-webpack and install it: npm install --save-dev mocha mocha-webpack Note: mocha‑webpack requires webpack 4.x and mocha 4.x or 5.x.

Assertion Library

We use the expect library for BDD‑style assertions. npm install --save-dev expect Expose it globally in test/setup.js: global.expect = require('expect'); Add a test script to package.json:

{
  "scripts": {
    "test": "cross-env NODE_ENV=test mocha-webpack --webpack-config dist_cli/webpack/test.config.js --require dist_cli/test/setup.js src/packages/*/__test__/**.spec.js"
  }
}

Explanation of parameters: --webpack-config: specifies the webpack config for tests. --require: runs setup.js before any test.

The final path selects all test files under src/packages.

Run npm test to execute the tests.

Increase Unit Test Coverage

Coverage measures how thoroughly tests exercise the code. We use nyc (the CLI for Istanbul) to generate coverage reports. npm install --save-dev nyc Update the test script to include nyc:

{
  "scripts": {
    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config dist_cli/webpack/test.config.js --require dist_cli/test/setup.js src/packages/*/__test__/**.spec.js"
  }
}

Add an nyc configuration in package.json:

{
  "nyc": {
    "include": ["../../../src/packages/**/*.vue"],
    "reporter": ["lcov", "text"],
    "instrument": false,
    "sourceMap": false
  }
}

Running npm test now produces a coverage report and creates a coverage folder with lcov.info and HTML files.

Continuous Integration Service

Continuous integration (CI) automatically builds and tests code on each change. We use Travis CI with a GitHub‑hosted repository.

Enable Travis CI for the repository, then add a .travis.yml file:

sudo: required
language: node_js
node_js:
  - '8'
script:
  - npm test
  - npm run coveralls

Key parameters: sudo: required – needs sudo privileges. language: node_js – sets the environment to Node. node_js – specifies Node version(s). script – commands executed during the build.

Push the file to GitHub; Travis will run the defined scripts on each push.

Travis can generate a build status badge for the README.

Coveralls Automatic Test Coverage

Coveralls integrates with GitHub and Travis CI to display coverage metrics.

Add a .coverall.yml file with your repository token:

service_name: travis-ci
repo_token: YOUR_REPO_TOKEN

Configure the coveralls script in package.json to upload the lcov report:

{
  "scripts": {
    "coveralls": "cat ./coverage/lcov.info | coveralls"
  }
}

After pushing, a coverage badge can be added to the README.

Conclusion

Unit testing has been integrated into the NUTUI component library, a mobile‑focused Vue UI framework used across JD.com’s products. The setup improves code reliability, reduces bugs, and streamlines development. Future work includes extracting the build tools, optimizing webpack configurations, and releasing a standalone NUTUI‑CLI.

The official NUTUI website is http://nutui.jd.com .

References:

http://nutui.jd.com

http://travis-ci.org

https://coveralls.io