Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-scripts-karma with all npm packages installed. Try it out:

react-scripts-karma lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("react-scripts-karma/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-scripts-karma v1.0.1

React scripts using karma as the test runner.

react-scripts-karma

Build Status

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.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free