问题标签 [vue-test-utils]

我一直在浏览https://vue-test-utils.vuejs.org/guides/#testing-key-mouse-and-other-dom-events以了解如何使用 Jest 结合 vue-test- 编写测试实用程序。但是，这些示例都使用了shallowMount您安装组件的位置，但我想避免这种情况，因为我使用 GUI 测试来测试实际组件。

但是，如果没有组件，我会遇到问题。在 vue-test-utils 的示例中，它们用于shallowMount注入商店，但由于我没有这样做，我无法访问我的商店，这意味着我的状态、我的 getter 等在测试时都是未定义的。

我的商店测试文件myStore.spec.js：

运行此测试时的错误之一是：state is not defined.

我哪里错了？我应该如何在我的测试中访问我的商店？理想情况下，我想将我的测试存储设置为与我从中导入的相同myStore，但我不确定这是否有效？

Vue Test Utils有一个 API 方法，叫做shallowMount()：

...创建一个Wrapper包含已安装和渲染的 Vue 组件，但带有存根的子组件。

我搜索了 Vue Test Utils 文档网站，但未能很好地解释这些存根子组件的行为方式。

1. 这些存根子组件到底是什么？
2. 他们经历了 Vue 组件生命周期的哪些部分？
3. 有没有办法预先编程他们的行为？

使用带有 Jest 的 vue-test-utils 进行 Vue 测试，执行复制命令时出错

document.execCommand 不是函数。我该如何解决？

这是组件源代码中的代码片段。

在这里我写了这样的测试；

我正在测试提交后是否发送表单数据。

ContactForm.spec.js

验证成功（因此组件中的validForm设置为true）但是测试没有通过

控制台日志

组件vue是

联系表单.vue

并且 console.log 调试是

奇怪的是，从规范的 console.log 中看到 DATA (contactLang) 值为 false ...在验证结果之前显示

我猜有异步问题...超时？

感谢您的反馈

版本

1.0.0-beta.25

转载链接

https://codesandbox.io/s/8xrrjpy349

重现步骤

1. 从复制示例代码设置https://codesandbox.io/s/8xrrjpy349
2. 跑npm install
3. 运行npm run test测试执行将开始，它会抛出一个错误TypeError: Cannot read property 'breakpoint' of undefined

期望什么？

测试应该按照文档中给出的错误运行https://vue-test-utils.vuejs.org/api/shallowMount.html

实际发生了什么？

返回类型错误

1. 项目是使用 nuxt 和 vuetify.js 设置的
2. 在代码设置中添加 package.json 将提供完整的 jest 和 vue-test-utils 配置信息
3. 仅将最少的文件添加到代码示例

我有一个专注于输入的指令。我想测试这个指令。唯一的问题是我找不到如何测试输入是否集中

这是我的简单模拟组件

这是我的指令：

这是我的测试：

有人有什么想法吗？我一直在阅读 Jest 和 Vue utils 文档，但没有成功。

我有一个服务，GetStatsService它包含一个异步方法，该方法调用几个 api 端点，然后处理数据，返回一个对象。它看起来像这样：

getMontlyStats然后在一个名为 的组件中调用该方法，在该组件UserComparison.vue中，每个表示用户 ID 的路由查询参数都会多次调用该方法。该UserComparison组件还有一个名为 的 data 属性stats，它是一个数组，每个玩家的服务调用结果都被推送到这里：

最后，将this.statsdata 属性作为 prop 传递给子组件StatsTable.vue。

我的问题：我想对服务进行单元测试，但以我能想到的任何方式都没有这样做。我尝试为子组件创建一个测试。在那里，在beforeEach()方法中，我用 moxios 模拟了 api 调用。

})

我尝试使用vm.$nextTick()等待异步服务返回值，然后将其推送到statsconst。我尝试使用flush-promises来解决所有承诺，然后将异步调用结果推送到stats数组。似乎没有任何效果。stats 属性始终是一个空数组。我知道在 Vue 中测试异步性可能很棘手，所以我假设我并不完全理解某些东西。

我在一个包含多个组件的网站上工作，其中包含其他组件。现在我想测试如果没有设置数据，表单的保存按钮是否正确停用。我使用 vuetify 作为 UI 和 Jest 进行测试。

这是我的父组件，包含 edit-user-details 组件：

这是 edit-user-details 组件的一部分：

在这里我们有我的测试：

测试是绿色的，因为它没有断言。主要问题是，我收到此错误：[Vue 警告]：未知自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

所以我的问题是：如何测试包含我编写的其他组件的组件？

预先感谢您的帮助。

我SyntaxError: Unexpected token import在尝试通过延迟加载方法加载组件的索引文件中遇到错误。

如果使用以下语法，它可以正常工作：

我有一个Vue具有以下结构的组件

子组件始终具有以下内容mixin

这是子组件的示例

因此，每当child挂载时，我都会向父级触发一个事件，然后执行回调。

使用Jest以及Vue Test Utils如何测试mixin已触发的custom-event？