react-testing-library - Screen vs Render queries(反应-测试-库-屏幕与呈现查询)
本文介绍了反应-测试-库-屏幕与呈现查询的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
使用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
这篇关于反应-测试-库-屏幕与呈现查询的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
沃梦达教程
本文标题为:反应-测试-库-屏幕与呈现查询


基础教程推荐
猜你喜欢
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01