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

Я пытаюсь найти лучшую практику для тестирования 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 />, тогда, вероятно, я смогу просто пойти на querySelector, но что, если я не хочу добавлять здесь какой-либо атрибут HTML? Как правильно найти этот элемент?

Есть ли решение найти первый элемент, у которого нет атрибута, и проверить его внутренний текст?


reactjs jestjs react-testing-library queryselector
person han    schedule 04.03.2020    source источник
comment
У вас есть пробелы по обе стороны от вашего текста в <div>. Вы включали это в свои ожидания?   -  person Steve Holgado    schedule 05.03.2020

Ответы (1)


arrow_upward
2
arrow_downward

У меня работает с "@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
person slideshowp2    schedule 09.03.2020