reactjs - 如何测试 div 元素的内部文本

Question

我正在尝试使用 react 测试库找到在这里测试 div 元素的 textContent 的最佳实践。

假设我想测试这个简单的 React 组件以查看 {props.text}在 HTML DOM 上正确呈现。

const Simple = props => (
  <>
    <div> {props.text} </div>
    <div> test text </div>
  </>
);

我试过使用 getByText ，然后测试 expect(getByText('text passed as prop')).toBeDefined()但它似乎没有正常工作。

如果我为第一个 <div /> 添加 className 或 id 肯定会容易得多那么我可能就可以去找 querySelector ，但是如果我不想在这里添加任何 HTML 属性怎么办？如何正确定位此元素？

有没有办法找到第一个没有属性的元素并测试它的内部文本？

Answer 1

它适用于我使用 "@testing-library/react": "^9.4.0" .例如。
index.tsx :

import React from 'react';

const Simple = (props) => (
  <>
    <div> {props.text} </div>
    <div> test text </div>
  </>
);

export { Simple };

index.test.tsx :

import React from 'react';
import { Simple } from './';
import { render } from '@testing-library/react';

describe('60534908', () => {
  it('should find div element', () => {
    const mProps = { text: 'text passed as prop' };
    const { getByText } = render(<Simple {...mProps} />);
    expect(getByText('text passed as prop')).toBeDefined();
    expect(getByText('test text')).toBeDefined();
  });
});

100% 覆盖率的单元测试结果:

 PASS  stackoverflow/60534908/index.test.tsx (8.606s)
  60534908
    ✓ should find div element (37ms)

-----------|---------|----------|---------|---------|-------------------
File       | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
-----------|---------|----------|---------|---------|-------------------
All files  |     100 |      100 |     100 |     100 |                   
 index.tsx |     100 |      100 |     100 |     100 |                   
-----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.784s, estimated 11s