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

Question

我需要逐个分开地测试我的组件的样式。

我已经查看了适合的，因为我可以描述outlook并且我想将React组件呈现给真正的DOM布局，然后将其提供给测试框架，但是我知道它不能测试给定的DOM布局，只能通过URL来测试。

也许你有一些测试React.js应用程序GUI的经验？

Answer 1

Facebook正在使用并推荐 Jest测试框架以及React's TestUtils 。到目前为止，这对我来说效果相当不错。

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

来自他们的Jest介绍：

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

});

Answer 2

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