问题标签 [vue-testing-library]

首先，我想解释一下我有一个 Vue 组件存储库，它负责显示从 http 服务检索到的数据。与组件本身管理每个实例的相同数据检索并通过网络请求向客户端发送垃圾邮件不同，我设法找到了一种解决方案，该解决方案允许将另一个组件直接安装到根目录（我称之为“服务”）由于它与 Angular 的相似性）来管理这些组件需要的数据。这很好用，其他组件可以通过 Vue.prototype (via this.$TestService.value) 访问它。它有一些警告，但在大多数情况下，它完全符合我的需要。这可能并不常见，但那些使用 Vuex 的人使用的是类似的方法，我不想使用 store 范例。

我制作了一个非常简单的 Vue JsFiddle 来展示这一点......

https://jsfiddle.net/spronkets/8v31tcfd/18

现在，重点...我正在使用@testing-library/vue、@vue/test-utils和 Jest 来测试组件并获得测试覆盖率，现在由于在测试执行期间 Vue.prototype 上不存在该服务，我在运行测试时会遇到错误。我不想模拟“服务”层的功能，那么有没有人有测试这些根安装组件的解决方案？我已经尝试手动导出服务（卸载和挂载）并将它们包含在模拟部分以及将文件直接导入到测试文件中，但是当组件尝试检索值时“服务”始终未定义并且仅在测试执行期间...

我还创建了一个简单的存储库，以我在下面使用的 Vue 组件存储库为模型...

https://github.com/kcrossman/VueServiceExample

首先，克隆 repo 并遵循 repo 中包含的 README.md。谢谢！

我正在使用 @testing-library/vue 并在 Sublime Text 的构建步骤中运行测试。错误输出使用 prettyDom 并且在输出窗口中不是很清晰：

构建结果窗口中的示例输出：

有没有办法用环境变量来关闭语法高亮，就像你可以扩展输出长度一样？

我想在我的应用程序中使用Vue 测试库Nuxt.js。但在安装包后，启动测试会触发此错误：

'vue-cli-service' 不是内部或外部命令、可运行程序或批处理文件。

这大概是因为Nuxt.js不使用vue-cli-service.

尽管如此，有没有一种简单的方法来使用Vue Testing Librarywith Nuxt.js？

有人知道我将如何使用 vue-testing-library 在组件中测试观察者吗？

这是我的组件。我想测试更新品牌vuex状态时是否调用了该方法。使用 vue 测试工具会很容易，但我还没有找到使用 vue 测试库来做到这一点的好方法。在使用 vue 测试库之前有没有人这样做过。

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

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

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

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

我是 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

错误

我通过带有选项的 vue cli 创建项目：vue3、TS、JEST 并添加 @testing-library/vue 。我的 package.json 看起来像这样

我的 jest.config.js 是我从 vue CLI 得到的

我的测试是

尝试过的节点版本：14、​​12 我收到错误：

我检查了类似的问题，例如Test suite failed to run Cannot find module 'vue-template-compiler when using jest in vue3但对我没有帮助。

我正在尝试通过输入字段测试发出的事件，该输入字段在更新方法上有一个去抖动。

没有去抖动，测试通过，没有问题。

这是一段代码。

原文在这里：https ://gist.github.com/vicainelli/cf614ef7d7967684ebab6cae8290033e

我正在尝试为复选框组件创建一些测试，但看起来我无法断言input[type="checkbox"]何时被禁用。

在前两个块中，我正在测试复选框是否可以选中/取消选中元素是否被禁用，这里一切正常。

对于最后两个块，我正在尝试相同的方法来检查/取消选中，但现在我将属性设置disabled为元素，但看起来库忽略了属性

这是我的测试

和控制台输出