During front-end development, we write a lot of functions that involve unit testing, and Karma is a great integration tool for testing in a browser environment.

1. What is Karma

Karma is a testing tool developed by the Angular team to help developers better and faster execute test code and get test results in multiple environments. At runtime, it automatically starts the configured browser and a Node server, executes the test code in the browser, and returns the test code execution results to the Node server, which then prints out the received execution results.

2. Install the karma

$ npm  install karma -D
Copy the code

This should be installed in the project path (-d is short for –save-dev).

3. The initialization

$ ./node-modules/.bin/karma init
Copy the code

If you do not want to execute karma in the local path every time, you can install karma- CLI globally

$ npm install karma-cli -g
Copy the code

Karma Start can then be executed in any path and the karma running is the version installed under the current project.

Init lets you select some configuration items:

Test Framework —- I chose Jasmine, which is a JavaScript assertion testing library use require.js —- I choose no Capture any Naturally —-. Are you browsers? PhantomJS location of your source files —- is empty any of files included by the previous patterns be excluted —- is empty karma to watch all files and run the tests on change —- Whether to monitor, I select no

After all configuration items are selected, the karma. Conf.js configuration file is automatically generated.

4. Install the plug-in based on the configuration items

(1) Jasmine is selected as the test framework, and the installation steps are as follows:

$ npm install jasmine-core karma-jasmine -D
Copy the code

There are two here, one is the core of Jasmine and the other is karma’s encapsulation of Jasmine.

(2) The browser is PhantomJS, and the installation steps are as follows:

$ npm install karma-phantomjs-launcher -D
Copy the code

(3) If it involves testing code written in ES6, install Babel and its associated plug-ins:

$ npm install babel-cli babel-preset-env babel-plugin-transform-es2015-modules-umd -D
$ npm install karma-babel-preprocessor -D
Copy the code

(4) Install plug-ins that generate code coverage reports:

$ npm install karma-coverage -D
Copy the code

5. Modify the Karma configuration file

// karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: ' ',
    frameworks: ['jasmine'],
    files: [
      './src/**/*.js'.'./test/**/*.spec.js'
    ],
    exclude: [
    ],
    preprocessors: {
      './src/**/*.js': ['babel'].'./test/**/*.spec.js': ['babel'.'coverage']
    },
    reporters: ['progress'.'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage/'
    },
    port: 9876,
    colors: true.logLevel: config.LOG_INFO,
    autoWatch: false,
    browsers: ['PhantomJS'],
    singleRun: true,
    concurrency: Infinity
  })
}

Copy the code

Modify the Babel configuration file:

// .babelrc
{
  "presets": ["env"]."plugins": ["transform-es2015-modules-umd"]."auxiliaryCommentBefore": "istanbul ignore next"
}
Copy the code

6. Write the test file

// PraiseButton.spec.js
import PraiseButton from '.. /src/PraiseButton.js';

describe('Test likes component'.function () {
  it('addOne () function'.function () {
    var testPraiseButton = new PraiseButton();
    testPraiseButton.addOne();

    expect(testPraiseButton.countNum).toBe(1);
  });
});
Copy the code

7. Run the tests

$ karma start
Copy the code

End of 8.

By following the above steps, you should be able to configure your Karma + Jasmine test environment. If you have any problems or errors in this article, please feel free to discuss them. At the end of the article is a link to the module you need to install, you can go to it with one click.

Welcome to follow my public number

Refer to the link

Karma website – karma – runner. Making. IO / 2.0 / type/I… Karma – cli – www.npmjs.com/package/kar… Karma – jasmine – www.npmjs.com/package/kar… Jasmine – core – www.npmjs.com/package/jas… Karma – coverage – www.npmjs.com/package/kar…