Question about enzyme/mocha tests

[jstoebel]

I'm a little confused on how to write enzyme tests for a component that uses react-dimensions

The component looks like this:

const Show = React.createClass({

  // shortened for brevity.

  render () {
    var width = 0.4 * this.props.containerWidth,
      height = width,
      radius = 0.5 * width
    return (
      <div>
        <h1>{this.state.poll.name}</h1>
        <div className="container-fluid">
          // lots more stuff removed for brevity
        </div>
      </div>
    )
  }
})

export default Dimensions()(Show)

I'm trying to test it like this:

it("contains an h1 as first child", (done) => {
  const wrapper = mount(<Show />);
  expect(wrapper.find('h1')).to.have.length(1);
  done()
});

The above test fails with AssertionError: expected { Object (component, root, ...) } to have a length of 1 but got 0

I looked at the value of wrapper.html() and get <div style="width: 100%; height: 100%; padding: 0px; border: 0px;">0</div>. I believe this touches on #28, but as things work just fine in my browser I'm confused as to why it does not behave as I would expect in my tests. Any ideas? Is there any other code I can provide that would shed light on this situation? Thanks.

[tibbus]

There are more issues with this :

1. You are trying to render mount(<Show />) without any parent wrapper, this lib is trying to read the parent dimensions and if it doesn't find it or if the height and width is 0 then will not render the Component.
2. Even if you add a wrapper around that <Show /> it will not work because if you pass the inline style (ex : width: 500px ) the lib will not read it right as it's inline style.

[jimulle]

What do we need to set on the parent wrapper in enzyme tests to get dimensions to pick-up a height and width value. Is there a way we can mock this out for testing purposes?

[lferreira457]

Having similar issues as well with testing a library component that tries to measure wrapping parent dimensions, would be interested in knowing if this could be mocked?

[malykhinvi]

@jstoebel Don't know if it is still relevant, but you could mock it like this:

const config = process.env.NODE_ENV === 'test' ? {getWidth: () => 1920, getHeight: () => 1080} : {}
export default Dimensions(config)(Show);

Though it is not a best option, since source code is getting polluted with tests-related stuff.
cc @tibbus