# react-scripts-karma

> React scripts using karma as the test runner.

Latest version **1.0.1** (published 2019-08-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-scripts-karma
pnpm add react-scripts-karma
yarn add react-scripts-karma
bun add react-scripts-karma
```

Provides the command `react-scripts-karma`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-08-07 |
| First published | 2019-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.10 |
| Dependencies | 59 |
| Unpacked size | 150.3 KB |
| Known vulnerabilities | 0 (+11 in 5 direct dependencies) |
| Install scripts | no |
| Maintainers | celso-henrique |
| Keywords | react-scripts, karma, create-react-app, browser, mocha, tests |

## Links

- npm: https://www.npmjs.com/package/react-scripts-karma
- Repository: https://github.com/celso-henrique/react-scripts-karma
- Homepage: https://github.com/celso-henrique/react-scripts-karma#readme
- Issues: https://github.com/celso-henrique/react-scripts-karma/issues
- npm.io page: https://npm.io/package/react-scripts-karma

## Dependencies (59)

- [jest](https://npm.io/package/jest.md) 24.7.1
- [karma](https://npm.io/package/karma.md) ^4.2.0
- [mocha](https://npm.io/package/mocha.md) ^6.2.0
- [dotenv](https://npm.io/package/dotenv.md) 6.2.0
- [eslint](https://npm.io/package/eslint.md) ^5.16.0
- [is-wsl](https://npm.io/package/is-wsl.md) ^1.1.0
- [semver](https://npm.io/package/semver.md) 6.0.0
- [ts-pnp](https://npm.io/package/ts-pnp.md) 1.1.2
- [resolve](https://npm.io/package/resolve.md) 1.10.0
- [webpack](https://npm.io/package/webpack.md) 4.35.0
- [fs-extra](https://npm.io/package/fs-extra.md) 7.0.1
- [fsevents](https://npm.io/package/fsevents.md) 2.0.7
- [camelcase](https://npm.io/package/camelcase.md) ^5.2.0
- [babel-jest](https://npm.io/package/babel-jest.md) ^24.8.0
- [css-loader](https://npm.io/package/css-loader.md) 2.1.1
- [url-loader](https://npm.io/package/url-loader.md) 2.0.1
- [@babel/core](https://npm.io/package/@babel/core.md) 7.4.3
- [file-loader](https://npm.io/package/file-loader.md) 3.0.1
- [karma-mocha](https://npm.io/package/karma-mocha.md) ^1.3.0
- [sass-loader](https://npm.io/package/sass-loader.md) 7.1.0
- [babel-eslint](https://npm.io/package/babel-eslint.md) 10.0.1
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.5
- [jest-resolve](https://npm.io/package/jest-resolve.md) 24.7.1
- [style-loader](https://npm.io/package/style-loader.md) 0.23.1
- [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 4.3.1
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 4.2.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 2.1.2
- [karma-webpack](https://npm.io/package/karma-webpack.md) ^4.0.2
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^9.0.1
- [postcss-normalize](https://npm.io/package/postcss-normalize.md) 7.0.1
- [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) 3.0.0
- [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) 1.2.1
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.6.0
- [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^1.0.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.2.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.12.4
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 4.0.0-beta.5
- [karma-nyan-reporter](https://npm.io/package/karma-nyan-reporter.md) ^0.2.5
- [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 4.0.1
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.16.0
- [jest-watch-typeahead](https://npm.io/package/jest-watch-typeahead.md) 0.3.0
- [karma-chrome-launcher](https://npm.io/package/karma-chrome-launcher.md) ^3.0.0
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 1.2.3
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^9.0.0
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.50.1
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 6.2.1
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 4.1.0
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) 4.2.0
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^4.0.1
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.5.0
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 2.0.4
- [@typescript-eslint/parser](https://npm.io/package/@typescript-eslint/parser.md) 1.10.2
- [eslint-plugin-react-hooks](https://npm.io/package/eslint-plugin-react-hooks.md) ^1.5.0
- [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.3.2
- [jest-environment-jsdom-fourteen](https://npm.io/package/jest-environment-jsdom-fourteen.md) 0.1.0
- [@typescript-eslint/eslint-plugin](https://npm.io/package/@typescript-eslint/eslint-plugin.md) 1.10.2
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.1
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.2.0

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads
- [aws-elasticsearch-connector](https://npm.io/package/aws-elasticsearch-connector.md) — 37.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-08-07
- 1.0.0 — 2019-08-05

## README

# react-scripts-karma
[![Build Status](https://travis-ci.org/celso-henrique/react-scripts-karma.svg?branch=master)](https://travis-ci.org/celso-henrique/react-scripts-karma)

React scripts forked from [Create React App](https://github.com/facebook/create-react-app), but using [Karma](https://karma-runner.github.io/latest/index.html) as the test runner and [Mocha](https://mochajs.org/) 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:

``` sh
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):
``` json
{
  "scripts": {
    "test": "react-scripts-karma test"
  }
}
```

Write a simple test inside your `src` directory, with a `.spec.js` extension:
``` javascript
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:
``` sh
npm run test
```

## Configuration
The default karma configuration is:

``` javascript
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:
``` json
{
  "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:

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

## License
This project is [MIT licensed](./LICENSE).

---
_Source: https://npm.io/package/react-scripts-karma · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._