React：有类似于node.textContent的东西吗？

Question

我正在尝试测试一个反应组件的孩子，我想得到它的孩子的文本表示。

是否有一个工具可以为React做类似于node.textContent的工作？

我想有这样的事情：

let testComponent = (
  <Test>
    <p>abc</p>
    <p>abc2</p>
  </Test>
);

expect(testComponent.props.children.toString()).to.equal('abc abc2');

Answer 1

您可以将getDomNode()或findDomNode()用于es6组件，然后使用普通的DOM方法。

如果你正在寻找React方式 - 不应该有一个，因为父母对其孩子非常盲目。

Answer 2

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>

Answer 3

您可以编写一个遍历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（）将以字符串的形式从组件中获取所有文本节点。

Answer 4

您可以使用AirBnB的酶库

Sub CopyAdjDataUnderMyTable()

    Range("B1").Select
    ActiveCell.Offset(0, 3).Select
    Range(Selection, Selection.Offset(0, 2)).Select

    'MsgBox (Range(Selection, Selection.End(xlDown)).Cells.SpecialCells(xlCellTypeConstants).Count)

        If Range(Selection, Selection.End(xlDown)).Cells.SpecialCells(xlCellTypeConstants).Count = 3 Then
        Range(Selection, Selection.Offset(1, 0)).Select
        Else
        Range(Selection, Selection.End(xlDown)).Select
        End If

    Selection.Cut
    Range("B1").Select

      'MsgBox (Range(Selection, Selection.End(xlDown)).Cells.SpecialCells(xlCellTypeConstants).Count)

        If Range(Selection, Selection.End(xlDown)).Cells.SpecialCells(xlCellTypeConstants).Count = 1 Then
        Selection.Offset(0, 0).Select
        Else
        Selection.End(xlDown).Select
        End If


    ActiveCell.Offset(1, 0).Select
    ActiveSheet.Paste
    Range("B1").Select

   ActiveCell.Offset(0, 3).Select
   Range(Selection, Selection.Offset(0, 2)).Select
   Range(Selection, Selection.End(xlDown)).Select
   Selection.Delete Shift:=xlToLeft

   Range("B1").Select


End Sub

https://github.com/airbnb/enzyme/blob/master/docs/api/shallow.md#text--string

Answer 5

绝对应该尝试Jest（我通常将其与React Testing Library一起使用）。基本上，您可以使用a snapshot of your component，因此，不仅可以测试组件中包含的文本，还可以测试布局，元素的参数等。检测不需要的更改非常方便。它还具有code coverage的强大功能：

import React from 'react';
import { cleanup, render } from "@testing-library/react";
import { MyComponent } from "./MyComponent";

describe("MyComponent", (): void => {
  afterEach(cleanup);
  it("renders properly", (): void => {
    const { container } = render(
      <MyComponent prop1="myprop1" prop2="myprop2" />
    );
    expect(container).toMatchSnapshot();
  });
});