4

我正在尝试使用反应测试库在此处找到测试 div 元素的 textContent 的最佳实践。

假设我想测试这个简单的反应组件，看看是否{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 属性怎么办？如何正确定位此元素？

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

4

1 回答 1

2

它适用于我使用"@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
于 2020-03-09T04:21:27.273 回答