Skip to content

Commit

Permalink
Documenting Enzyme configuration with Karma
Browse files Browse the repository at this point in the history
  • Loading branch information
Jonathan Felchlin committed Aug 15, 2018
1 parent 65e14d6 commit 1b0c212
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 44 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ testing your React components, you can consider using:

[Using Enzyme with SystemJS](/docs/guides/systemjs.md)

[Using Enzyme with WebPack](/docs/guides/webpack.md)
[Using Enzyme with Webpack](/docs/guides/webpack.md)

[Using Enzyme with JSDOM](/docs/guides/jsdom.md)

Expand Down
2 changes: 1 addition & 1 deletion SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* [Guides](/docs/guides.md)
* [Migration from 2.x to 3.x](/docs/guides/migration-from-2-to-3.md)
* [Browserify](/docs/guides/browserify.md)
* [WebPack](/docs/guides/webpack.md)
* [Webpack](/docs/guides/webpack.md)
* [JSDOM](/docs/guides/jsdom.md)
* [Jest](/docs/guides/jest.md)
* [Karma](/docs/guides/karma.md)
Expand Down
2 changes: 1 addition & 1 deletion docs/guides.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# enzyme Guides

- [*Using enzyme with Browserify*](guides/browserify.md)
- [*Using enzyme with WebPack*](guides/webpack.md)
- [*Using enzyme with Webpack*](guides/webpack.md)
- [*Using enzyme with JSDOM*](guides/jsdom.md)
- [*Using enzyme with Jest*](guides/jest.md)
- [*Using enzyme with Karma*](guides/karma.md)
Expand Down
88 changes: 47 additions & 41 deletions docs/guides/karma.md
Original file line number Diff line number Diff line change
@@ -1,55 +1,61 @@
# Using enzyme with Karma

Karma is a popular test runner that can run tests in browser environments. enzyme is compatible with
Karma, but often requires a little bit of configuration.
Karma is a popular test runner that can run tests in multiple browser environments. Depending on your Karma setup, you may have a number of options for configuring Enzyme.

This configuration largely depends on which plugins you are using to bundle your JavaScript code. In
the case of Browserify or Webpack, see the below documentation in order to get these up and running.
## Basic Enzyme setup with Karma

### Configure Enzyme

## enzyme + Karma + Webpack
Create an Enzyme setup file. This file will configure Enzyme with the appropiate React adapter. It can also be used to initialize any that you'd like available for all tests. To avoid having to import this file and Enzyme, you can re-export all Enzyme exports from this file and just import it.

See the [webpack guide](webpack.md).
```js
/* test/enzyme.js */
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import jasmineEnzyme from 'jasmine-enzyme';

// Configure Enzyme for the appropriate React adapter
Enzyme.configure({ adapter: new Adapter() });

// Initialize global helpers
beforeEach(() => {
jasmineEnzyme();
});

// Re-export all enzyme exports
export * from 'enzyme';
```

### Import Enzyme from the Enzyme setup file

Anywhere you want to use Enzyme, import the Enzyme setup file just as you would Enzyme itself.

```js
/* karma.conf.js */
module.exports = function karmaConfig(config) {
config.set({
// ...
webpack: { // kind of a copy of your webpack config
devtool: 'inline-source-map', // just do inline source maps instead of the default
module: {
loaders: [{
test: /\.js$/,
exclude: /\/node_modules\//,
loader: 'babel',
query: {
presets: ['airbnb'],
},
}],
},
},
// ...
});
};
/* some_test.js */
// Import anything you would normally import `from 'enzyme'` from the Enzyme setup file
import { shallow } from './test/enzyme';

// ...
```

## enzyme + Karma + Browserify

See the [browserify guide](browserify.md).
## Alternative karma-webpack setup

If you're using Karma and Webpack using [karma-webpack's alternative setup](https://github.com/webpack-contrib/karma-webpack#alternative-usage), you can configure enzyme in your test entry file and import Enzyme directly in individual tests.

```js
/* karma.conf.js */
module.exports = function karmaConfig(config) {
config.set({
// ...
browserify: {
debug: true,
transform: [
['babelify', { presets: ['airbnb'] }],
],
},
// ...
});
};
/* test/index_test.js */
import './enzyme';

const testsContext = require.context('.', true, /_test$/);

testsContext.keys().forEach(testsContext);
```

```js
/* some_test.js */
// If Enzyme is configured in the test entry file, Enzyme can be imported directly
import { shallow } from 'enzyme';

// ...
```

0 comments on commit 1b0c212

Please sign in to comment.