Javascript 如何在ReactJS/Enzyme/PhantomJS单元测试中检查元素的渲染宽度

如何在react JS单元测试中检查渲染元素的宽度？我用的是酶和幻影。以下是我基本上想要做的：

import React from 'react';
import { mount } from 'enzyme';
import EditableLabel from '../../../src/Common/EditableLabel/EditableLabel.jsx';

describe.only('./Controls/src/Common/EditableLabel/EditableLabel.jsx', () => {

    it('should resize the text box to at least the size of the label', () => {
        let wrapper = mount(<EditableLabel text={'SomeValue'} editing={true} />);
        let spanElements = wrapper.find('span.not-editing');
        let inputElements = wrapper.find('input[type="text"].editing');

        expect(inputElements.at(0).width()).to.be.at.least(spanElements.at(0).width());        
    });

从“React”导入React；
从“酶”导入{mount}；
从“../../src/Common/EditableLabel/EditableLabel.jsx”导入EditableLabel；
仅说明（'./Controls/src/Common/EditableLabel/EditableLabel.jsx'，（）=>{
它（'应将文本框的大小至少调整为标签的大小'，（）=>{
让wrapper=mount（）；
让spanElements=wrapper.find（'span.notediting'）；
让inputElements=wrapper.find（'input[type=“text”].editing'）；
expect（inputElements.at（0.width（））.to.be.至少（spanElements.at（0.width（））；
});

}))

---

显然，这将导致错误。我希望在我当前的设置中可以实现类似的功能。

您找到问题的答案了吗？您不应该自动进行UI测试，Ezyme根本不是为此而构建的工具。@Faissaloo为什么不？@TDK因为它会无缘无故地使您的测试变得不必要的脆弱。您应该测试正确的行为，而不是页面布局。如果您在需要重新设计内容的任何时候测试页面布局，即使页面仍然执行相同的操作，您的测试也会中断。@0x777C感谢您的澄清。在为前端编写单元测试时，我总是搞不清楚应该包含什么，不应该包含什么。如果我不应该测试页面布局，那么快照测试的目的是什么？我们是否应该为布局编写测试以避免意外更改？