Detailed explanation of the steps to build a vue2 unit test environment using karma+mocha+webpack3

This time I will bring you a detailed explanation of the environment steps using karma mocha webpack3 to build vue2Unit test, and what are the precautions for using karma mocha webpack3 to build a vue2 unit test environment. Here are Let’s take a look at practical cases.

I found many examples on the Internet about unit testing. They are all about how to add unit tests when creating a new project. How to add them using vue-cli, but my project has been generated and cannot be re-initialized again. At this time, there are many pitfalls in how to add unit tests. I will write down my experience here.

1. Use vue-cli to generate a new project and copy the files required for unit testing directly into your project

vue init webpack vuetest

File downloadAddress source code Github link

2. Install the Karma Mocha module. This module has many dependencies. I encountered a pitfall and found that a certain module was missing after half a day of solving the problem. List them all here. Required modules

npm i -D karma karma-webpack phantomjs-prebuilt karma-phantomjs-launcher karma-phantomjs-shim karma-chrome-launcher karma-sourcemap-loader mocha karma-mocha sinon chai sinon-chai karma-sinon-chai karma-spec-reporter karma-coverage istanbul-instrumenter-loader

3. Modify package.json and add startup code in scripts (replace it if there is a unit)

"unit": "karma start test/unit/karma.conf.js --single-run",

4. Modify the index.js file in the test directory, This is the biggest pitfall I encountered. It took me a long time to solve it, but it always prompted an error in the .scss file. Here is the solution.

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)

is changed to:

const srcContext = require.context('../../src', true, /^\.\/(style$) /)

5. You can copy the project file generated by vue-cli for testing, as shown below, and configure the routing , test whether the unit test module is installed successfully

6. Run the following command in the project to start the unit test

 npm run unit

At the same time, generate test reports in test/unit/coverage. The above is a simple vue unit test example. Finally, I present the source code

In-depth study of the reference document

Vue.js learning series six - Vue unit test Karma Mocha study notes

karma webpack builds vue unit Test environment

karma mocha webpack3 builds vue2 unit test environment

Author related Vue articles

Implementing background system permission control based on Vue2.0

[vue2. 0-Based on elementui skin change [custom theme]](https://juejin.im/post/5aea98...

Vue internationalization processing vue-i18n and automatic project switching Chinese and English

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

react Detailed explanation of the steps to highlight the selected li

Detailed explanation of the sorting algorithm example in the front end

The above is the detailed content of Detailed explanation of the steps to build a vue2 unit test environment using karma+mocha+webpack3. For more information, please follow other related articles on the PHP Chinese website!