javascript - react-testing-library - 屏幕与渲染查询

Question

使用 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()

但是文档中没有说明哪一个是最好的选择以及为什么。

有人可以启发我吗？

Answer 1

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

The benefit of using screen is you no longer need to keep the render call destructure up-to-date as you add/remove the queries you need. You only need to type screen. and let your editor's magic autocomplete take care of the rest.

The only exception to this is if you're setting the container or baseElement which you probably should avoid doing (I honestly can't think of a legitimate use case for those options anymore and they only exist for historical reasons at this point).

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