enzyme: enzyme_adapter_react_16_1.default is not a constructor

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jquery": "^3.2.15",
    "@types/react-bootstrap": "^0.31.6",
    "@types/react-router-dom": "^4.0.8",
    "jquery": "^3.2.1",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.3",
    "react-dom": "^16.0.0",
    "react-router-dom": "^4.2.2",
    "react-scripts-ts": "2.8.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom --setupTestFrameworkScriptFile=raf/polyfill",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.0",
    "@types/enzyme-adapter-react-16": "^1.0.0",
    "@types/jest": "^21.1.4",
    "@types/node": "^8.0.45",
    "@types/react": "^16.0.14",
    "@types/react-dom": "^16.0.1",
    "enzyme": "^3.1.0",
    "enzyme-adapter-react-16": "^1.0.2",
    "react-addons-test-utils": "^15.6.2",
    "react-test-renderer": "^16.0.0"
  }
}

test file:


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

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

import React from 'react';
import { shallow, mount, render } from 'enzyme';
import Header from './Header';


it('expects Header title to be DMA Migration', () => {
    const header = shallow(<Header />);
    expect(header.find(".migration-title").text()).toEqual('DMA Migration')
});

error:

Test suite failed to run

    TypeError: enzyme_adapter_react_16_1.default is not a constructor
      
      at Object.<anonymous> (src/components/Header.test.tsx:5:29)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 10
Comments: 26 (8 by maintainers)

Most upvoted comments

Based on the above answers, what i did to solve this is:

yarn add --dev types/enzyme-adapter-react-16 types/enzyme and changed imports to

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

+81

grigored on Dec 19, 2017

Incase anyone stumbles across this thread, I found the import * as Adapter solution not to work but if I imported the ReactSixteenAdapter specifically it works.

import * as Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

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

+63

mattjegan on May 16, 2018

Incase anyone stumbles across this thread, I found the import * as Adapter solution not to work but if I imported the ReactSixteenAdapter specifically it works.
import * as Enzyme from 'enzyme';
import ReactSixteenAdapter from 'enzyme-adapter-react-16';

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

Another prerequisite for this to work is esModuleInterop enabled in tsconfig.json. Tested with

typescript@3.0.3
enzyme@3.7.0
enzyme-adapter-react-16@1.6.0

The reason is described here: https://github.com/airbnb/enzyme/pull/1264#discussion_r144713875

+28

InvictusMB on Oct 15, 2018

Another prerequisite for this to work is esModuleInterop enabled in tsconfig.json

This was a critical piece of information in my journey to get enzyme to stop complaining. In tsconfig.js I added "esModuleInterop": true.

+14

bradgreens on Nov 20, 2018

You should never need import * as; typescript’s module system is broken unless you enable synthetic imports and esModuleInterop.

ljharb on Nov 28, 2019

You need to use the import like this:

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

filipenatanael on Oct 16, 2018

See https://github.com/airbnb/enzyme/pull/1264

TypeScript doesn’t yet create synthetic default imports like Babel does

jwbay on Oct 19, 2017

import * as Enzyme from ‘enzyme’; import * as Adapter from ‘enzyme-adapter-react-16’;

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

not working this

mipa1304 on Nov 28, 2019

TypeScript: import { configure } from ‘enzyme’; import * as ReactSixteenAdapter from ‘enzyme-adapter-react-16’; const adapter = ReactSixteenAdapter as any; configure({ adapter: new adapter.default() }); It work for me.

bazyliszek10000 on Sep 30, 2018