Not rendering the root element of the component

[kentcdodds]

Hi there! Just discovered this and I'm excited to use it! I bumped into a problem.

Given this component:

import React, {PropTypes, Component} from 'react'

class Toggle extends Component {
  constructor(props) {
    super(props)
    this.state = {
      toggledOn: props.initialToggledOn || false,
    }
  }

  handleToggleClick = () => {
    const toggledOn = !this.state.toggledOn
    this.props.onToggle(toggledOn)
    this.setState({toggledOn})
  };

  render() {
    const {children} = this.props
    const {toggledOn} = this.state

    const onOff = toggledOn ? 'on' : 'off'
    const toggledClassName = `toggle--${onOff}`
    return (
      <div className={`toggle ${toggledClassName}`}>
        <button onClick={this.handleToggleClick}>
          {children}
        </button>
      </div>
    )
  }
}

Toggle.propTypes = {
  initialToggledOn: PropTypes.bool,
  onToggle: PropTypes.func.isRequired,
  children: PropTypes.any.isRequired,
}

export default Toggle

And these tests:

import React from 'react'
import {mount} from 'enzyme'
import {mountToJson} from 'enzyme-to-json'
import Toggle from './Toggle'

test('invokes the onToggle prop when clicked', () => {
  const onToggle = jest.fn()
  const wrapper = mountToggle({onToggle})
  clickButton(wrapper)
  expect(onToggle).toHaveBeenCalledTimes(1)
  expect(onToggle).toBeCalledWith(true)
})

test('changes the class to toggle--on when clicked', () => {
  const wrapper = mountToggle()
  clickButton(wrapper)
  expect(mountToJson(wrapper)).toMatchSnapshot()
})

/**
 * Uses enzyme to mount the Toggle component
 * @param {Object} props - the props to mount the component with
 * @return {Object} - the enzyme wrapper
 */
function mountToggle(props = {}) {
  return mount(
    <Toggle onToggle={() => {}} {...props}>Toggle Me</Toggle>
  )
}

/**
 * finds the button in the given wrapper and simulates a click event
 * @param {Object} wrapper - the enzyme wrapper
 */
function clickButton(wrapper) {
  wrapper.find('button').first().simulate('click')
}

I'm getting this snapshot:

exports[`test changes the class to toggle--on when clicked 1`] = `
<Toggle
  onToggle={[Function onToggle]}>
  <button
    onClick={[Function anonymous]} />
</Toggle>
`;

Before, I was just using expect(wrapper.html()).toMatchSnapshot() and got this snapshot:

exports[`test changes the class to toggle--on when clicked 1`] = `"<div class=\"toggle toggle--on\"><button>Toggle Me</button></div>"`;

The major issue here is that with the snapshot generated from mountToJson doesn't tell me the root node's a div and that it has a className.

Any ideas? Thanks again for this module.

[adriantoine]

Hi!

Thanks for reporting the issue! That's interesting, I'll have a look ASAP!

[adriantoine]

Yeah, that's the same in my tests:

<div className={this.props.className} onClick={function handleOnClick() {}}>
    <div id="group-id" className="group">
        <span>{this.props.children}</span>
        <span className="empty"></span>
    </div>
</div>

gives:

exports[`test converts basic pure mount 1`] = `
<BasicPure
  className="pure">
  <div
    className="group"
    id="group-id">
    <span>
      <strong />
    </span>
    <span
      className="empty" />
  </div>
</BasicPure>
`;

I should have been more careful 🤔

I'm working on a fix

[adriantoine]

I just fixed the issue, now components have their root element.

It will be part of v1.1.0 that I'm deploying now, thanks for raising the issue and sorry for the inconvenience!

EDIT: v1.1.0 has just been published 🎉

[kentcdodds]

Thank you!

[christianvogt]

I'm now getting the following error:

TypeError: Cannot read property 'type' of undefined
at shallowToJson (node_modules/enzyme-to-json/build/index.js:57:22)

This happens when my component has a nested component and I use shallowToJson.

[adriantoine]

@ZenFe, I'll have a look, can you open a new issue?