Enzyme: TypeError: Super expression must either be null or a function, not undefined

[paulocesarpcfj]

After migrating to React 16, I followed the guide to update enzyme, but now I'm getting this message for all tests:

TypeError: Super expression must either be null or a function, not undefined

How can I fix it?

I've already used this on my setup.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

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

[ljharb]

That usually happens when you're extending something that's a circular dependency. I'd recommend updating enzyme first, before upgrading React - that way you'll know for sure which thing caused the breakage.

[paulocesarpcfj]

Thank for response!

I've already updated to React 16, and my Dev and Prod builds are running fine, just my tests are broken

[ljharb]

:-) yes, but you can't know if your React 16 upgrade worked or not until you have tests passing on it - that's why you want your tests passing on enzyme 3 and React 15 first, and then you upgrade to React 16.

[paulocesarpcfj]

Nice, I'll try it.

[santaclauze]

any update on this, same issue

[paulocesarpcfj]

Even using React 15 and Enzyme 3, the errors are the same, only using Enzyme 2 works. :(

[ljharb]

@paulocesarpcfj thanks for verifying that; what does npm ls output?

[paulocesarpcfj]

I don't know what happened exactly, but after doing some tests, my error now shows as Cannot find module 'enzyme/build/ShallowTraversal' from 'shallow.js'

[EDIT] Using enzyme as 3.0.0. Before I was using with 2.8.2

├── @kadira/[email protected]
├── @kadira/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected] extraneous
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

npm ERR! peer dep missing: [email protected] || ^2.3.0, required by [email protected]
npm ERR! peer dep missing: enzyme@^2.7.1, required by [email protected]
npm ERR! peer dep missing: eslint@^2.9.0, required by [email protected]
npm ERR! peer dep missing: eslint-plugin-jsx-a11y@^1.2.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0-0, required by [email protected]
npm ERR! peer dep missing: react@^15.5.3, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^15.6.2, required by [email protected]
npm ERR! peer dep missing: react@^0.14.9 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^15.0.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^15.4.2, required by [email protected]
npm ERR! peer dep missing: react-dom@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react-dom@^0.14.0 || ^15.0.0-0, required by [email protected]
npm ERR! peer dep missing: react-test-renderer@^16.0.0-0, required by [email protected]
npm ERR! extraneous: [email protected] /home/paulo.ferreira/projects/sb2w-website/node_modules/react-addons-test-utils
npm ERR! peer dep missing: react@^0.14.8 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^0.14.8 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react-dom@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react-dom@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react-dom@^0.14.7 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react-dom@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0-0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.8 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0-0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^0.14.8 || ^15.0.0, required by @kadira/[email protected]
npm ERR! peer dep missing: react-dom@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.3 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.8 || ^15.0.1, required by [email protected]
npm ERR! peer dep missing: eslint@^2.9.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.7 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^0.14.0 || ^15.0.0, required by [email protected]
npm ERR! peer dep missing: react@^15.0.0, required by [email protected]
npm ERR! peer dep missing: react-dom@^15.0.0, required by [email protected]

[ljharb]

See all those peer dep errors? If npm ls doesn't exit successfully, nothing can ever be expected to work. Resolve those first.

[domharrington]

This happened for me when i'd installed the enzyme-adapter-react-16 module but still had [email protected].

To make sure npm installed the latest and not get stuck on what i already had, I had to run npm i --save-dev enzyme@latest

[andreyMakahov]

I have the same issue.

[yutin1987]

I have the same issue,
not work,

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

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

but use the code below it is work, I don't know why.

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-15';

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

[ljharb]

Anyone having this issue; are you using webpack? Typescript? Anything besides "normal JavaScript plus Babel"?

[yutin1987]

I use react-native so use https://github.com/babel/babel-jest run on testing.

"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-jest": "^21.2.0",
"babel-polyfill": "^6.26.0",
"babel-preset-react-native": "^4.0.0",

if needed, I can create a sample repository.

[ljharb]

Sure, that'd be helpful, thanks!

[yutin1987]

I found the issue is my mistakes, so sorry.

export default Enzyme is bad, should use export * from 'enzyme';

a sample code, https://github.com/yutin1987/enzymeV3/blob/master/__mocks__/enzyme.js

[ljharb]

@yutin1987 I'm not sure why you'd need to mock out a dev dependency at all; just configure the adapter in your test setup file, and import enzyme normally.

[neonsilk]

@ljharb the reason I was trying to alias the enzyme import was due to the design of karma-webpack... with the default usage it creates a webpack bundle for each file, so simply adding a test setup file doesn't work because it's in a different bundle than the one where your test runs (i.e. calling configure({ adapter: new Adapter() }) in your setup file does not configure enzyme in the individual test bundles).

[ljharb]

Seems like karma-webpack would need to include the setup file in every bundle to work correctly.

[dschinkel]

Karma is the devil. I hate that bloated pile of crap runner...why do you need it? I run tests in WebStorm with react, plain and simple

[nicoara]

I was importing wrongly:

import React, { Component } from 'react-native';
import { View, Text } from 'react';

instead of the correct way:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

and ESLint was not throwing any error.

[drewjenkins]

For me, I was using an older version of draft-js, but had updated enzyme, and draft-js's version of enzyme was 2.9 instead of 3.1. Updating my draft-js fixed my issue. For anyone else encountering this, look into the version of enzyme that is actually being pulled in in your node_modules, and verify it matches the version you were expecting to get

[gwenf]

I was getting the same peer dependency errors. I just removed my node_modules folder and reinstalled it and the tests are passing now.

[holly-juan]

I have the same issue，at last I found react version is 15.0.1 in my project , but the Dependencies radium package need react > 15.3.0, so class can extends PureComponent, < 15.0.1 react has't PureComponent, by upgrade react's version to 15.6.2 or > 16.0.0 can solve my problem, hope to help you

[ljharb]

I'm going to close this; please file a new one if you're still having issues with the latest version of enzyme, after ensuring npm ls exits successfully.

[farkhanda44zeb]

hi every one i was import in correctly
before:
export default class App extends Component.React{
}
when i was remove React so remove error :)
correct way:
export default class App extends Component{
}
above is the right way

[Durairaj]

hi every one i was import in correctly
before:
export default class App extends Component.React{
}
when i was remove React so remove error :)
correct way:
export default class App extends Component{
}
above is the right way

Its React.Component :)

[livingdev]

Did; import React, {component} from 'react';
...
class App extends component {
instead of; import React, {Component} from 'react';
...
class App extends Component {...}
emphasis on capitalizing 'C' in 'component'

[marcellomontemagno]

I had this problem for a different reason and I think this could help someone in the future.

The source of the problem for me was that enzyme-adapter-react-16 was requiring enzyme but finding undefined because of a misconfiguration in my jest.config.js

In more details I configured moduleDirectories: ["node_modules", ...someOtherPath] and the "node_modules" part wasn't actually working. I had to replace "node_modules" with a complete path like path.join(__dirname, 'node_modules')

[Akshayvellanki]

jest.mock('@react-native-firebase/messaging', () => {
  return () => ({
    hasPermission: jest.fn(() => Promise.resolve(true)),
    subscribeToTopic: jest.fn(),
    unsubscribeFromTopic: jest.fn(),
    requestPermission: jest.fn(() => Promise.resolve(true)),
    getToken: jest.fn(() => Promise.resolve('myMockToken')),
    onMessage: jest.fn(),
    onNotificationOpenedApp: jest.fn(),
    getInitialNotification: jest.fn(() => Promise.resolve(false))
  })
})

jest.mock('@react-native-firebase/crashlytics', () => ({}))

jest.mock('@react-native-firebase/app', () => {
  return () => ({
    onNotification: jest.fn(),
    onNotificationDisplayed: jest.fn()
  })
})

jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter')
// jest.mock('@react-native-firebase/app/lib/internal/RNFBNativeEventEmitter')

this worked for me please try...!