reactjs – 如何测试呈现的React组件的HTML？

发布时间：2020-12-15 20:40:42 所属栏目：百科来源：网络整理

导读：My React component有一个suggestionRenderer属性,允许指定组件的呈现方式.例如： Autosuggest suggestions={getSuburbs} suggestionRenderer={renderLocation} / function renderLocation(suggestion,input) { return ( spanstrong{suggestion.slice(0,inpu

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属性？

您可以使用 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并在添加React.renderToStaticMarkup之前手动剥离数据反应器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!