Question

My React component具有suggestionRenderer属性，允许指定组件的呈现方式。例如：

<Autosuggest suggestions={getSuburbs}
             suggestionRenderer={renderLocation} />

function renderLocation(suggestion, input) {
  return (
    <span><strong>{suggestion.slice(0, input.length)}</strong>{suggestion.slice(input.length)}</span>
  );
}

现在，我想写一个开玩笑测试，以确保suggestionRenderer完成它的工作。检查myElement.getDOMNode().innerHTML显示：

<span data-reactid=".9.1.$suggestion0.0"><strong data-reactid=".9.1.$suggestion0.0.0">M</strong><span data-reactid=".9.1.$suggestion0.0.1">ill Park</span></span>

这不是特别有用。

有没有办法获得干净的HTML，没有React属性？

Answer 1

您可以使用React.renderToStaticMarkup。

expect(React.renderToStaticMarkup(
  <Autosuggest ... suggestionRenderer{renderLocation}/>
))
.to.be('<div>...')

或者只是抓住innerHTML并手动剥离它，但我不知道跨浏览器有多可靠：

var reactAttrs = / data-react[-\w]+="[^"]+"/g

myElement.getDOMNode().innerHTML.replace(reactAttrs, '')

我过去常常使用React.renderComponentToString并在添加data-react-之前手动删除React.renderToStaticMarkup个attrs。

Answer 2

我通常不会对HTML进行单元测试（我想如果React的单元测试正在通过，那么生成的HTML就是好的，我打算用selenium进行集成测试来测试HTML）但是我测试组件是否正在生成正确的虚拟DOM。

我有一个类似的组件，我测试自动完成项目的方式如下所示。

var testAutoCompleteItems = [{
  display: 'test 1',
  value: 1
}, {
  display: 'test 2',
  value: 2
}, {
  display: 'test 3',
  value: 3
}];

//...

it('should set items based on pass getData property', function(done) {
  Fiber(function() {
    testGlobals.component = React.render(<ExtendText onChange={testHelper.noop} getData={getData} />, div);
    var input = TestUtils.findRenderedDOMComponentWithClass(testGlobals.component, 'extend-text__display-input');

    TestUtils.Simulate.focus(input);

    testHelper.sleep(5);

    var autoCompleteContainer = TestUtils.findRenderedDOMComponentWithClass(testGlobals.component, 'extend-text__auto-complete-container');
    var autoCompleteItems = TestUtils.scryRenderedDOMComponentsWithTag(autoCompleteContainer, 'li');

    //make sure elements are correct
    autoCompleteItems.forEach(function(item, key) {
      expect(item.props['data-key']).to.equal(key);
      expect(item.props.children).to.equal(testAutoCompleteItems[key].display);
    });

    //make sure there is the correct number of elements
    expect(autoCompleteItems.length).to.equal(3);
    done();
  }).run();
});

如何测试渲染的React组件的HTML？

2 个答案: