Testing with Jest & Enzyme: Class constructors cannot be invoked without 'new'

[funwhilelost]

Hey, guys. We're using Radium and running into a hang up during testing. We started a project using create-react-app so our config boilerplate is pretty minimal.

When I make a simple component:

import React from 'react'
import Radium from 'radium'

class DumbComponent extends React.Component {
  render() {
    const styles = {
      backgroundColor: 'red'
    }

    return (
      <div style={styles}>
        <span>Hello</span>
      </div>
    )
  }
}

export default Radium(DumbComponent)

And try to test it by mounting it:

import React from 'react'
import { mount } from 'enzyme'
import DumbComponent from './DumbComponent'

describe('<DumbComponent />', () => {
  const wrapper = mount(<DumbComponent />)

  it('renders without exception', () => {
    expect(wrapper.contains(<span>Hello</span>)).toEqual(true)
  })
})

It's throwing the exceptionTypeError: Class constructors cannot be invoked without 'new'. I read through issue #443 and understand that we could switch over to declaring the components like this: const DumbComponent = React.createClass ({ ... }) which does in fact work and pass the test.

Are there any other workarounds for this issue? Because we have the babel config bottled up in the npm module it's difficult to add the plugin suggested.

Thanks for your help!

[mhd999]

I got this issue recently the solution our Senior developer came up with is really nice:

Which is you need to test your raw component without the Radium decorator, to do so you have to export two things out of the component:

• The raw component

• The component with the decorators

ie:
component file:
export class Foo extends Component
export default radium(Foo)

test file: import raw component
import { Foo } from './Foo';

[philipkobernik]

Thanks @mhd999, very helpful 👍

[funwhilelost]

Much appreciated @mhd999. We can make a lot of progress with that workaround.

[rhinodavid]

Hi guys. I tried exporting the non-Radium-wrapped component and testing that but I'm getting an error related to the media query:

    console.error node_modules/fbjs/lib/warning.js:36
      Warning: Unsupported style property @media (min-width: 40em). Did you mean @media (minWidth: 40em)? Check the render method of `CreatePostForm`.

The media query is why I'm using Radium in the first place, so if I'm not missing something then this doesn't seem ideal.

Thanks in advance for any help! -d

[jariz]

@mhd999's suggestion is a workaround, not a fix!
Enzyme shouldn't crash when using Radium in the first place!
Why close this issue @funwhilelost? It's still alive and present.

[funwhilelost]

@jariz fair enough. I suppose it's worth continuing to pursue it.

Because of the way Radium is built I think it'd take quite an overhaul to make it compatible with the newer class syntax. It's probably worth putting on the road map but I'd be hesitant to call it a defect.

[jariz]

Fair enough, but yes, the class syntax is basically default now in most react setups I've worked with, so this is something that's really desperately needed.
I just noticed this is an existing issue already (#576), so apologies for my little rant.