There are many projects in our team, and unit tests are basically not configured. One of them, VUe2.x project, is our master station project. I wanted to add single test to this project a long time ago, but I was always busy with business. It just so happens that the Chinese New Year is coming soon. There is not much demand recently. After finishing the demand, we began to do the single test.

Ever since the idea of single testing came up, I have been thinking about whether we really need single testing in this project, what we need to test, how to select so many test runners, and how to implement single testing in the team. Based on these thoughts, implementation began.

Do we really need unit tests

Currently, there is no single test for all the projects of the whole team, and many of the projects of other teams have corresponding testing tools, so we always feel that there is something missing in our technology stack. This is a sufficient condition for me to add a single test, but IT is the original intention of my single test.

Project background

Secondly, we have maintained this project for four or five years, and carried out at least four times of architectural reconstruction and upgrading. This project mainly includes V7 version and V8 version, with a total of nearly 200 pages. At present, most of the business is in V8 version. Of course, we also have v9 version, due to the continuous increase of project business, had to split the warehouse, V9 version is based on VUE-CLI built a new warehouse, here will not be repeated. The selection of technology stack for the first two editions is as follows:

  • V7 versionjuicer + jQuery
  • The v8 versionVue2.0 + webpack

In view of the current situation, a single test for v8 version is suitable, on the one hand, the main business in v8, on the other hand, from the use of vue2.0 + webpack technology stack, more suitable for writing unit tests.

expectations

I look forward to adding unit tests to both common components and tool methods in V8, which would certainly be beneficial for verifying the reliability of the team’s code. Later iterations can also prevent unexpected situations through single testing. Well, that’s what it takes to add a single test.

In addition, unit testing of components provides additional benefits:

  • Provide documentation that describes the behavior of the component
  • Saves time on manual testing
  • Reduce bugs when developing new features
  • To improve the design
  • Promote the refactoring

Automated testing helps developers on the team maintain complex base code. Unit testing is one of the most useful testing systems, helping developers think about how to design a component and refactoring an existing component.

The beginning, when everyone on a project to add a single measurement of vision is not clear enough, unit testing is likely to slow down the development progress, but once everybody’s vision was set up and have a real user interest in the application, then the unit testing is absolutely necessary, they can ensure the maintainability and scalability of the code base.

How do I select a test runner

Unit tests should have:

  • It can run fast
  • Easy to understand
  • Only test the work of a single unit

Vue Test Utils is the official library for Vue component unit tests. Two Test runs are officially recommended:

  • JestIs the most fully featured test runner. It requires minimal configuration and is installed by defaultJSDOM, with built-in assertions and a very good command-line user experience. However, you need a preprocessor that can import single-file components into your tests. We’ve already created itvue-jestPreprocessors to handle the most common single-file component features, but still notvue-loader100% functional.
  • mocha-webpackIs awebpack + MochaWith a smoother interface and listener mode. The nice thing about these Settings is that we can use WebPack +vue-loaderGet full single-file component support, but this itself is requiredA lot of configuration.

I personally prefer Mocha-WebPack, because testing single-file components is fast and full of features.

Configure mocha unit tests

Vue Test Utils relies on the browser environment and uses JSDOM to run tests in the Node virtual browser environment.

Vue’s single-file components need to be precompiled before they run in Node or a browser. We use WebPack directly. For MoCHA needs to be set based on Webpack + vue-loader.

The mocha-Webpack test single-file component was selected to compile all the test files from Webpack and run them in the test runner. This has the advantage of fully supporting all webPack and Vue-Loader functionality. Mocha-webpack can provide a very smooth experience.

1. Set the mocha – webpack

The V8 project is based on having WebPack, VUe-Loader, and Babel installed and configured. The first thing to do is to install the test dependencies:

npm install --save-dev @vue/test-utils mocha mocha-webpack
Copy the code

Define a test script in package.json.

// package.json
{
  "scripts": {
    "test": "mocha-webpack --webpack-config webpack.config.js --require test/setup.js test/**/*.spec.js"}}Copy the code

2. Expose NPM dependencies

Externals externals all NPM dependencies via webpack-node-externals

// webpack.config.js
const nodeExternals = require('webpack-node-externals')

module.exports = {
  // ...
  externals: [nodeExternals()]
}

Copy the code

Table 3. The source code

The source table needs to be retrieved inline in mocha-Webpack. The recommended configuration is:

module.exports = {
  // ...
  devtool: 'inline-cheap-module-source-map'
}
Copy the code

4. Set the browser environment

Vue Test Utils needs to run in a browser environment. We can simulate in Node using jdom-global:

npm install --save-dev jsdom jsdom-global
Copy the code

Then write to test/setup.js:

npm install --save-dev jsdom jsdom-global
Copy the code

This line of code adds a browser environment to Node so that Vue Test Utils works correctly.

5. ChooseexpectAssertions library

Jasmine/Jest style Expect assertions are recommended

npm install --save-dev expect
Copy the code

Then write it in test/setup.js:

require('jsdom-global')()

global.expect = require('expect')
Copy the code

6. Optimize Babel for testing

Mocha is a common node testing framework, but it only supports commonJS modules. Babel is needed to support ES6 modules for Mocha. The babel-loader will automatically use the same. Babelrc configuration file.

Write notes for single test

  • Describe Test Suite
  • You only make one assertion per IT block, called “test case”
  • Make test descriptions short and clear
  • Provide only the minimal data required for testing
  • Refactoring the repeated logic into a factory function

Summary:

Some single tests have been written so far, with the expectation of adding single tests to both common components and utility class functions. Add a single test based on service requirements.

The general idea for Vue component unit testing is to render the component and then assert that the labels match the state of the component.

Often, when tests are added after the implementation is complete, developers tend to accept the output generated by the program without having to double-check the results through manual calculations. Turn requirements into tests that can be forged.

doubt

Seems to have formed a habit, every time will leave some questions, behind slowly solve the doubt.

  • How do I test vue-Router in a component
  • How do I test Vuex in a component
  • How to speed up the startup of tests?
  • How does the CHAI assertion library differ from Jest’s Expect
  • What is Sinon
  • How to Add single tests to Mixin, Watch and Computed

reference

  • Mocha website
  • mocha-webpack
  • jest/expect
  • Vue Test Utils 官网
  • Sample project using Mocha