问题标签 [testing-library]

从文档中，findBy查询返回一个 Promise。但是，Promise.prototype.catch()在将它们与 async/await + try...catch 一起使用的情况下，使用这些查询似乎不起作用。

例如，“未找到”按预期记录在这里：

但是，这里没有记录任何内容：

是否有一个原因？

我很难理解为什么我的断言不起作用。

这是DOM：

这是我的断言：

我已阅读有关隐藏标志的文档，但我仍然无法理解为什么这不起作用。

有任何想法吗？

我一直在做很多研究，但我找不到成功模拟窗口焦点事件的方法。

我查看了“测试库/用户事件”，但仍然找不到这样做的方法。

在我的组件中，我们有window.addEventListener('focus', doSomething);，但这永远不会通过测试运行程序调用。

I'm trying to figure out if there is a way to prevent the "not wrapped in act(...)" warning thrown by Jest/testing-library when I have nothing to assert after the state update that causes the warning happens, or if I should just ignore this warning.

Suppose I have this simple component:

Suppose I want to simply test that this component renders okay even if getData() doesn't return any data for me.

So I have a test like this:

This test will pass, but I'll get the "not wrapped in act(...)" warning because the test will finish before getData() has a chance to finish.

In this case, the response from getData() sets arr to the same value (an empty array) as I have initially set it to at the top of the component. As such, my UI doesn't change after the async function completes—I'm still just looking at a paragraph that says "no array items"—so I don't really have anything I can assert that would wait for the state update to complete.

I can expect(getData).toHaveBeenCalledTimes(1), but that doesn't wait for the state to actually be updated after the function call.

I have attempted an arbitrary pause in the test to allow time for setArr(items) to happen:

But that doesn't seem to help, and I'm honestly not sure why.

Is there a way to handle this situation by modifying only the test?

I am sure I could fix the problem by refactoring MyComponent, e.g., by passing arr to MyComponent as a prop and moving the getData() call to a parent component, or creating some custom prop used only for testing that would skip the getData() call altogether, but I don't want to be modifying components purely to avoid warnings in tests.

I am using testing-library/react, v11.2.2.

我正在使用 Redux-tool kit 来设置它。我们现在使用@testing-library/react 来设置与测试相关的设置。看官方文档的时候有个问题。

这部分在上面的代码部分有什么功能？

我试图做一些类似于测试游乐场的事情，但我不知道要包含哪个 JavaScript 文件才能访问所有测试库原生函数。

目标是能够像getAllByRole在浏览器控制台中一样运行查询。我不想让 Node 项目运行。我只想要一个包含测试库 JavaScript 文件的基本 HTML 文件，这样我就可以在浏览器控制台中运行它的功能。

在我的 JavaScript 项目（没有反应）中，我使用 testing-library（没有 Jest）、jsdom 和 jsdom-global 来实现我的测试。但是当我运行这个命令时：

我收到这个错误

我应该使用什么命令？

我最近开始使用 React / DOM 测试库来测试我所有的前端 React 代码。我遇到的第一个问题是，由于我们的应用程序的布局方式，我无法知道数据加载（在我的例子中来自 Mock Service Worker）何时完成，因为一切都是通过 Redux/Redux 处理的Saga 和我们的 Loading spinner 组件位于我们正在测试的组件之外。

因此，为了等待数据被加载，我们实际上必须waitFor得到原始数据本身（因为我们不能简单地等待加载微调器或文本消失，因为它位于组件之外）：

在这种情况下，我们的 Act-Arrange-Assert 模式中的断言在 waitFor 中，尽管在其他情况下我正在测试表中的几行，因此只有第一个断言会被包装在 waitFor 中，而其他断言可以只需直接断言，如下所示：

这就引出了问题的主题：这是在我的测试中布置断言的有效方式吗？

我正在使用 Angular 应用程序，并且正在使用 testing-library 进行测试，这就是这种情况：

我有这个组件：

这是组件的 .ts：（如您所见，它扩展了 BaseComponent）

这是基本组件：

如您所见，我需要渲染组件（错误、加载和 hasInv）的属性只是 getter，它们来自基本组件......

这就是我尝试进行测试的方式：

但是当我尝试以这种方式进行测试时，我

** TypeError：无法设置只有 getter 的 [object Object] 的属性错误**

所以我的问题是，如何在我的组件上设置这些属性并能够使用测试库在我的测试中正确呈现组件？

在我的 Svelte 应用程序中，我尝试使用svelte-testing-library 进行测试，当特定 API 请求（使用msw）成功时删除元素，但在返回错误时不会删除。

检查快乐路径很容易使用

但是，当请求失败时，检查元素是否被删除的“正确”方法是什么？我可以添加一个自定义 setTimeout(...) 但这似乎不是最佳解决方案。

有没有一种方法可以在做出断言之前轻松确保请求已完成并处理？

Foo.svelte

Foo.spec.js