问题标签 [jest-dom]

我正在从配置中填充表单字段，并且在用户更新字段后，我将更新的字段与之前使用“isEqual”获取的配置进行比较。如果“isEqual = false”我启用提交按钮。我在用 jest 模拟这种行为时遇到了一些麻烦。任何人都可以帮助这个测试用例吗？

下面是我的示例代码片段：

这是我的测试：

我在 StencilJS 中有一个单元测试，其中我使用了来自jest-dom的玩笑匹配器。当我运行测试时，它会引发错误：

单元测试是：

jest-dom 中的这个函数会抛出错误，该函数正在检查是否将有效的 HTMLElement 传递给匹配器：

有趣的是错误来自 if 语句的右侧（因为 window.SVGElement 未定义），但是我相信实际问题是它不应该到达代码的那部分。在 if 语句的左侧，检查的htmlElement instanceof window.HTMLElement返回结果为 false，htmlElement类型为HTMLFormElementwhilewindow.HTMLElement似乎是 a MockHtmlElement。

所以我的问题是 - 有没有办法让 jest-dom 与 StencilJS 单元测试一起工作，因为看起来 stencil 设置的环境不是 jest-dom 所期望的？

我正在尝试使用 jest-dom 来测试组件的样式，但我遇到了错误：

我的组件是带有样式组件的简单链接：

在我的测试中，我正在做：

我创建了一个设置文件（jest.config.js）：

在项目的根目录下，我创建了 .jest / setup.js 文件并导入了 js-dom：

我有一个关于扩展 Typescript 接口的问题。这是我的情况：

我expect在没有 Jest 的情况下在我的测试中使用（我单独安装它并且它可以工作）。

现在我想用它jest-dom来为 DOM 添加expect匹配器。（它们非常有帮助，会让我的测试更容易编写）。

我做了以下扩展期望

这有效并添加了匹配器，但 Typescript 不知道它们。

我安装了@types/testing-library/jest-dom，但没有解决问题。

往里@types/testing-library__jest-dom看，我发现它扩展了的类型jest而不是独立的expect.

我尝试添加expect.d.ts具有以下内容的 a：

但 Typescript 仍在抱怨。

有任何想法吗？

我有一个产生副作用的功能。我正在简化它以记录节点元素的内容，以保持对问题的关注。

日志文件.js

然后我有单元测试

log.test.js

这是一个简单的例子，但是，如果我想使用 .appendChild() ... 来操作 DOM，会发生什么？

在控制台中我看到以下错误

任何人都可以帮助我吗？谢谢

我是单元测试的新手，我正在尝试渲染一个组件以了解有关该库的更多信息。

我正在尝试遵循本指南。

零件

测试

我只是想查看组件是否正确呈现，但出现错误

关于我做错了什么有什么建议吗？

我正在尝试将 jest-dom 库添加到每个测试文件中。我安装了该软件包并制作了“jestSetup.js”文件并添加了 package.json，如下所示。

jestSetup.js 是

测试文件是

但是它说toHaveClass is not defined错误并且console.log的结果是“jest-dom，jest”我再次用jest.config.js测试了它，但结果是一样的。我不确定为什么会这样。

我正在使用 RTL 测试一个反应组件，每次我运行测试时，我都会得到，

**这是代码

对此的任何帮助将不胜感激。

当 React 组件使用 CSS 转换隐藏时，如何测试该组件在 DOM 中是否可见transform: scale(0)？

jest-dom有一个.toBeVisible()匹配器，但这不起作用，因为transform: scale(0)它不是受支持的可见/隐藏触发器之一。根据文档：

如果满足以下所有条件，则元素可见：

• 它存在于文档中
• 它没有将其 css 属性display设置为none
• 它没有将其 css 属性设置visibility为hiddencollapse
• 它没有将其 css 属性opacity设置为 0
• 它的父元素也是可见的（依此类推，直到 DOM 树的顶部）
• 它没有hidden属性
• 如果<details />它有open属性

我没有使用该hidden属性，因为它干扰了我的过渡动画。我正在使用aria-hidden，但这也不是受支持的触发器之一。

我的组件的简化版基本上是这样的。我正在使用 Tailwind CSS 进行转换和过渡。

我可以通过以下方式检查隐藏元素：

• toHaveClass("scale-0")
• toHaveAttribute("aria-hidden", true)

但与toBeVisible评估整个父树不同的是，这些匹配器只查看元素本身。

如果我从那时起使用getByText，react-testing-library我将访问<span>内部<div>而不是<div>我想要检查的内部。所以这不起作用：

解决这个问题的最佳方法是什么？

我正在使用带有 jest-dom 的 react-testing-library。它工作正常，但是当我尝试使用toBeInTheDocument它时会抛出错误TypeError: element.getRootNode is not a function。

错误日志：