react-scripts-karma

react-scripts-karma

React scripts forked from Create React App, but using Karma as the test runner and Mocha as the test framework by default.

Why

There are situations when you need to run your tests inside a real browser, for cross-browser testing or maybe to get support for a specification that wasn't implemented into JSDOM yet. Using this project you don't need to eject your projects created using Create React App.

Usage

Install this lib using:

npm install --save react-scripts-karma

Override the test script of your project's package.json (and other scripts if you want to use our forked version):

{
  "scripts": {
    "test": "react-scripts-karma test"
  }
}

Write a simple test inside your src directory, with a .spec.js extension:

const assert = require('assert');

describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal([1, 2, 3].indexOf(4), -1);
    });
  });
});

And run:

npm run test

Configuration

The default karma configuration is:

const karmaConfig = {
  browsers: ['Chrome'],
  frameworks: ['mocha'],
  files: [
    { pattern: 'src/setupTests.js' },
    { pattern: 'src/**/*.spec.js' }
  ],
  preprocessors: {
    'src/setupTests.js': ['webpack'],
    'src/**/*.spec.js': ['webpack']
  },
  reporters: ['nyan'],
  webpack: {
    mode: 'development',
    node: {
      fs: 'empty'
    },
    optimization: {
      splitChunks: false,
      runtimeChunk: false
    },
    resolve: {
      modules: ['src', 'node_modules']
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
          use: [
            {
              loader: 'file-loader'
            }
          ]
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    }
  },
  webpackServer: {
    noInfo: true
  },
  colors: true,
  autoWatch: false,
  singleRun: true
}

But you can override or add other configs just adding the key "karma" into your package.json file:

{
  "karma": {
    "reporters": ["dots"]
  }
}

Using Jest

If you want to use Jest to compare the results with karma or for any other reason, you can use the command react-scripts-karma test-jest, as bellow:

{
  "scripts": {
    "test": "react-scripts-karma test",
    "test:jest": "react-scripts-karma test-jest",
  }
}

License

This project is MIT licensed.