反应-测试-库-屏幕与呈现查询

使用react-testing-library查询有两种方式。

您可以使用render方法返回的查询：

import React from 'react'
import { render } from '@testing-library/react'

...

const { getByText } = render(<div>Foo</div>)

expect(getByText('Foo')).toBeInTheDocument()

或者您可以使用screen对象：

import React from 'react'
import { render, screen } from '@testing-library/react'

...

render(<div>Foo</div>)

expect(screen.getByText('Foo')).toBeInTheDocument()

但文档中没有说明哪个选项是最佳选项及其原因。

有人能开导我吗？

解决方案

react-testing-library作者肯特·C·多兹本人推荐的最新选项是使用screen。

使用Screen的好处是，在添加/删除所需的查询时，您不再需要保持最新的呈现调用deStructure。您只需输入Screen。让你的编辑的魔力自动完成来处理剩下的事情。

唯一的例外是如果您正在设置容器或base Element，您可能应该避免这样做(老实说，我想不出这些选项的合法用例了，此时它们的存在只是出于历史原因)。

来源：https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen