2

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

我已经研究了适合它的Galen 框架，因为我可以描述前景，并且我想将 React 组件渲染为真实的 DOM 布局，然后将其提供给测试框架，但据我所知，它无法测试给定DOM 布局，仅通过 URL。

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

4

2 回答 2

1

Facebook 正在使用和推荐Jest测试框架以及React 的 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');
  });

});
于 2016-06-24T17:11:03.053 回答
1

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

于 2016-06-26T08:25:50.320 回答