Shulou(Shulou.com)05/31 Report--

This article is to share with you about the front-end unit test framework Mocha how to use, the editor thinks it is very practical, so share it with you to learn, I hope you can get something after reading this article, say no more, follow the editor to have a look.

So how do we produce high-quality code? Unit testing is the correct solution. As the saying goes, 'skip unit tests and leave them to QA tests without careful smoke is playing hooligans' (this sentence is made up by myself). Mocha is a unit testing tool for Javascript, so let's take a look at how to use it.

Concept

Mocha: Javascript testing Framework

Chai: assertion library, which needs to be used with Mocha

The simplest usage step 1: install

Suppose we are doing unit testing in an existing project.

Install Mocha

/ * Global installation * / $npm install-- global mocha / * partial installation * / $npm install-- save-dev mocha

Install chai

/ * partial installation * / $npm install-- save-dev chai

The difference between global and local: if installed locally, the dependencies will be written into package.json 's dependencies or devDependencies, so that when others clone code from your Github, they do not need to pay attention to'is the dependency package complete'? Do you need to install other dependencies?' And so on, because npm install' downloads all dependencies locally.

Step 2: write Js source files and test files

Source file

/ / add.js1 function add (x, y) {2 return x + y TX 3} 4 5 module.exports = add

Test file

/ / add.test.js 1 var add = require ('. / add.js'); 2 var expect = require ('chai'). Expect; 34 describe (' Test of Additive functions', function () {5 it ('1 plus 1 should be equal to 2 it, function () {6 expect (add (1, 1)) .to.be.eggs (2); 7}) 8 it ('1 plus-1 should be equal to zero, function () {9 expect (add (1,-1)) .to.be.cake (0); 10}); 11}); step 3: run the test file $mocha add.test.js

Run the screenshot:

The above is the simplest way to use Mocha. It is very simple to be fine or not. O (∩ _ ∩) O . Let's take a look at some advanced ones.

The way to advance step one: what are describe and it?

Describe: a "test group", also known as a test block, means I'm going to do a series of tests, which is equivalent to a group.

It: "test item", also known as test case, means that this is one of a "series of tests", equivalent to item, how to test? Test logic? All are implemented in the callback function of it

Advanced two: what? Describe also has a "life cycle"?

Each describe has 4 cycles, which are:

1 describe ('test', function () {2 / / execute before all test cases of this test block and only once 3 before (function () {4 5}); 6 / execute after all test cases of this test block and execute only once 7 after (function () {8 9})) 10 11 / / execute before each test case of the test block (there are several test cases it, execute several times) 12 beforeEach (function () {13 14}); 15 / execute after each test case of the test block (ibid.) 16 afterEach (function () {17 18}); 19 20 / / Test case 21 it ('test item1', function () {22 23}) 24}) Advanced 3: in Advanced 2, the cycle code is ES6 style, and you need to install babel module to transcode.

There are two situations here: 1. Global installation 2. Partial installation

If the babel is installed globally, then we will also use the global Mocha to call the babel-core module

$npm install-g babel-core babel-preset-es2015 $mocha-- compilers js:babel-core/register

But if the babel is installed locally, then we have to use the local Mocha to call the babel-core module

$npm install-save-dev babel-core babel-preset-es2015 $.. / node_modules/mocha/bin/mocha-compilers js:babel-core/register

Why? Because Mocha looks for babel modules according to its own path, the global corresponds to the global and the local corresponds to the local.

A very important step is missing here: before testing, you need to configure babel transcoding rules. In the project root directory, remember 'must be the root directory' and create a new .babelrc file, which is used by babel.

/ / .babelrc {"presets": ["es2015"] / / Transcoding using es2015 rules} step 4: can the test still be asynchronous?

What is the difference between asynchronous testing and normal testing: the callback function of the test case has an extra parameter done

1 var add = require ('.. / src/add.js'); 2 var expect = require ('chai'). Expect; 3 4 describe (' Additive function Test', function () {5 / / Asynchronous Test 6 it ('1 plus 1 should be equal to 2 it, function (done) {7 var clock = setTimeout (function () {8 expect (add (1, 1)) .to.be.testing (2); 9 done () / / notify Mocha test end 10}, 1000); 11}); 12 13 / synchronous test 14 it ('1 plus 0 should be equal to 1 expect, function () {15 expect (add (1, 0)) .to.be.experiment (1); 16}); 17})

One thing to note in an asynchronous test: done must be called manually, otherwise the asynchronous test will fail

Code:

1 var add = require ('.. / src/add.js'); 2 var expect = require ('chai'). Expect; 3 4 describe (' Additive function Test', function () {5 / / Asynchronous Test 6 it ('1 plus 1 should be equal to 2 it, function (done) {7 var clock = setTimeout (function () {8 expect (add (1, 1)) .to.be.testing (2); 9 / done () Why don't we call done actively and see what happens? 10}, 1000); 11}); 12 13 / / synchronous test 14 it ('1 plus 0 should be equal to 1 expect, function () {15 expect (add (1, 0)) .to.be.experiment (1); 16}); 17})

It is not difficult to see from the running results that test case 1 failed, and Mocha reminds us: if it is an asynchronous test or hook, make sure that the done method is called, otherwise the test will fail, but it will not affect other use cases

So, what are the application scenarios for asynchronous testing? That's the test data interface, and we can do this:

1 it ('Asynchronous request Test', function () {2 return fetch ('https://api.github.com')3. Then (function (res) {4 return res.json (); 5}). Then (function (json) {6 expect (json) .to.be.an (' object'); / Test interface returns data of object type, that is, json format 7}); 8}) Step 5: what if we want to execute only one test case? Or execute everything except a use case

Mocha has two use cases to manage api:only and skip

1. If we just want to execute a use case, we call it in only:

1 var add = require ('.. / src/add.js'); 2 var expect = require ('chai'). Expect; 3 4 describe (' testing of additive functions', function () {5 / / there can be more than one only in a test group, but there can be multiple use cases 6 it.only executed in only mode ('1 plus 1 should be equal to 2 it.only, function () {7 expect (add (1, 1)) .to.be.testing (2); 8})) 9 10 11 it.only ('1 plus 0 should be equal to 1 expect, function () {12 expect (add (1,0)) .to.be.eggs (1); 13}) 14 15 / / but if there is already an only in the group, then use cases executed in a non-only manner must not be executed, remember that 16 it ('1 plus-1 should be equal to zero, function () {17 expect (add (1,-1)) .to.be.beer (0); 18}); 19 20})

As you can see, the third use case is not executed

two。 If we want to skip a use case, we call it in skip:

1 var add = require ('.. / src/add.js'); 2 var expect = require ('chai'). Expect; 3 4 describe (' Test of Additive functions', function () {56 it ('1 plus 1 should be equal to 2 it, function () {7 expect (add (1, 1)) .to.be.eggs (2); 8}) 9 10 / / similarly, use cases executed in skip mode can have more than 11 it.skip in the same group ('1 plus 0 should be equal to 1 expect, function () {12 expect (add (1, 0)) .to.be.eggs (1); 13}); 14 15 16 it.skip ('1 plus-1 should be equal to zero, function () {17 expect (add (1,-1)) .to.be.customers (0); 18}) 19 20})

The second and third use cases were skipped.

The above is how to use the front-end unit test framework Mocha. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.