我正在尝试测试一个react组件的孩子，我想获得它的孩子的文本表示。
有没有类似node.textContentReact的工具？
我想要这样的东西：
let testComponent = (
<Test>
<p>abc</p>
<p>abc2</p>
</Test>
);
expect(testComponent.props.children.toString()).to.equal('abc abc2');
React：有没有类似于 node.textContent 的东西？
IT技术
javascript
unit-testing
reactjs
2021-05-19 16:37:30
4个回答
const getNodeText = node => {
if (['string', 'number'].includes(typeof node)) return node
if (node instanceof Array) return node.map(getNodeText).join('')
if (typeof node === 'object' && node) return getNodeText(node.props.children)
}
https://codesandbox.io/s/react-getnodetext-h21ss
// in the picture
{heading} // <Heading>Hello <span className="red">Code</span>Sandbox</Heading>
<pre ref={printInnerHTML}/>
<pre>{getNodeText(heading)}</pre>
您可以编写一个小函数来遍历 react 元素并获取文本。
import React from 'react';
import renderer from 'react-test-renderer';
const MyComponent = ()=>{
return <div>
<p>hello</p>
<div>
<p>to</p>
</div>
</div>
}
const getText=(tree)=>{
if(typeof tree === 'string'){
return tree;
}
return tree.children.map((child)=>{
return getText(child);
}).join('');
}
it('renders without crashing', () => {
const tree = renderer
.create(<MyComponent />)
.toJSON();
expect(getText(tree)).toBe("helloto");
});
这里的 MyComponent 是您需要从中获取文本的组件。
getText() 将以字符串的形式从组件中获取所有文本节点。
对于 es6 组件，您可以使用getDomNode()或findDomNode()，然后使用普通的 DOM 方法。
如果您正在寻找 React 方式 - 不应该有一个，因为父母对它的孩子完全视而不见。
您可以使用 AirBnB 的酶库来做到这一点
shallow(<Foo>bar</Foo>).text // bar
https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md#text--string