Javascript 酶、react dom/测试工具或jsdom中是否存在影响clientHeight的已知缺陷？

我遇到了一个问题，clientHeight是未定义的，而不是DOM元素的实际高度。此代码在浏览器中按预期工作

组成部分

我不完全相信酶是造成这种情况的原因，因为它感觉像是与底层react-dom/测试工具和/或jsdom相关。我在上添加了一个注释，因为我希望在进一步调试时能得到一些帮助。

jsdom只提供了一个DOM，它不能直观地呈现您的内容。因此，元素没有宽度或高度

由于已使用firstChild.clientHeight设置maxHeight，因此该值最终未定义，因为定义clientHeight将需要视觉渲染

如果您需要在测试代码中验证高度或宽度，您可能希望尝试能够以视觉方式呈现内容的PhantomJS或无头Chrome-headless浏览器

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>
        );
    }
}

// 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