Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/developit/karmatic

🦑 Easy automatic (headless) browser testing with Jest's API, but powered by Karma & Webpack.
https://github.com/developit/karmatic

chrome-headless jasmine jest karma karma-plugin karma-webpack test-runner testing

Last synced: about 2 months ago
JSON representation

🦑 Easy automatic (headless) browser testing with Jest's API, but powered by Karma & Webpack.

Awesome Lists containing this project

README

        

# Karmatic [![npm](https://img.shields.io/npm/v/karmatic.svg)](https://npm.im/karmatic) [![travis](https://travis-ci.org/developit/karmatic.svg?branch=master)](https://travis-ci.org/developit/karmatic)

Zero-config browser tests powered by [Karma] & [Puppeteer], with automatic [Rollup] & [Webpack] support.

Think of it like **Jest for cross-browser testing** - it even uses the same [expect syntax](https://jestjs.io/docs/en/using-matchers).

## Why do I want this?

Karma, Rollup/Webpack and Jasmine are all great. They're all also quite powerful and each highly configurable. When creating and maintaining small modules, duplication of these configurations and dependencies is cumbersome.

Karmatic is a zero-configuration wrapper around these tools with intelligent defaults, configuration auto-detection, and optimizations most configurations don't include.

Most importantly, Karmatic provides a (headless) browser test harness in a single dependency.

## Installation

```sh
npm i -D karmatic
```

... then add a `test` script to your `package.json`:

```js
{
"scripts": {
"test": "karmatic"
}
}
```

... now you can run your tests using `npm t`. Here's a [minimal example repo](https://gist.github.com/developit/acd8a075350eeb6574439e92888c50cf).

If you have webpack set up in your project, it will be detected and your `webpack.config.js` will be used. Otherwise, Rollup is used to bundle tests and any `rollup.config.js` will be used if present.

### Test File Patterns

By default, Karmatic will find tests in any files ending in `.test.js` or `_test.js`.
You can change this to any minimatch pattern _(note the quotes to avoid shell expansion)_:

```sh
karmatic '**/*Spec.jsx?'
```

### Options

`--chromeDataDir `

Filename to be used to save Chrome preferences between test runs. Useful for debugging tests. It is recommended to also add this filename to `.gitignore`.

Example:

```
karmatic --chromeDataDir .chrome
```

## Usage

```text
Usage
$ karmatic [options]

Available Commands
run Run tests once and exit
watch Run tests on any change
debug Open a headful Puppeteer instance for debugging your tests

For more info, run any command with the `--help` flag
$ karmatic run --help
$ karmatic watch --help

Options
-v, --version Displays current version
--files Minimatch pattern for test files
--headless Run using Chrome Headless (default true)
--coverage Report code coverage of tests (default true)
-h, --help Displays this message
```

To disable any option that defaults to `true`, pass `false` to the option: `--headless false` or `--coverage false`.

NOTE: The `debug` option overrides the default value of the `--headless` and `--coverage` option to be `false`. This option will also open up the local Puppeteer installation of Chrome, not your globally installed one. If you'd like to debug your tests using your your own instance of Chrome (or any other browser), copy the URL from the puppeteer window into your favorite browser.

## FAQ

**Q**: [Is there an FAQ?](https://twitter.com/gauntface/status/956259291928776704)\*\*

> Yes.

## Projects Using Karmatic

Karmatic is pretty new! Here are some projects that have switched to it you may use as a reference:

- [workerize-loader](https://github.com/developit/workerize-loader/commit/afaa20bbfbdec1d6a5523ec69ba2a2d5d495cfd6)

## License

[MIT](https://oss.ninja/mit/developit) © [developit](https://github.com/developit)

[karma]: https://karma-runner.github.io
[rollup]: https://rollupjs.org/
[webpack]: https://webpack.js.org
[jasmine]: https://jasmine.github.io
[puppeteer]: https://github.com/GoogleChrome/puppeteer