Enzyme: Problem calling Enzyme.configure in karma/jasmine helper

[wpwood]

I'm using Enzyme with React 16 via Karma, Jasmine, and webpack. I have a test where I configure the Enzyme adapter in the beforeEach function:

import React from 'react';
import Enzyme, { shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

import App from 'app';

describe('App', () => {
  let wrapper;

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

    wrapper = shallow(<App />);
  });

  it('should render an h1 header', () => {
    expect(wrapper.type()).toBe('h1');
  });

  it('should render Hello, World!', () => {
    expect(wrapper.text()).toEqual('Hello, World!');
  });
});

This all works fine.

Since I don't want to have to do this in every Enzyme test, I tried to move that code to an enzyme_helper.js file:

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

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

I have added the file to the list of files loaded by Karma, and built it via webpack (so I can use ES6 format). I've verified (via a console.log and running through the debugger), that the helper gets loaded, but when the tests in the test file run, I get the:

        Error:
              Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none. To
              configure an adapter, you should call `Enzyme.configure({ adapter: new Adapter() })`
              before using any of Enzyme's top level APIs, where `Adapter` is the adapter
              corresponding to the library currently being tested. For example:
              import Adapter from 'enzyme-adapter-react-15';
              To find out more about this, see http://airbnb.io/enzyme/docs/installation/index.html

Any suggestions what I might be doing wrong?

[ljharb]

We've seen issues with karma in general around things like this; do your tests work if you run them in node?

[wpwood]

@ljharb Sorry, I'm not sure what you're asking me to do.

[ljharb]

I’m asking you to run your jasmine tests in node without karma and see if they pass; in other words, I’m trying to determine whether the problem is your karma config or not.

[josh08h]

I am also getting the same error.

Having the following in all my spec files will work

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

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

however I would like to configure the adapter just once in its own initialiser file.

I have the following karma config:

{
  files: [ 'path/to/enzyme-initialiser.js', 'path/to/specs']
}

note: The initializer script is being loaded.

[ericgio]

I'm using karma + webpack and got my tests working with the following setup:

In karma.conf.js:

files: [
  'tests.webpack.js',
],
preprocessors: {
  'tests.webpack.js': ['webpack', 'sourcemap'],
},

In tests.webpack.js:

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

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

const context = require.context('/path/to/test/files', true, /Spec$/);
context.keys().forEach(context);

[ljharb]

Duplicate of #1257 I think?

[josh08h]

@ericgio excellent, that works for me too. Thanks!

[josh08h]

@ljharb I believe this issue can now be closed with a reference to @ericgio comment as the solution.

[ericgio]

@ljharb: The documentation around where the adapter code belongs feels a bit vague, so it might be worth adding some examples for the different environments. Happy to submit a PR for Karma + Webpack if you think it's valuable.

[ljharb]

@ericgio a PR to improve the docs is always welcome! Thanks!