Enzyme: Example of configuring Enzyme Adapter with Karma

[jonspalmer]

The install instructions detail adding the adapter configuration to your 'setup file'. I can't figure out what the right incantations are for running via Karma. Is there an up to date example of combining Enzyme + Karma with adapter configuration?

[AntiFish03]

This is basically what I am using.

// spec/helpers/enzyme-config.helper.js

// CommonJS style
// const Enzyme = require('enzyme');
// const Adapter = require('enzyme-adapter-react-16');

// ES6 Import
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

if you are using tests.webpack.js style config load it like this.

// spec/tests.webpack.js

var testHelpers = require.context('./helpers');
testHelpers.keys().forEach(testHelpers);

or if using files:[] in the karma.config.js

files: [
  {
    pattern: 'spec/helpers/*.helpers.js',
    included: true
  },
  ...
]

[anthonyhastings]

I'm having issues with this myself; I'm also using Karma and Webpack together but unless I put the Enzyme.configure call inside of the actual spec file, nothing works. I've tried the following:

    // Snippet of my Karma configuration.

    files: [
      'tests/test-support/setup-enzyme.js
      'config/runners/full-suite.js'
    ],
    preprocessors: {
      '**/*.js': ['webpack', 'sourcemap']
    },

    // Contents of `setup-enzyme.js`.

    import Enzyme from 'enzyme';
    import Adapter from 'enzyme-adapter-react-15.4';

    Enzyme.configure({
      adapter: new Adapter()
    });

    // Contents of `full-suite.js`.

    require('../../tests/test-support/jasmine-util/mock-globals');
    requireAll(require.context('../../tests/test-support/jasmine-util', true, /\.js$/));
    requireAll(require.context('../../tests/test-support/matchers', true, /\.js$/));
    require('../../tests/test-support/setup-polyfills');
    requireAll(require.context('../../', true, /\.spec\.js$/));

I've also tried including setup-enzyme.js from within full-suite.js. It's definitely being loaded as I've stuck some console.logs within it to ensure they get called. Any help would be greatly appreciated!

[ljharb]

https://github.com/airbnb/enzyme/issues/1318#issuecomment-342590767 may be helpful.

[priyajeet]

@ljharb What if the file(s) to test is dynamic? In other words, what if I am running a single test or all tests, which is determined at runtime. I want my files section to include just that one test file OR all the files. In the above comment link it assumes that you are running tests for all files. Otherwise somehow at runtime you have to have a dynamic tests.webpack.js with the correct path to one test, coded in.

What I really want is what's being done in this comment https://github.com/airbnb/enzyme/issues/1318#issuecomment-342165002 where karma's files section has the adapter setup js file, and then one includes the individual test file or folder to test.

[GreenGremlin]

The issue is that the helper and the test file are processed as separate files. This means they'll each have their own copy of enzyme.

Another solution is to configure enzyme in a single file and re-export enzymes exports.

/* src/test/enzyme.js */

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({adapter: new Adapter()});

// I also like to use this file to initialize jasmine-enzyme
import jasmineEnzyme from 'jasmine-enzyme';

beforeEach(() => {
    jasmineEnzyme();
});

export * from 'enzyme';

Then, in your tests import the local copy of enzyme.

/* src/myModule.test.js */

import {shallow} from '../test/enzyme';

[ljharb]

@GreenGremlin want to make a PR making the docs around karma usage better?

[GreenGremlin]

@GreenGremlin want to make a PR making the docs around karma usage better?

I'll see what I can do.

[GreenGremlin]

@ljharb I took a stab at it. Maybe I was missing some context, but the existing documentation didn't seem to have anything to do with enzyme, so I ended up deleting most of it.