问题标签 [testing-library]

我有以下组件，它将项目列表显示为使用 data.json 文件中的 fetch api 调用获取的卡片。

获取方法：

如果我在 App.tsx 中使用这个组件，我该如何测试它在 App.tsx 中的使用。另外，我该如何测试这个组件以及它的作用（调用 api，使用来自 api 调用的数据用“卡片”填充 dom）。还有我应该在这里测试什么。我应该专注于测试数据还是 dom？还是函数调用？testing library 和 jest 中的一些文档在这种情况下并没有提供太多帮助。

我想使用 User-Event-Testing-Library ( https://testing-library.com/docs/ecosystem-user-event/ ) 测试我的 react-select 组件。
我只想测试如果单击则选择打开菜单。

这是我的代码：

如果我使用 fireEvent 它可以工作，但是如果我使用 useEvent 它就不能工作..

测试库自动日志记录https://testing-library.com/docs/dom-testing-library/api-debugging/#automatic-logging的输出通常包含许多新行，使输出长达数百或数千行（是的，我正在使用一个巨大的DEBUG_PRINT_LIMIT），这使得很难找到相关部分。例如，它看起来像这样： b

我假设 DOM 输出包含所有新行，因为它们在我的 Vue 组件的源代码中。一种方法是更改​​我的组件，但我不想这样做，因为它是根据https://eslint.vuejs.org/的规则格式化的

我看到https://testing-library.com/docs/dom-testing-library/api-debugging/#prettydom有“选项”链接到https://github.com/facebook/jest/tree/master/ packages/pretty-format#usage-with-options，但我没有看到任何相关选项，我不知道如何将它们传递给自动日志记录。

有没有办法控制 HTML 的格式？例如，如果元素打开标记只有一个属性，我想避免在元素打开标记中使用新行。例如，在示例屏幕截图中，它将前三行合并为一行：<span class="organisation-details">？

我有一个逐步对话框组件，它根据步骤呈现不同的主体。我的第一步 Jest 测试失败了，因为在它结束时，第二步主体正在尝试获取一些数据。理想情况下，我希望避免在第一步测试中测试与第二步有关的任何内容，但我不知道该怎么做。

最终，我开始嘲笑我的 fetch 响应以“摆脱”这个问题，但这也不太有效。第二步 useEffect 中的 fetch 函数执行response.json()，结果在我的测试中出现错误：

FetchError：无效的 json 响应正文原因：JSON 输入意外结束

任何想法如何正确模拟响应以便我看不到上述错误？正如我理想地提到的那样，我想在第一步结束测试，但第二个在微调器消失后自动呈现。

在第二步的正文中使用Effect

当我添加到我的 test-setup.js 中 import "@testing-library/jest-dom";时，当我运行任何测试时，Jest 会抛出这个错误。如果我删除导入一切正常。尝试直接在测试文件中添加导入，没有成功。

这就是 test-setup.js 的样子：

错误：

我想在我的 Vue 2 项目中测试 Vue Router 的“beforeRouteUpdate”和“beforeRouteLeave”导航防护。

尽管有很多关于如何使用 Vue Test Utils 测试它们的答案，但我找不到如何使用 Vue 测试库来做到这一点。在那些答案中（对于 Vue Test Utils），他们建议通过

不幸的wrapper是，它似乎没有暴露在 Vue 测试库中，所以我被卡住了。

那么......使用 Vue 测试库测试 Vue Router 的导航防护的正确方法是什么？或者我应该为此目的使用 Vue Test Utils 吗？

我想断言一个我知道不会立即成立的条件，但在异步操作之后可能是真的，在这种情况下测试应该失败。

假设我正在测试这个计数器组件：

我可以编写这个测试来检查该值是否不应低于零：

但是最后两个断言总是会通过，即使组件有一个错误，这意味着它将异步更新以显示“Value is -1”。

处理这种情况的推荐方法是什么？

我正在尝试使用 React 测试库对一个简单的导航应用程序进行简单的测试。我目前正在尝试使用RTL's own guide中显示的示例方法，但这似乎不起作用。

应用程序.js

主页.jsx

你好.jsx

在 Home.spec.js 中测试 Home.jsx

错误...

我似乎得到的错误是它找不到/Hello component/文本，仍然认为它在Home组件上......这很奇怪，因为历史位置检查清楚地表明它在Hello路径上。

假设我的 component.tsx 文件中有这段代码。是否有可能检查存在特定测试 ID 的标签名称？

我有以下代码通过测试文件中的测试 id 获取元素。

是否可以检查 h1 标签上是否存在以下标签？

简而言之，我需要检查标签page-header上是否存在测试 IDh1

我找不到任何关于如何在useEffect. 我正在获取数据，然后在第二次获取开始之前，我在按钮上设置了“加载数据”工具提示。一旦第二次提取完成，工具提示就会变成“无法使用此功能”或根本没有工具提示。我不确定如何进入 jest 在 fetch 调用之前或之后的测试状态。

问题是我的测试没有看到开始的“加载数据”工具提示，即使它在我手动测试时出现。我很难理解何时等待第二个电话，何时实际发生以及何时结束......

澄清getAccountInfo一下是一个获取请求函数，它返回一个具有accountInfo属性的对象。

错误：

TestingLibraryElementError：无法找到具有以下文本的元素：/正在加载数据/。这可能是因为文本被多个元素分解。在这种情况下，您可以为您的文本匹配器提供一个功能，以使您的匹配器更加灵活。

这是我的测试

这是 AccountInfo 组件