问题标签 [testing-library]

这是我的代码示例

我需要做的是通过其文本访问第一个元素以触发 userEvent.selectOptions

我得到的是：

TestingLibraryElementError：无法找到带有以下文字的元素：[AF] 阿富汗。这可能是因为文本被多个元素分解。在这种情况下，您可以为您的文本匹配器提供一个功能，以使您的匹配器更加灵活。

这显然是因为我试图查询的文本被元素破坏了。

请注意，这不是一个选择/选项下拉菜单，它没有任何可访问的角色，所以我只能通过 screen.getByText 查询它

我想知道是否将新的类名放入 html 组件中只是为了可读性和测试是可以的。假设我们有这种情况：

这些类只是为了在浏览器中更好的可读性和更好地测试这个组件。像这样 ：

在 React 中使用“空”类仅用于可读性/调试/测试是一个坏主意吗？测试时查找元素的最佳方法是什么？

我的反应组件<script>使用 nextJS 呈现标签Head。当尝试使用 testing-libary 的getByTestId方法查询元素时，我收到以下消息：

有没有办法包含script在输出中，或者我应该使用不同的策略来验证我的脚本是否被注入？提前致谢

零件

测试

我有以下设置：

• E2E Test Utils - 使用 Jest 和 Puppeteer 的标准 WP Gutenberg e2e 测试集
• testing-library/pptr-testing-library - Puppeteer 提供的 @testing-library/react 和 @testing-library/library 中所有您最喜欢的以用户为中心的查询功能！

我在测试 GB 编辑器中元素的出现和消失时遇到问题。我现在知道扩展断言不适用于 Puppeteer。我只是不知道要测试什么。当我以交互模式运行测试时，我可以看到一切正常，但我没有得到正确的结果。查询的结果只是一个空对象。这是我的代码片段：

这是我看到的错误：

测试下方的完整节点错误消息如下：

编辑：回应Caleb Eby 的回答

我认为这就是它的waitFor()用途......但是如果我只添加await findByLabelText()，我会收到一个错误：

如果我将其更改为：

运行测试需要很长时间并以错误结束：

这实际上可能是解决方案的罪魁祸首，但是对此进行测试的正确方法是什么（而不是toBeInTheDocument()）？

我正在使用 React 测试库，并且我有一个组件，它接收将在<input />.

然后我将一个简单useRef()的形式传递给父组件，例如

我现在的问题是，我将如何测试我可以传入一个 ref 并且它将出现在 InputComp 中？

我尝试了以下方法：

这两个断言都失败了，原因如下：

我刚刚开始研究测试，我正在尝试测试一个初始状态 = false 的组件。单击时，它应更改为 !state ，如果为 true，则呈现子组件。至少，我正在尝试编写一个测试，以检查它是否会通过我找到的一些示例更改单击时的状态。我正在使用 Jest、测试库/React 和 Jest。

父组件

子组件

我遇到以下错误

我正在尝试测试一个组件，当我单击“Adicionar ao final”（添加到末尾）或“Adicionar ao início”（添加到开头）按钮时，它会显示如下内容：

我想进行测试以获取这些渲染。

组件代码：

测试：

现在，它就像：“expect(queryByText('Valor:^/0-9/i')).toBeInTheDocument();” 但我认为正则表达式 'Valor:^/0-9/i' 不正确。我对写正则表达式有点困惑。提前致谢！

我正在为一个动态导入另一个组件的苗条组件写一个测试。以下代码段是发生动态导入的部分。

我的笑话配置（在 package.json 中）

失败的测试

我试图用 babel 插件"dynamic-import-node"和/或"@babel/plugin-syntax-dynamic-import". 但结果是一样的。

我也尝试使用jest-next-dynamic（用于使用 nextjs 动态导入语法模拟动态导入）

我也尝试模拟动态导入但没有任何成功 - 或者更确切地说我不知道​​如何模拟导入......

如果我在测试运行期间实际导入组件、预加载组件或只是模拟它，对我来说并不重要 - 测试应该只是运行而不会引发错误

如果我应该提供任何其他信息，请告诉我！

更新

测试失败并显示以下消息：

错误：您需要使用支持 VM API 中的 ES 模块的节点版本运行。请参阅https://jestjs.io/docs/ecmascript-modules。

我正在运行 Node v16.4.2 btw - 我尝试了链接中描述的解决方案，但结果是所有测试都失败了。也许我对如何执行测试的理解是错误的，但是我在 jsdom 环境中而不是在节点环境中运行测试，所以我并没有真正得到错误？

目前我的目标是以import()某种方式模拟。

我是 Vue 新手，并遵循使用 Vue 测试库的建议。唯一的问题是我似乎找不到将代码注入渲染函数中的 globalProperties 的方法。

有谁知道我可以注入或模拟它的例子吗？

main.js

app.config.globalProperties.$globals = globalMethods

从创建中的 vue 组件中，我可以调用

组件.vue

让 formatedObj = this.$globals.maskValues(this.inputValue, this.inputType, this);

测试规范.js

** 错误 **

我似乎无法让以下示例与 vue3 和测试库一起使用。 https://github.com/testing-library/vue-testing-library/blob/main/src/tests/translations-vue-i18n.js _ _

我什至尝试像这样修改示例以通过将消息注入模拟但没有运气来识别 $t 。

有没有人有一个适用于 vue 3 的例子？

以下是详细信息...

Translations.spec.js

翻译.vue

包.json

错误