在 react-testing-library 中测试 div 或 p 标签中文本的最佳方法

Question

测试 div 中的文本或 react-testing-library 中的 p 标签的最佳方法是什么？

让我们假设我们有这样一个 React 组件：

const Greeting = ({name}) => {
  return <div>Hello {name}!</div>
}

测试组件呈现预期值的最佳方法是什么，它会使用 toBeInTheDocument() :

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  expect(screen.getByText(`Welcome John Doe!`)).toBeInTheDocument()
})

或使用 toBeVisible()

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  expect(screen.getByText(`Welcome John Doe!`)).toBeVisible()
})

或都不是:

import {render, screen} from '@testing-library/react'
import Greeting from './greeting'

test('it renders the given name in the greeting', () => {
  render(<Greeting name="John Doe"/>)
  screen.getByText(`Welcome John Doe!`)
})

最后一个对我来说更有意义，因为如果 'Welcome John Doe!' 不在页面上，它将立即失败，而如果它在页面上，前两个命题将等同于：expect(true).toBe(true)

我是不是遗漏了什么？

Answer 1

.toBeInTheDocument() and .toBeVisible()之间的区别在文档中解释得很清楚。

简而言之：元素可以出现在文档中但用户不可见。

例如

import { render, screen } from '@testing-library/react';
import React from 'react';
import '@testing-library/jest-dom/extend-expect';

function Test() {
  return <div style={{ display: 'none' }}>test</div>;
}

describe('toBeVisible-VS-toBeInDocument', () => {
  test('should pass', () => {
    render(<Test />);
    expect(screen.getByText(/test/)).not.toBeVisible();
    expect(screen.getByText(/test/)).toBeInTheDocument();
  });
});

测试结果：

 PASS  examples/toBeVisible-VS-toBeInDocument/index.test.tsx (8.595 s)
  toBeVisible-VS-toBeInDocument
    ✓ should pass (49 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        9.099 s, estimated 10 s

get* or query*?

The only reason the query* variant of the queries is exposed is for you to have a function you can call which does not throw an error if no element is found to match the query (it returns null if no element is found). The only reason this is useful is to verify that an element is not rendered to the page. The reason this is so important is because the get* and find* variants will throw an extremely helpful error if no element is found–it prints out the whole document so you can see what's rendered and maybe why your query failed to find what you were looking for. Whereas query* will only return null and the best toBeInTheDocument can do is say: "null isn't in the document" which is not very helpful.

简而言之：仅使用 query* 变体来断言找不到元素。

get* 查询是检查文档中是否存在元素的最佳方式。

来自Using get* variants as assertionspost.

Advice: If you want to assert that something exists, make that assertion explicit.

抛开文章中的观点，我认为它会更具可读性。

所以：

// You can do this
screen.getByText(`Welcome John Doe!`);

// better, much more readable
expect(screen.getByText(`Welcome John Doe!`)).toBeInTheDocument();

在 react-testing-library 中测试 div 或 p 标签中文本的最佳方法

Best way to test a text in a div or p tag in react-testing-library

javascript

testing

reactjs

react-testing-library