Javascript 如何测试React.js组件外观？

我需要一个接一个地测试我的组件的样式

我已经研究了适用于此的，因为我可以描述outlook，我想将React组件呈现给真实的DOM布局，然后将其提供给测试框架，但据我所知，它不能测试给定的DOM布局，只能通过URL

---

也许您在测试React.js应用程序的GUI方面有一些经验？

Facebook正在使用并推荐测试框架和。到目前为止，这对我来说相当有效

它允许您以与其他JavaScript模块类似的方式为React组件编写单元测试

从他们的笑话介绍：

import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import CheckboxWithLabel from '../CheckboxWithLabel';

describe('CheckboxWithLabel', () => {

  it('changes the text after click', () => {
    // Render a checkbox with label in the document
    const checkbox = TestUtils.renderIntoDocument(
      <CheckboxWithLabel labelOn="On" labelOff="Off" />
    );

    const checkboxNode = ReactDOM.findDOMNode(checkbox);

    // Verify that it's Off by default
    expect(checkboxNode.textContent).toEqual('Off');

    // Simulate a click and verify that it is now On
    TestUtils.Simulate.change(
      TestUtils.findRenderedDOMComponentWithTag(checkbox, 'input')
    );
    expect(checkboxNode.textContent).toEqual('On');
  });

});

从“React”导入React；
从“react dom”导入react dom；
从“react addons test utils”导入TestUtils；
从“../CheckboxWithLabel”导入CheckboxWithLabel；
描述（'CheckboxWithLabel'，（）=>{
它（'单击后更改文本'，（）=>{
//在文档中呈现带有标签的复选框
const checkbox=TestUtils.renderIntoDocument(
);
const checkboxNode=ReactDOM.findDOMNode（复选框）；
//确认它在默认情况下处于关闭状态
expect（checkboxNode.textContent）.toEqual（'Off'）；
//模拟单击并验证它现在处于启用状态
TestUtils.Simulate.change(
TestUtils.findRenderedomComponentWithTag（复选框“输入”）
);
expect（checkboxNode.textContent）.toEqual（'On'）；
});
});

目前不可能进行基于组件的测试，因为目前尚未实现与其他JavaScript框架的集成。但是您可以使用Galen进行集成/E2E测试

谢谢您的重播，也许我在问题中没有表达清楚，但我问了有关测试outlook的问题。我的意思是，我需要测试组件中的元素是否相互重叠，或者文本是否正确包装，是否在某个元素下。我必须测试风格，但不能测试行为