为什么React需要jsdom来测试?

2024-04-10

在为 React 组件编写测试时,您必须将它们渲染到 DOM 中,以便断言它们的正确性。例如,如果您想测试某个类是否已添加到给定状态的节点,则必须渲染到 DOM 节点,然后通过普通 DOM API 检查该 DOM 节点。

问题是,考虑到 React 维护一个用于渲染的虚拟 DOM,为什么我们不能在渲染组件后就在虚拟 DOM 上断言呢?在我看来,这似乎是拥有虚拟 DOM 之类的东西的一个很好的理由。

我错过了什么吗?


你并没有真正错过任何事情。我们正在努力改进这一点。虚拟部分一直是 React 的实现细节,没有以任何有用或可靠的方式公开用于测试。我们的测试助手中有一些方法可以封装内部查找,有时可以避免查看实际的 DOM,但我们需要更多。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

为什么React需要jsdom来测试? 的相关文章

  • 如何处理 d3 中 Beeswarm 图中的碰撞?

    我一直在玩这个例子here https gf neocities org co2bs co2bee html一会儿 我想做的是突出显示图中的单个节点 圆圈 通过使用边框使其变大 稍后我也想在其中添加文本或字母 目前 我已经圈了Bhutan图
  • 通过搜索查找下一个文本并突出显示不起作用

    当在搜索框中搜索任何文本时 它可以找到并突出显示正确的文本 但是当搜索下一个 新文本时 它无法找到下一个 新文本 再次搜索时它不起作用 我无法找到问题 这JS below JS button search click function va
  • Google 文档 - 以编程方式将鼠标点击发送到大纲窗格中的项目

    在 Google 文档中 您可以打开大纲窗格并查看文档中的所有标题 您也可以单击标题 视图将滚动到标题 我的问题是如何使用 Chrome 扩展中的 JS 以编程方式模拟鼠标单击 以将视图滚动到所需的标题 我尝试了以下代码 但没有任何反应 u
  • Azure无法访问React Web应用程序中的env变量

    几年前我看到有一个类似的问题 但超链接答案已被微软关闭 我有一个使用 create react app 创建的 React 应用程序 它已经部署到heroku并加载一些环境变量来访问谷歌地图等 这一切对于heroku来说都工作得很好 我已经
  • 如何在 jQuery 中使用 CSS“background-image”属性添加的图像上绑定单击事件

    这是我的小提琴link http jsbin com otisur 1 edit 我想我的问题通过标题本身就很清楚了 尽管如此 我正在寻找一种绑定的方法click使用 css 添加的图像上的事件background image财产 我知道
  • Angular - Safari 无法正确显示 DOM

    我是 Angular 的新手 使用 Angular 4 我尝试通过在关联的组件类文件中设置属性来更新特定元素 但是 除非我尝试强制重新绘制网页 通过调整窗口大小等 否则页面不会更新 我打开检查器 看到 DOM 已更改 但显示与元素检查器中的
  • Sequelize 4.3.2 n:m(多对多)关联:未处理的拒绝 SequelizeEagerLoadingError

    我有 3 个模型 用户 项目 UserProject module exports function sequelize DataTypes var User sequelize define User title DataTypes ST
  • JavaScript 逻辑赋值是如何工作的?

    在 javascript 中 如果我们有一些代码 例如 var a one var b q a alert b 逻辑 OR 运算符会将 a 的值分配给 b 并且警报将为 一 这仅限于作业还是我们可以在任何地方使用它 似乎空字符串被视为与未定
  • JQuery 可排序嵌套可排序 div

    这个问题与这个有关Nest jQuery UI 可排序 https stackoverflow com questions 19129476 nest jquery ui sortables 但我无法解决我的问题 问题是 我有一个包含项目的
  • 如何在WebBrowser控件中注入Javascript?

    我试过这个 string newScript textBox1 Text HtmlElement head browserCtrl Document GetElementsByTagName head 0 HtmlElement scrip
  • 在调试模式下运行 NPX 命令

    我有一些npx create react app命令卡住了 终端上没有显示任何错误 所以 我需要运行npx in 调试模式 有没有办法获得debug登录npx命令来识别问题 edit 我运行的命令 npx create react app
  • 如何使用 jQuery UI Sortable 正确相交?

    这是我对 jQuery UI Sortable 进行动画处理的尝试 https codepen io anon pen YdMOXE https codepen io anon pen YdMOXE var startIndex chang
  • 模拟对象不具有智能感知中显示的所有属性 - 在一个项目中,但在另一个项目中具有它们

    我正在嘲笑 VSTO 对象 在一个项目 我没有写 中它有以下代码 var listOfSheets new List
  • 如何按值删除数组中的多个项目?

    我正在尝试做一个removeAll 函数 它将删除具有该特定值 而不是索引 的数组的所有元素 当我们对循环进行任何更改时 棘手的部分就出现了 索引往往会移动 使其很难像我们想要的那样工作 并且每次更改时都重新启动循环 这在大数组上效率非常低
  • Material.Angular.io mat-autocomplete [displayWith] 函数更新范围变量

    我遇到了一个问题 我可以在实例化 mat autocomplete 的组件控制器中访问本地声明的变量 我面临的问题是局部变量被困在这个范围内 我无法更新它们 有关更新 mat autocomplete 范围变量的任何想法或想法 最终我要做的
  • 替换打字稿中字符串中字符的所有实例?

    我正在尝试用 x 字符替换电子邮件中的所有句号 例如 电子邮件受保护 cdn cgi l email protection 将变为 myxemail emailxcom 电子邮件设置为字符串 我的问题是它不只是替换句号 而是替换每个字符 所
  • backbone.js:视图中影响集合中不同模型的按钮

    我刚刚开始使用backbone js 到目前为止 我真的很喜欢它 我有这样的事情 ModelA ModelB ViewA ViewB ModelA 持有 ModelB 的集合 如何使用按钮构建模型 B 的视图 单击该按钮会更改集合中下一个
  • Skrollr 添加空白

    我已经尝试了一切 我在谷歌上阅读了 4 5 页试图找到适合我的修复程序 已经筋疲力尽了 即使我使用 skrollr 示例 我的问题仍然存在 不是说他们做错了什么 我知道我只是没有正确理解它 因此 我上传了一个演示 仅在移动设备上展示这个尴尬
  • 使用 Javascript 检测 Pepper (PPAPI) Flash

    我们使用的是专有的文档查看器 它与某些 Chrome 版本中的 Pepper 版本的 Flash 配合得不太好 所以我希望能够检测到它并重定向到不同格式的相同内容 由于这个版本似乎落后于 NPAPI 版本 所以我一直在使用闪光检测 http
  • 将 javascript 变量作为参数传递给 @url.Action()

    是否可以将javascript变量作为参数传递给 url Action 因为据我所知可能存在服务器和客户端问题 我的要求是我必须根据过滤器下载文件 并进行ajax调用不适用于下载文件 所以我对 url Action 进行了编码 但无法实现这

随机推荐

  • 更高级别的 Python GUI 工具包,例如为 TreeView/Grid 传递字典

    使用 PyGTK 启动了我的第一个 Python pet 项目 虽然它是一个非常强大的 GUI 工具包并且看起来很棒 但我还是有一些烦恼 所以我考虑转向其他东西 因为它还不太广泛 环顾四周SO https stackoverflow com
  • 使用 openat 重新打开目录

    看起来 可以使用openat to re打开一个已经打开的目录 例如 在我的 Linux 系统上我可以执行以下操作 define GNU SOURCE include
  • 服务器和本地之间的 Mercurial?

    我正在进行一个门户开发工作 我有时会遇到一些麻烦 例如丢失 覆盖错误的文件等 所以我决定使用 Mercurial 来进行此开发 我第一次使用源代码管理的经历 我在这个项目的服务器 bluehost 上工作 有什么办法可以在本地保存更新备份吗
  • 跨线程Winforms控件编辑[重复]

    这个问题在这里已经有答案了 如果编辑文本的代码 属于 与包含 Windows 窗体的线程不同的线程 如何编辑 Windows 窗体元素中的文本 我得到了例外 跨线程操作无效 控制 textBox1 是从创建它的线程以外的线程访问的 谢谢 您
  • Python 求和 excel 文件

    我有一个包含 3 列的 Excel 文件 请举例如下 Name Produce Number Adam oranges 6 bob Apples 5 Adam Apples 4 steve Peppers 7 bob Peppers 16
  • 读取 ELF 部分的内容(以编程方式)

    我正在尝试检索 ELF 二进制文件中附加部分的内容 此时 我使用以下代码来检索每个部分的名称 include
  • jQuery 验证 - 隐藏错误消息

    我正在使用 jQuery 验证插件 并希望禁用它创建的或元素 容器来显示错误 消息 基本上 我希望带有错误的输入元素具有错误类 但不创建包含错误消息的附加元素 这可能吗 我刚刚想到了 CSS 解决方法 但它并没有真正解决元素仍在创建的事实
  • Spring Cloud Sleuth-获取当前的traceId?

    我正在使用 Sleuth 我想知道是否可以获取当前的 TraceId 我不需要添加任何回复或任何内容 我只想要在某些情况下向开发团队发出警报的电子邮件的traceId Ex import brave Span import brave Tr
  • 如何在 gitlab CI 中检测编译器警告

    在我们的 gitlab 服务器上设置 CI 构建的步骤中 我似乎找不到有关如何设置编译器警告检测的信息 构建输出示例 100 Building CXX object somefile cpp o home gitlab runner bui
  • 将数据从 Dynamodb 发送到 Amazon Elasticsearch 的最佳方式

    我想知道将数据从 dynamoDB 发送到 elasticsearch 的最佳方式是什么 AWS SDK js https github com Stockflare lambda dynamo to elasticsearch blob
  • Android:从另一个活动返回时避免调用 onCreate()

    假设我的应用程序包含两个活动 A 和 B 两者在 AndroidManifest 中都仅限于纵向 活动 A 启动活动 B 在Activity B中 有一个按钮 它调用finish 当点击时 问题是 当我垂直握住设备 纵向 并单击按钮时 调用
  • DT Shiny 中单列的渲染下拉列表

    我不精通 Javascript 并且想复制下拉菜单中提供的功能兰森塔布尔 https jrowen github io rhandsontable dropdown autocomplete包但对于DT https rstudio gith
  • 将 IEnumerable 对象序列化为字符串数组的扩展方法?

    我的最后一个问题是关于将对象的字符串表示形式序列化为 XML https stackoverflow com questions 1138414 can i serialize xml straight to a string instea
  • 为什么我的 dockerfile 不复制目录

    在我的 dockerfile 中我有这两行 ADD ansible inventory etc ansible hosts ADD ansible ansiblerepo 第一行有效 因为我可以运行容器并看到我的主机文件已填充了清单文件中的
  • 使用 getElementsByName() 设置选项值

    拥有这个字段集 fieldset legend death legend fieldset
  • 如何从 javascript 中的 API 调用返回值到 React 组件

    我似乎无法将 javascript 中此 API 调用的值返回到我的 React 组件 我有一个调用 API 的 java 脚本文件 在js文件中 返回结果 但是当我在react组件中调用useEffect中的js函数时 它返回未定义 ex
  • ctags 多行 C 函数原型

    ctags 有没有办法处理 C 中的多行函数原型 我四处寻找 fields S应该做多行原型 但我无法让它工作 ctags x c kinds pf fields S file file int foo int x int y ctags
  • django QueryDict 仅返回列表的最后一个值

    使用 django 1 8 我观察到一些奇怪的事情 这是我的 JavaScript function form submit var form form1 id request post this attr action form seri
  • 面向对象的 CSS:这重要吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我刚刚发现这个有趣的演示 http www slideshare net stubbornella object oriented css ty
  • 为什么React需要jsdom来测试?

    在为 React 组件编写测试时 您必须将它们渲染到 DOM 中 以便断言它们的正确性 例如 如果您想测试某个类是否已添加到给定状态的节点 则必须渲染到 DOM 节点 然后通过普通 DOM API 检查该 DOM 节点 问题是 考虑到 Re