问题标签 [vue-test-utils]

有一个带有 axios 设置的 Vue 应用程序，并且this.$http.get在组件中使用它，并且工作正常。

在使用 Jest 运行规范时，出现错误：Cannot read property 'get' of undefined

我知道我可以用 maxios 模拟 axios。如何让 Jest 识别 $http 使其不会引发错误？

I'm trying to test my 'Container' component which handles a forms logic. It is using vue-router and the vuex store to dispatch actions to get a forms details.

I have the following unit code which isn't working as intended:

With the following component (stripped of everything because I don't think its relevant (hopefully):

I get the following assertion error:

AssertionError: expected false to be true

I'm guessing it is because I am not mounting the router in my test along with a localVue. I tried following the steps but I couldn't seem to get it to invoke the beforeRouteEnter.

Ideally, I would love to inject the router with a starting path and have different tests on route changes. For my use case, I would like to inject different props/dispatch different actions based on the component based on the path of the router.

I'm very new to Vue, so apologies if I'm missing something super obvious and thank you in advance for any help!

我们正在将一个非常大的项目移植到 Vue.js 中，并希望在我们进行时彻底实施我们的单元测试套件。

我们想验证组件在创建时是否设置了所有必需的属性，我的测试用例如下所示：

该组件Input应包含一个属性value。我可以通过控制台发出的警告看到它丢失了，但我们想在我们的单元测试中捕捉到它。直接测试这没有多大意义，但是一旦我们有嵌套多个组件的组件，确保每个组件正确初始化其子组件很重要，这是通过确保我们自己上述测试应该失败并被捕获失败来实现的。

然而，没有例外，我们有一些想法来挂钩，Vue.warnHandler但这似乎只是为了确认构造函数按预期工作需要做很多工作。

是否有推荐的方法来使用 Vue.js 执行此操作？

我有一个返回布尔值的自定义插件。我不想将插件导入测试，而是想模拟这个值。我可以轻松地模拟插件，但是如何更改测试中的返回值？

测试

我正在尝试对（使用vue-test-utils）一个组件进行单元测试，该组件具有这样beforeRouteUpdate的组件导航保护：

我确实在测试文件中渲染了组件，shallowMount并模拟了$store.

有人对此有什么想法吗？

更新：我用 Mocha + Chai 作为单元测试工具创建了一个最小的例子@vue/cli，可以在这里找到：https ://github.com/BerniWittmann/vue-test-navigation-guard-reproduction

我正在尝试测试使用 vuetify 构建的组件。为此，我正在使用 vue-test-utils。我的目标是在 v-select 字段中执行更改，并断言执行了突变。这是我的代码：

当我设置数据时，第一个测试是好的：

我现在想更改我尝试的选定值：

并且

有人可以帮我检索选择然后更改选择的值吗？谢谢你的支持。

我正在使用 Buefy CSS 框架，它提供了自定义的 vue-js 组件，例如<b-input>and <b-table>，我在测试<b-input>标签时遇到了问题。

我的测试代码中的 expect 语句应该通过，因为当我使用<input>标签而不是<b-input>. 但是，触发 'input' 事件对data 属性<b-input>没有任何作用。name

有谁知道我如何正确地对<b-input>标签进行存根，以便我可以将其完全作为<input>标签进行测试？

我无法弄清楚这个问题。vue-utils-测试

我安装时的问题

让 wrapper = mount(cmp, { localVue, store, router });

我用于测试的代码

我看到很多链接对我不起作用。 https://github.com/bootstrap-vue/bootstrap-vue/issues/1678 https://github.com/vuejs/vue-test-utils/issues/450

我对 Vue 组件的单元测试很少。在大多数测试中， shallowMounted 组件只需要计算属性。但是对于两个测试，我需要一个 store(Vuex) 实例。有没有办法将实例添加到已经很浅的组件中？可能是下面的代码将有助于理解。它只是一个例子。谢谢你。

在下面的测试中，我根据文档设置了我的数据对象；但是，“expiredListingsByWeek”是一个引用“lastSaturdayNight”的计算属性，发生这种情况时不会更新。

在 vue test utils 文档中不清楚 setData 是否触发了 change 事件。它是否触发了更改事件，如果没有，我应该如何在我的 VueJS 组件中测试我的计算属性？此外，是否有任何我可能成为牺牲品的“陷阱”？