Question

我遇到的问题是clientHeight是undefined而不是DOM元素的实际高度。此代码在浏览器中按预期工作。

组件

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

但是，在安装组件并模拟道具更改时，子clientHeight的{{1}}报告div。

单元测试

undefined

我并不完全相信酶是导致这种情况的原因，因为它感觉它与潜在的// 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和/或react-dom/test-tools有关。我在enzyme discussion上添加了一条注释，因为我非常感谢您在进一步调试时提供了一些帮助。

Answer 1

jsdom仅提供DOM - 它不会直观地呈现您的内容。因此，元素没有宽度或高度。

由于您使用maxHeight设置了firstChild.clientHeight，因此最终的值为undefined，因为定义clientHeight需要直观呈现。

如果您需要在测试代码中验证高度或宽度，您可能需要试用能够直观呈现内容的PhantomJS或无头Chrome无头浏览器。

是否存在影响clientHeight的酶，反应/测试工具或jsdom的已知缺陷？

1 个答案: