Question about enzyme/mocha tests
jstoebel opened this issue · comments
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.
There are more issues with this :
- 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. - 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.
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?
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?
@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