Enzyme: Getting a `TypeError` when rendering with mount()

[lezoudali]

I'm really not sure why I'm getting the following error when trying to use mount() to simulate a click event with a child component. Am i missing something?

  ● <Navigation /> › should open the drawer menu

    TypeError: 'Symbol(Symbol.toPrimitive)' returned for property 'Symbol(Symbol.toPrimitive)' of object '[object Object]' is not a function

      at Object.setValueForProperty (node_modules/react-dom/lib/DOMPropertyOperations.js:142:47)

      ...

      at mount (node_modules/enzyme/build/mount.js:19:10)
      at Object.<anonymous> (src/components/navigation/__tests__/navigation.test.js:8:39)
      at process._tickCallback (internal/process/next_tick.js:103:7)

This is my test code

import React from 'react';
import { shallow, mount } from 'enzyme';
import Navigation from '..';

describe('<Navigation />', () => {
  it('should open the drawer menu', () => {
    const component = mount(<Navigation />);

    expect(component.find('.drawer.is-visible')).toHaveLength(0);
    component.find('.nav-menu-btn').simulate('click');
    expect(component.find('.drawer.is-visible')).toHaveLength(1);
  });
})

This is the code I'm testing:

import React from 'react';
import NavBar from './navbar';
import Drawer from './drawer';

class Navigation extends React.Component {
  constructor() {
    super();

    this.state = {
      isDrawerVisible: false,
    };

    this.toggleIsDrawerVisible = this.toggleIsDrawerVisible.bind(this);
  }

  toggleIsDrawerVisible() {
    this.setState({
      isDrawerVisible: !this.state.isDrawerVisible,
    });
  }

  render() {
    return (
      <div>
        <NavBar onMenuClick={this.toggleIsDrawerVisible} />
        <Drawer isVisible={this.state.isDrawerVisible} />
      </div>
    );
  }
}

export default Navigation;

Thank you, this is my first time using enzyme.

[lezoudali]

using enzyme 2.8.2, jest 19.0.2, and react 15.5.4

[ljharb]

What node or browser version are you running this in? Are you polyfilling Symbol somehow (like with core-js/babel-polyfill)?

[lezoudali]

@ljharb so the issue somehow got fixed by itself the next after updating my dependencies, sorry to bother. I'm all good 😄

[aleksandarcrvc]

@lezoudali could you please tell me exactly how did you solve this because I am facing same issue. Did you move some of npm modules from devDependencies to dependencies?

[denieler]

@aleksandarcrvc it seems it connected to

"babel": {
    "presets": []
}

configuration. Try to use stage-0.

[PainKKKiller]

I have babelrc with configuration to use stage-0, and I still have this error with jest

[denieler]

@PainKKKiller you can try babel-preset-env and if it will fix your problems downgrade to one of stage-x that will work for you.

[patoncrispy]

Does anyone know what causes this issue?

[grylance]

I solved this issue by mocking my .less imports: jest.mock('./Styles.less', () => ({}))