TypeError: Cannot read property 'render' of undefined enzyme-adapter-react-14

[wKich]

Describe the bug
Using stateless arrow functional component lead to an error.

To Reproduce

1. Execute code:

import Enzyme, { mount } from 'enzyme'
import Adapter from 'enzyme-adapter-react-14'

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

const Bar = () => <div>{'Hello'}</div>
class Foo extends React.Component {
  render() { return <Bar /> }
}
mount(<Foo />)

2. See error:

TypeError: Cannot read property 'render' of undefined
  at typeToNodeType (node_modules/enzyme-adapter-react-14/build/ReactFourteenAdapter.js:49:31)
  at instanceToTree (node_modules/enzyme-adapter-react-14/build/ReactFourteenAdapter.js:85:17)
  at instanceToTree (node_modules/enzyme-adapter-react-14/build/ReactFourteenAdapter.js:91:17)
  at instanceToTree (node_modules/enzyme-adapter-react-14/build/ReactFourteenAdapter.js:91:17)
  at Object.getNode (node_modules/enzyme-adapter-react-14/build/ReactFourteenAdapter.js:149:33)
  at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:100:33)
  at mount (node_modules/enzyme/build/mount.js:19:10)
  at Context.it (test.js:10:5)

Expected behavior
Code should works without error.

Desktop (please complete the following information):

• OS: OSX 10.13.4
• Browser: jsdom
• Version: 11.1.0

Additional context

• enzyme: 3.3.0
• enzyme-adapter-react-14: 1.0.5
• react: 0.14.9

[mykhailo-riabokon]

Hi @wKich

I have tried your configuration and did not get an error. I created a repository with your case could you please check? Maybe something is missing. Also, I noticed that you do not have React in your Execute code.

[wKich]

Yeah, sure. import React from 'react' should be.

In your example, you use babel-preset-env without options, so arrow functions will transform to normal function and test failed, because error throw is only when you use arrow function. If you change .babelrc to like this:

{
  "presets": ["react"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

Test will pass.

[mykhailo-riabokon]

@wKich In this case I see a few workarounds here:

• add transform-es2015-arrow-functions plugin to this configuration

{
  "presets": ["react"],
  "plugins": ["transform-es2015-modules-commonjs"]
}

• use env preset which is more flexible than trying to cover your needs by plugins. You can specify your desirable target(s) and voilà
• React 0.14.9 is a bit old, and if you can switch to a newer version you will not have this issue with your initial .babelrc. I pushed this version to this branch.

I hope it helps you.

[wKich]

Thank you for workaround options, but I just wanted to report about this issue

[ljharb]

@wKich Thanks - I was able to reproduce this, and find a fix as well as add a regression test. I'll push up a fix shortly.