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

Question

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

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

const Greeting = ({name}) => {
  return <div>Welcome {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()和.toBeVisible()之间的区别。

\n

简而言之：元素可以存在于文档中但对用户不可见。

\n

例如

\n

import { render, screen } from \'@testing-library/react\';\nimport React from \'react\';\nimport \'@testing-library/jest-dom/extend-expect\';\n\nfunction Test() {\n  return <div style={{ display: \'none\' }}>test</div>;\n}\n\ndescribe(\'toBeVisible-VS-toBeInDocument\', () => {\n  test(\'should pass\', () => {\n    render(<Test />);\n    expect(screen.getByText(/test/)).not.toBeVisible();\n    expect(screen.getByText(/test/)).toBeInTheDocument();\n  });\n});\n

\n

测试结果：

\n

import { render, screen } from \'@testing-library/react\';\nimport React from \'react\';\nimport \'@testing-library/jest-dom/extend-expect\';\n\nfunction Test() {\n  return <div style={{ display: \'none\' }}>test</div>;\n}\n\ndescribe(\'toBeVisible-VS-toBeInDocument\', () => {\n  test(\'should pass\', () => {\n    render(<Test />);\n    expect(screen.getByText(/test/)).not.toBeVisible();\n    expect(screen.getByText(/test/)).toBeInTheDocument();\n  });\n});\n

\n

获取*或查询*？

\n

\n

暴露查询的 query* 变体的唯一原因是让您拥有一个可以调用的函数，如果没有找到与查询匹配的元素，该函数不会抛出错误（如果没有找到元素，则返回 null）。其有用的唯一原因是验证元素是否未呈现到页面。这之所以如此重要，是因为如果没有找到元素， get* 和 find* 变体将抛出一个非常有用的错误\xe2\x80\x93，它会打印出整个文档，以便您可以看到呈现的内容以及为什么您的查询未能找到您要查找的内容。而 query* 只会返回 null，而 toBeInTheDocument 能做的最好的事情就是说：“null 不在文档中”，这并不是很有帮助。

\n

\n

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

\n

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

\n

来自使用 get* 变体作为断言帖子。

\n

\n

建议：如果你想断言某事物存在，请明确该断言。

\n

\n

除了文章中的观点之外，我认为它会更具可读性。

\n

所以：

\n

// You can do this\nscreen.getByText(`Welcome John Doe!`);\n\n// better, much more readable\nexpect(screen.getByText(`Welcome John Doe!`)).toBeInTheDocument();\n

\n