0

首先，我想解释一下我有一个 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。谢谢！

4

3 回答 3

1

您需要在测试中创建和准备自定义 Vue 实例，以便在单元测试中使用任何自定义功能（如商店、路由器和其他任何东西）。（您可以将您的真实模块与自定义实例一起使用，不必模拟任何东西。）

在您的情况下，您应该使用“@vue/test-utils”中的“ createLocalVue ”函数创建一个新的 Vue 实例，并在其上应用您的自定义原型功能。之后，您也可以编写适当的测试用例来访问该自定义功能。

于 2020-10-20T08:54:41.807 回答
1

如果它是异步的，我会反对使用真正的服务，但如果您只想注册它以使其可用，您可以按照模拟指令进行操作，而不是使用对象进行模拟，只需导入真正的服务。尽管在看到您的 TestService 实现后，您需要将真实服务与服务注册分开并将其导出以便能够在本地 vue 中注册它。

于 2020-10-20T05:29:34.647 回答
0

更新：对于那些将来可能会提到这一点的人，Vue 插件可能是这种功能的更好解决方案。

我在 GitHub 中偶然发现了这个问题，这导致我在下面进行了修复：

https://github.com/testing-library/vue-testing-library/issues/113

具体来说，用户的评论nikravi：

ok, I found the fix. The trick was to add

import Vue from "vue";
import Vuetify from "vuetify";
Vue.use(Vuetify);

and then the render() works without warnings.

在我手动导入Vue并Vue.prototype.$TestService = TestService直接在单元测试中设置后，它通过了那个错误。就个人而言，我认为这很愚蠢，但它确实有效。

在这个工作之后，我还发现你可以直接在render回调中访问 Vue 实例（从@testing-library/vue），所以我完成了这段代码而不是导入 Vue：

render(TestComponent, {}, vue => {
    vue.prototype.$TestService = TestService;
});

我已经在我之前发布的 repo 中包含了解决我的问题的所有提交：

https://github.com/kcrossman/VueServiceExample

一些测试格式不正确，但是一旦我进行了这些更改，测试就开始工作了，我更新了一些其他文件以更好地供人们参考。

于 2020-10-20T18:33:39.610 回答