react-testing-library - 屏幕与渲染查询
有两种使用查询的方法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()
但是文档中没有说明哪一个是最好的选择以及为什么。
有人可以启发我吗？
RISEBY浏览 153回答 3
3回答
-
森栏
react-testing-library作者Kent C. Dodds本人最新推荐的选项是使用screen.使用屏幕的好处是您不再需要在添加/删除所需查询时保持渲染调用解构是最新的。您只需要输入屏幕。让您的编辑器神奇的自动完成功能来处理其余的事情。唯一的例外是，如果您正在设置可能应该避免这样做的容器或 baseElement（老实说，我再也想不出这些选项的合法用例了，它们目前仅出于历史原因而存在）。来源：https ://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-screen -
慕姐8265434
screen由 提供@testing-library/dom，这@testing-library/react是建立在它之上的。使用这些screen方法时，它们将在 html<body>元素中进行查询，如文档中所述：因为查询整个 document.body 很常见，DOM 测试库还导出了一个 screen 对象，其中包含预先绑定到 document.body 的每个查询render()仅在@testing-library/react. 它返回一个类似于的对象screen，默认情况下也将查询绑定到<body>. 默认情况下，几乎没有区别，但您可以通过传入 options来自定义其行为。例如，您可以指定要在其中查询之外的元素<body>，甚至可以提供自定义查询方法。为了回答您关于哪个是最好的问题，我会说 usingrender()更好，因为options它更灵活，但要引用文档：您不需要经常指定选项不过，我更喜欢使用 提供的方法render()，因为如果您决定添加选项，则无需记住更改所有查询。 -
守着一只汪
只需添加到测试文件的第一行，以允许访问虚拟 DOM 元素，/** * @jest-environment jsdom */
随时随地看视频慕课网APP
相关分类
JavaScript