enzyme: TypeError: Adapter is not a constructor

17
votes

Hi I was trying to test the react application With enzyme, But it throws an error TypeError: Adapter is not a constructor , Any Idea

This is my test file 

import ProductRow from '../product_row';
import React from 'react';
// import { mount } from 'enzyme';
import * as enzyme from 'enzyme';
import * as Adapter from 'enzyme-adapter-react-16';
enzyme.configure({ adapter: new Adapter() });

test('TodoComponent renders the text inside it', () => {
  const wrapper = enzyme.mount(
    <ProductRow  item={{}} quickView={[]}
      productPage={''}
      count={0}
      numberOfColumns={0}
      title={'title'}
      taxonomies={{}}
      excerpt={'excerpt'}
    />
  );
});

TypeError: Adapter is not a constructor

4
reactjsjestjsenzyme

4 Answers

47
votes

I don't think import * works as expected when importing a module with a default export, this should work:

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

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

BTW. you can put the above in a file and reference it in your Jest settings so you don't have to add this to every test:

setupFiles: ['<rootDir>/tools/jest/setup-react-adapter.js'],
9
votes

For TypeScript:

import { configure } from 'enzyme';
import * as ReactSixteenAdapter from 'enzyme-adapter-react-16';
const adapter = ReactSixteenAdapter as any;
configure({ adapter: new adapter.default() });
8
votes

You need to use the import like this:

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

This way: (import * as Adapter from ...) returns a message "TypeError: Adapter is not a constructor."

0
votes

In case you are using Typescript with the esModuleInterop option enabled, you'll need this:

import { configure} from 'enzyme';
import * as ReactSixteenAdapter from 'enzyme-adapter-react-16';
configure({ adapter: new (ReactSixteenAdapter as any)() });