Wrong DOM dimensions after call to mount #1434

pronebird · 2017-12-15T11:02:11Z

DOM dimensions are invalid after call to mount():

const test = mount(
  <div style={{ height: 100, overflow: 'hidden' }}></div>
);
expect(test.getDOMNode().clientHeight).to.be.equal(100); // reports 0 != 100

Running the same in browser works:

<html>
<body>
  <div style="height: 100px; overflow: hidden"></div>
  <script>alert(document.querySelector('div').clientHeight);</script>
</body>
</html>

Adding timeout after mount doesn't help either. It seems that enzyme is broken. I use electron-mocha to run tests in native environment.

The text was updated successfully, but these errors were encountered:

ljharb · 2017-12-15T17:33:41Z

It's not that enzyme is broken; getDOMNode() is returning you a DOM node. The issue is that the DOM node itself is reporting a height of zero, probably because it's not actually visible. clientHeight doesn't test the style, it tests the actual height.

This looks like a minimal test case - can you provide your actual code, so we can see what you're trying to test? Generally you shouldn't need the DOM node.

michaelpapworth · 2018-01-05T09:09:35Z

I'm having a similar issue myself where clientHeight returns undefined instead of the actual height of the DOMElement. This code works as expected in the browser.

Component

class MyWidget extends React.Component {
    constructor() {
        super();
        this.state = { contentHeight: 0 };
    }

    componentWillReceiveProps(nextProps) {
        this.setState(() => ({
            contentHeight: nextProps.open ? this.content.firstChild.clientHeight : 0
        }));
    }

    render() {
        const { controlId, open, trigger, children } = this.props;
        return (
            <div>
                <button tabIndex="0" aria-controls={controlId}>
                    { cloneElement(trigger, { open }) }
                </button>
                <div
                    id={controlId}
                    ref={(element) => {
                        this.content = element;
                    }}
                    aria-hidden={open}
                    style={{ maxHeight: this.state.contentHeight }}
                >
                    { cloneElement(children, { open }) }
                </div>
            </div>
        );
    }
}

However, when mounting the component and simulating a prop change, the clientHeight of the child div reports undefined.

Unit Test

// Arrange
const wrapper = mount(
    <MyWidget trigger={<span>click me</span>} open={false}>
        <div style={{ height: 90, padding: 5 }}>Lorum Ipsum</div>
    </MyWidget>
);

// Act
wrapper.setProps({ open: true });

// Assert
expect(wrapper.children('div').prop('style')).to.have.property('maxHeight', 100);

// Result
AssertionError: expected { maxHeight: undefined } to have a property 'maxHeight' of 100, but got undefined

I'm not entirely convinced that enzyme is the cause of this since it feels like its related to the underlying tooling or even JSDOM, but I suspect you've far more experience than I with react-dom/test-tools and may be able to target an issue in the appropriate direction. For additional context I was led here from facebook/react#11855

ljharb · 2018-01-05T09:14:00Z

@michaelpapworth I agree that it's likely related to jsdom. Have you tried running enzyme in an actual browser to confirm?

pronebird · 2018-01-05T19:22:13Z

Do you use JSDOM in enzyme? We had tons of problems with it before, so we switched to running the actual browser with electron-mocha.

My mocha test setup looks as following:

let container: ?HTMLElement;

function renderIntoDocument(instance) {
  if(!container) {
    container = document.createElement('div');
    if(!document.documentElement) {
      throw new Error('document.documentElement cannot be null.');
    }
    document.documentElement.appendChild(container);
  }
  return ReactDOM.render(instance, container);
}

// unmount container and clean up DOM
afterEach(() => {
  if(container) {
    ReactDOM.unmountComponentAtNode(container);
    container = null;
  }
});

it('should report the correct clientHeight', () => {
  const component = renderIntoDocument(
    <MyMegaComponent>
      <div style={{ height: 100 }}></div>
    </MyMegaComponent>
   );
   const domNode = ReactDOM.findDOMNode(component);
   expect(domNode).to.have.property('clientHeight', 100);
});

clientHeight is then returns the correct values in the actual test cases. Apparently can't use enzyme with any of this.

ljharb · 2018-01-05T21:40:38Z

Yes, we use jsdom with enzyme and it works fine. However, we don't test for things like clientHeight, because it's not the responsibility of component unit tests to ensure the browser, or React is working.

In other words, I'm suggesting that's not a good or useful test.

pronebird · 2018-01-07T12:46:17Z

In my case I test the visual component that sets the proper visual presentation.

The component itself uses clientHeight to find the height of the underlying DOM. Given that clientHeight is undefined the internal state is corrupted.

ljharb · 2018-01-07T19:42:23Z

enzyme isn’t an appropriate visual testing tool; I’d recommend something like happo for that (for visual diffs).

Separately, all you need to test there is that you rendered a div with a style height of 100; the clientHeight is guaranteed there because of how React and the DOM work - so all you’d need to do is assert on the style.

pronebird · 2018-07-08T07:10:25Z

@ljharb makes sense! Thank you! 🙏

ljharb closed this as completed Jul 7, 2018

azinit mentioned this issue Jul 4, 2020

Learn more: react tests azinit/learn-frontend#57

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrong DOM dimensions after call to mount #1434

Wrong DOM dimensions after call to mount #1434

pronebird commented Dec 15, 2017

ljharb commented Dec 15, 2017

michaelpapworth commented Jan 5, 2018 •

edited

ljharb commented Jan 5, 2018

pronebird commented Jan 5, 2018 •

edited

ljharb commented Jan 5, 2018 •

edited

pronebird commented Jan 7, 2018 •

edited

ljharb commented Jan 7, 2018

pronebird commented Jul 8, 2018

Wrong DOM dimensions after call to mount #1434

Wrong DOM dimensions after call to mount #1434

Comments

pronebird commented Dec 15, 2017

ljharb commented Dec 15, 2017

michaelpapworth commented Jan 5, 2018 • edited

ljharb commented Jan 5, 2018

pronebird commented Jan 5, 2018 • edited

ljharb commented Jan 5, 2018 • edited

pronebird commented Jan 7, 2018 • edited

ljharb commented Jan 7, 2018

pronebird commented Jul 8, 2018

michaelpapworth commented Jan 5, 2018 •

edited

pronebird commented Jan 5, 2018 •

edited

ljharb commented Jan 5, 2018 •

edited

pronebird commented Jan 7, 2018 •

edited