Как проверить HTML визуализированного компонента React?

Question

Мой компонент React имеет 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 добавляется

Answer 2

Я обычно не использую модульный тест HTML (я считаю, что если модульные тесты React проходят успешно, то сгенерированный HTML-код хорош, и я в любом случае собираюсь провести интеграционный тест с селеном для проверки 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();
});