React-testing-library - 屏幕与渲染查询

有两种使用查询的方法react-testing-library https://testing-library.com/docs/react-testing-library/intro.

您可以使用返回的查询render https://testing-library.com/docs/react-testing-library/api#render method:

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

...

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

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

或者您可以使用screen https://testing-library.com/docs/dom-testing-library/api-queries#screen object:

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

...

render(<div>Foo</div>)

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

但文档中没有说明哪一个是最佳使用选项以及原因。

有人可以启发我吗？

最新推荐的选项react-testing-library author 肯特·C·多兹自己就是用screen.

使用的好处screen你是否不再需要保留render当您添加/删除所需的查询时，调用最新的解构。您只需输入screen.让你的编辑器神奇的自动完成功能来处理剩下的事情。

唯一的例外是如果您设置container or baseElement您可能应该避免这样做（老实说，我无法再想到这些选项的合法用例，并且它们目前仅出于历史原因而存在）。

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