Vue 单元测试：如何使用 props、vuex store、watchers、getter 等测试复杂组件

关键词：

【中文标题】Vue 单元测试：如何使用 props、vuex store、watchers、getter 等测试复杂组件【英文标题】：Vue Unit Testing: How to test complex components with props, vuex store, watchers, getters etc 【发布时间】：2020-03-14 07:20:23 【问题描述】：

我有一个关于 vue 应用程序中的单元测试 (Jest) 的问题 - 我想这是一个架构问题，但也许具体的代码示例也可以帮助我。

我已经从我的应用中勾勒出一个或多或少复杂的 vue 组件设置。它们仍然被简化，但我想它们应该有助于描述这种情况。

(PDF Attachment for those preferring non-pixel data :)

我有一个 Wrapper，它包含三个子组件：

搜索（在地图上搜索的输入字段） 列表（商店列表，也表示为地图上的标记） 地图（谷歌地图本身）

我真的很想为此编写一些单元测试，但是设置这些测试似乎非常繁琐，所以我怀疑这是不是这样做的方法。

它从我加载谷歌地图 API 的方式开始：包装器异步加载它，设置 API 密钥等。一旦加载谷歌地图 API，它就会将其传递给子级。

当然，地图只有在google 出现并且我可以使用new this.google.maps.Map() 时才真正开始加载、创建和显示标记。

即使我想测试 Map 组件的某些方法，我也必须提供一个实际的 google 对象，否则mount() 中的整个初始化过程都会失败。它不能制作地图。

那么我必须在我的测试中加载实际的谷歌地图 API 吗？或者我可以以某种方式跳过安装地图，但仍然测试一些孤立的方法？

进一步你可以看到我的 Map 从 vuex 商店中观察一个 getter：每当我的 vuex 商店中 Search 设置的searchCoordinates 发生变化时，我想执行一些功能（例如，如果搜索未返回有效的搜索坐标，则将我的地图居中到新的搜索坐标或删除当前位置标记）。

我怎样才能以某种方式打破这些组件之间的相互联系，但仍然编写好的和有用的测试，这有助于我保证应用程序做它应该做的事情？

我知道我可以在我的测试中使用 vuex 存储 (Medium article about vuex testing)。 但我仍然觉得整个应用程序是如此相互关联，以至于进行实际的单元测试——一次测试一小块——是不可能的。 看来我不仅要单独安装 Map，还要安装其他组件和带有实际数据的 vuex 存储，才能真正编写防弹测试。

其他几个例子，我很纠结：

在我的mounted() 中，我使用this.$store.subscribeAction((action) => ... 订阅了一个操作 - 当然 $store 在我的测试中是未定义的。 Should I mock it? 正如我所说，我正在观察一个吸气剂：这会引发像 TypeError: Cannot use 'in' operator to search for 'searchCoordinates' in undefined 这样的错误。我是否也必须嘲笑所有的吸气剂？如果是这样：还有什么需要测试的？如果我模拟（~=离开）所有 vuex 的东西，在我看来，测试变得毫无用处......

但也许我在这里弄错了。我对单元测试也很陌生，所以非常欢迎任何提示。 非常感谢您提前。我希望有人有一些有价值的意见。 所有这些例子（即使在像Vue.js - up and running 这样的书中）总是被分解为非常简单易懂的例子，但另一方面并不能真正反映现实生活中的应用......

干杯

----- 编辑：

我得到了某人的needs more focus 投票。 所以我试着总结简单的小问题：

问题摘要

有人对如何测试更大、更复杂的 vue 应用程序有一般意见吗？ 有没有办法用谷歌地图测试组件（或严重依赖任何第三方代码的组件） 在这种情况下，模拟 getter、store 和 action 是个好主意吗？ （我对此有疑问）。 为了测试来自 vuex 存储的监视属性，我读到 in this thread 应该模拟 mapState。 （在我的情况下可能是我的吸气剂）。在我的情况下嘲笑那些吸气剂有意义吗？ 最好的做法是在测试的组件中尽可能多地简化事情（例如，我开始重写一些方法，但这些方法失败了（包括谷歌地图启动的方法）以使我的测试启动并运行：李>

const initMapMock = jest.fn();
const initMarkersMock = jest.fn();
...
const wrapper = shallowMount(Map, 
    methods: 
        initMap: initMapMock, // replace initMap(), which needs google map API
        initMarkers: initMarkersMock,
      ,
    ...

这有意义吗？

【问题讨论】：

【参考方案1】：

深入研究这个问题后，我意识到一件事： 如果有人遇到上述这样复杂的情况，那么单元测试可能不是解决此问题的正确工具！

在这种情况下，end to end testing 也称为 integration testing 会更适合这项工作。

因为我真正想要测试的是，所有不同的组件都以正确的方式做出反应，如果某些事情发生了变化/触发等等，我需要看到整个画面。

如果我回到我的示例，我想看看如果搜索输入记录了变化等情况下地图会发生变化。

我最终为此集成了一些测试，例如使用无头浏览器 googles puppeteer、打开网页、填写搜索查询然后搜索 DOM 以查找地图中的可靠更改。

不幸的是，由于预算限制，我没有时间真正详细地对此进行测试，但我知道应该如何处理。

我最初模拟商店等的想法需要大量工作，而这只不过是围绕单元测试构建一个类似于应用程序其余部分的大型模拟，这样做是完全愚蠢的。通过集成测试，我使用这个已经构建的应用程序来完成我的测试，但我的优势是能够同步测试所有内容！

我个人也认为集成测试比单元测试更强大，因为它们阐明了开发人员不容易掌握的应用程序部分，并且如果应用程序的一部分被更改并且其他无法按预期运行。

如果有人有更多的补充，我仍然很高兴听到关于此事的意见。

干杯

【讨论】：

如何对使用 vuex-class 的 typescript Vue 组件进行单元测试

】如何对使用vuex-class的typescriptVue组件进行单元测试【英文标题】：HowtounittestatypescriptVueComponentthatusesvuex-class【发布时间】：2020-04-0208:32:31【问题描述】：<scriptlang="ts">importComponent,Vuefrom\'vue-property-decorator\';importAction,Get 查看详情

如何使用 vue-test-utils 和 Jest 在 Nuxt 中对使用 vuex-module-decorators 语法定义的 Vuex 模块进行单元测试？

...est在Nuxt中对使用vuex-module-decorators语法定义的Vuex模块进行单元测试？【英文标题】：HowtounittestVuexmodulesdefinedwithvuex-module-decoratorssyntaxinNuxt,usingvue-test-utilsandJest?【发布时间】：2021-11-1717:50:54【问题描述】：我在任何地方都找不到... 查看详情

如何解决 vuex 和单元测试的问题？

】如何解决vuex和单元测试的问题？【英文标题】：HowcanIsolveproblemwithvuexandunit-testing?【发布时间】：2020-02-1621:08:10【问题描述】：我第一次尝试使用mocha编写和运行单元测试，但遇到了一些问题。我有一个组件Table.vue用vuetify写的&... 查看详情

如何在 VueJS 中对 Vuex 动作进行单元测试

】如何在VueJS中对Vuex动作进行单元测试【英文标题】：HowtounittestifVuexactionhasbeendispatchedinVueJS【发布时间】：2017-10-0413:05:10【问题描述】：我只想测试当我的App.vue组件是created()时是否调度了myAwesome操作。这是你要测试的东西吗？... 查看详情

vue-test-utils：如何在 mount() 生命周期钩子（使用 vuex）中测试逻辑？

...】：我正在尝试为Vue的mounted()生命周期钩子中的逻辑编写单元测试，但运气不佳。问题似乎是当组件使用vue-test-utilsm 查看详情

如何在 Mocha 单元测试中访问命名空间的 Vuex getter

】如何在Mocha单元测试中访问命名空间的Vuexgetter【英文标题】：HowtoaccessnamespacedVuexgettersinMochaunittest【发布时间】：2019-10-1612:51:14【问题描述】：我正在构建一个新的Vue组件，它使用命名空间的Vuexgetter来访问列名列表。实际的组... 查看详情

使用 Vuex 时如何测试 Vuejs 组件

...述】：我正在一个更大的应用程序中为我的vuejs组件编写单元测试。我的应用程序状态都在vuex存储中，所以我几乎所有的组件都从vuex中提取数据。我找不到为此编写单元测试的工作示例。我找到了WhereEvanYousays:当单独对组件进行... 查看详情

使用 Vuex 对 VueJS 组件进行单元测试时出错

】使用Vuex对VueJS组件进行单元测试时出错【英文标题】：ErrorinUnitTestVueJScomponentwithVuex【发布时间】：2017-07-2110:16:03【问题描述】：错误：undefined不是构造函数（正在评估\'vm.$el.querySelector(\'h3\')\'）按照我的代码和完整的codehere//ma... 查看详情

为啥 VueX 存储在多个单元测试中保留状态？

】为啥VueX存储在多个单元测试中保留状态？【英文标题】：WhydoesVueXstoreretainstateacrossmultipleunittests?为什么VueX存储在多个单元测试中保留状态？【发布时间】：2019-06-3014:27:43【问题描述】：我正在为分页模块编写单元测试，它有... 查看详情

打字稿中的单元测试vuex动作，如何传递这个值？

】打字稿中的单元测试vuex动作，如何传递这个值？【英文标题】：Unittestingvuexactionintypescript,howtopassthethisvalue?【发布时间】：2020-05-1717:01:15【问题描述】：我在typescript设置中使用Vuex，并且想要对动作进行单元测试，但在设置动... 查看详情

如何使用 Vue-test-utils 和 Jest 测试 Vuex 突变

】如何使用Vue-test-utils和Jest测试Vuex突变【英文标题】：HowtotestVuexMutationsusingVue-test-utilsandJest【发布时间】：2019-05-2803:01:30【问题描述】：我已经检查了至少一个tutorials的couple来模拟和测试Vuex动作，但我无法自己成功地实现它们... 查看详情

使用 Vuex 的 Vue.js-electron 应用程序的设置测试

...【问题描述】：我想设置以下组件并想对其运行以下基本单元测试。（我是Vue.js的新手，不确定哪些信息对解决我的问题很有价值。请询问其他特定代码部分是否可以帮助您。）用户信息.vue：<template><v- 查看详情

如何将 Jest 与 vuex-module-decorators 一起使用

...的代码运行良好，但是当我尝试使用vue-test-utils和jest编写单元测试 查看详情

在组件单元测试中模拟 Vuex 模块动作

】在组件单元测试中模拟Vuex模块动作【英文标题】：MockingVuexmoduleactionincomponentunittest【发布时间】：2018-12-2103:15:36【问题描述】：我目前正在尝试模拟商店模块中的操作。我似乎无法正确地存根它，因为我在单元测试中继续收... 查看详情

Vue 测试工具。 .vue 文件中使用了模拟 vuex，但 .ts 文件中使用了原始 vuex

】Vue测试工具。.vue文件中使用了模拟vuex，但.ts文件中使用了原始vuex【英文标题】：vue-test-utils.Mockedvuexisusedin.vuefile,butoriginalvuexisusedin.tsfile【发布时间】：2021-09-2817:40:36【问题描述】：我正在使用vue-test-utils测试我的vue项目。因... 查看详情

在 Vuex + Jest 中，如何对调用 store 的 getter 进行单元测试？

】在Vuex+Jest中，如何对调用store的getter进行单元测试？【英文标题】：InVuex+Jest,howtounittestagetterwhichiscallingthestore?【发布时间】：2018-08-1806:25:30【问题描述】：我正在尝试从我的vuex商店测试以下非常简单的getter。它只是连接两个... 查看详情

我们可以修改 Vuex 操作以进行开玩笑的单元测试吗？

】我们可以修改Vuex操作以进行开玩笑的单元测试吗？【英文标题】：CanwemodifyVuexactionforjestunittesting?【发布时间】：2019-09-2609:06:07【问题描述】：我在我的测试文件中创建了一个商店importshallowMount,createLocalVuefrom\'@vue/test-utils\'impor... 查看详情

如何对使用 Axios（或其他异步更新）的 Vue 组件进行单元测试？

】如何对使用Axios（或其他异步更新）的Vue组件进行单元测试？【英文标题】：HowtounittestVuecomponentthatusesAxios(orotherasyncupdate)?【发布时间】：2019-05-1609:25:02【问题描述】：我有一个Vue组件/视图，它使用Axios执行API请求并使用响应... 查看详情