Karma

Official introduction

A simple tool that allows you to execute JavaScript code in multiple real browsers.

A simple tool that allows you to execute js code in multiple real browsers.
After using karma, we didn't need to use jsdom to simulate the environment required for the mount of Enzyme, because karma will test the execution of js in the real browser.

Installation:

npm i --save-dev karma karma-chai karma-webpack karma-mocha karma-chrome-launcher
npm i karma -g
npm install -g karma-cli //The window command line runs. If the display fails to discover the webpack, you need to install this

Then configure karma:

karma init

Here is my configuration:

// Karma configuration
// Generated on Fri Feb 02 2018 10:07:20 GMT+0800 (China standard time)

module.exports = function (config) {
config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha','chai'],


    // list of files / patterns to load in the browser
    files: [
      'src/**/*.js',
      'src/**/*.jsx',//I don't know why, karma doesn't recognize jsx
      'test/*.test.js'
    ],


    // list of files / patterns to exclude
    exclude: [],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/**/*.js': ['webpack'],
      //'src/**/*.jsx':['webpack '], / / I don't know why, karma doesn't recognize jsx
      'test/*.test.js': ['webpack']
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN ||           config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity,
    webpack: {
      module: {
        rules: [{
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['env', 'react']
              }
            }
          },
          {
            test: /\.(gif|png|jpe?g|svg)$/i,
            use: [{
              loader: 'file-loader',
              options: {
                  name: '[name].[ext]',
                  outputPath: 'images/'
              }
            }]
          },
          {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
          },
          {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
          }
        ]
      }
    }
    })
}

A little bit of confusion, when kamar is used, regular expressions can't match jsx files, so it's good to change all jsx files inside the project to js.

Because I prefer the way of jest, I haven't done a more in-depth research on karma, which uses the browser, but just have some understanding.