Как я могу проверить внутренний текст элемента div

Question

Я пытаюсь найти лучшую практику для проверки textContent для элемента div здесь, используя библиотеку тестирования реагирования.

Скажем, я хотел бы протестировать этот простой компонент реагирования, чтобы увидеть, является ли {props.text} правильно отображается на HTML DOM.

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

Я пытался использовать getByText, затем протестировал expect(getByText('text passed as prop')).toBeDefined(), но, похоже, он не работал должным образом.

Должно быть намного проще, если я добавлю className или id для первого <div />, тогда, вероятно, я могу просто go для 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