单元测试 Vue JS 和 Vue 资源时状态不变

关键词：

【中文标题】单元测试 Vue JS 和 Vue 资源时状态不变【英文标题】：State not changing when unit testing VueJS and VueResource 【发布时间】：2016-12-21 07:03:18 【问题描述】：

我正在尝试测试我创建的使用 vue-resource 进行 API 调用的服务。该服务应该进行调用并使用新数据更新组件，但是在我的测试中它没有注册更新的值。我使用与vue-cli webpack 示例相同的设置，并且我的身份验证服务基于this repo（不幸的是没有任何测试）

我的服务：

export default 
   login(context, creds)
      context.$http.post(LOGIN_URL, creds)
        .then((response) => 
           //do something else here
        , (response) => 
           context.error = response.data.error
        
   

我的测试：

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
import Auth from 'src/auth'

describe('Auth', () => 
   it('should throw an error on unsuccessful login', (done) => 

     //intercept the api call and force an invalid response
     Vue.http.interceptors.unshift((request, next) => 
        next(request.respondWidth(error: 'some error', status: 401));
     );


     const vm = new Vue(
        data: 
           error: ''
        
     ).$mount()

     Auth.login(vm, email: 'test@test.com', pass: 'test' )

     //this always fails
     expect(vm.error).to.equal('some error')

     //ive also tried:
     vm.$nextTick(() => 
        expect(vm.error).to.equal('some error')
        //done()
     );

     //undo our interceptor
     Vue.http.interceptors.shift()

   

当我运行测试时它失败了，因为它期望 '' 等于 '一些错误'。

我的怀疑是 vue-resource 使用了 Promise。

【问题讨论】：

【参考方案1】：

在阅读了一些 Vue.js 测试后，我找到了答案。我没有使用 vm.$nextTick，而是执行了以下操作：

setTimeout(function()
   expect(vm.error).to.equal('something')
   done()
, 0)

【讨论】：

没有陷入 vue 错综复杂的深渊，我相信这是因为当您设置超时时，它会在其余代码之后运行，因为它位于调用堆栈的底部。因此，当它运行时，其他所有内容都已更新。那里有一些关于调用堆栈的很好的解释，应该可以澄清一下。

测试 Vue 组件 - 模拟状态和方法

...2019-03-0700:25:49【问题描述】：我一直在尝试对Vue组件进行单元测试，但我似乎无法完全弄清楚如何模拟/存根存储对象和调用异步API的方法。这是我们拥有的Vue组件的示例：importmapState,mapGettersfrom\'vuex\'importrouterfrom 查看详情

使用 Vue.js 学习 JEST：第一个示例测试时出错

...现它，该示例具有完整配置（babel、lint、vuex、vue-router、单元和e2e测试）vuecreatecli-tes 查看详情

如何对第一个vue.js组件进行单元测试（上）

首先，为什么要单元测试组件？　　单元测试是持续集成的关键。通过专注于小的、独立的实体，确保单元测试始终按预期运行，使代码更加可靠，你可以放心地迭代你的项目而不必担坏事儿。　　单元测试不仅限于脚本。可以... 查看详情

在vue-cli生成的项目中使用karma+chrome进行单元测试

用vue-cli生成项目时，如果选择了单元测试，那么会采用karma+mocha作为单元测试框架，默认使用的浏览器是PhantomJs。Karma是一个基于Node.js的JavaScript测试执行过程管理工具（TestRunner）。可启动所有主流Web浏览器作为测试容器，运行... 查看详情

在 Vue.js 中调度动作的单元测试方法

】在Vue.js中调度动作的单元测试方法【英文标题】：UnitTestingmethodswhichdispatchactionsinVue.js【发布时间】：2020-08-1520:26:52【问题描述】：我无法对组件中的方法进行单元测试，我想测试validations()、clear()和registerUser()方法，但我似乎... 查看详情

将 Vue.js 添加到 Rails 5.1 和 Mocha 中的单元测试不起作用

】将Vue.js添加到Rails5.1和Mocha中的单元测试不起作用【英文标题】：AddingVue.jsToRails5.1andUnitTestsinMochadon\'twork【发布时间】：2017-12-2312:09:34【问题描述】：此处提供回购：https://github.com/systemnate/vuetesting我通过运行命令rails_5.1.2_newvuet... 查看详情

第三十七篇vue(代码片段)

...ue应用的测试策略时，你应该利用以下几种测试类型：1、单元测试：检查给定函数、类或组合式函数的输入是否产生预期的输出或副作用。2、组件测试：检查你的组件是否正常挂载和渲染、是否可以与之互动，以及表现是否符... 查看详情

Vue.js - 具有复杂子项的单元测试组件

】Vue.js-具有复杂子项的单元测试组件【英文标题】：Vue.js-Unittestingcomponentwithcomplexchildren【发布时间】：2020-06-0914:43:12【问题描述】：让我们假设一个基本的Bootstrap驱动的HTML表单作为自定义Vue组件MyForm.vue的一部分<template><... 查看详情

如何在单元测试期间使用 vue-test-utils 和 jest 模拟 mixin？

】如何在单元测试期间使用vue-test-utils和jest模拟mixin？【英文标题】：Howtomockmixinduringunittestusingvue-test-utilsandjest?【发布时间】：2019-08-0719:55:35【问题描述】：我想在Test.vue中测试testMethod，但是testMethod使用了从App.js导入的mixin。Tes... 查看详情

Vue 和 Jest 单元测试组件

】Vue和Jest单元测试组件【英文标题】：VueandJestunittestingcomponents【发布时间】：2019-01-0209:17:46【问题描述】：我是Vuejs的新手，我开始使用Jest进行单元测试。我不知道从哪里以及如何开始。我有这段Vue代码，我想用Jest进行测试。... 查看详情

使用 Vue、Axios 和 Mocha 对 HTTP 请求进行单元测试

】使用Vue、Axios和Mocha对HTTP请求进行单元测试【英文标题】：UnittestingHTTPrequestwithVue,Axios,andMocha【发布时间】：2017-06-0523:48:03【问题描述】：我真的很难尝试使用Mocha/Chai-Sinon在VueJS中测试请求，使用Axios作为请求库，并尝试了Moxios... 查看详情

单元测试一个打字稿vue组件

】单元测试一个打字稿vue组件【英文标题】：Unittestatypescriptvuecomponent【发布时间】：2017-10-2608:38:27【问题描述】：我需要能够测试我的组件（方法、计算属性、数据……）。但是，当我在单元测试中导入我的vue组件时：importPagin... 查看详情

如何在 vue.js 单元测试中模拟 window.google

】如何在vue.js单元测试中模拟window.google【英文标题】：Howtomockwindow.googleinavue.jsunittest【发布时间】：2019-09-2122:10:14【问题描述】：我正在尝试测试一个显示谷歌地图的vue组件google包含脚本元素位于父组件中的某个位置，而我尝... 查看详情

带有函数调用的 vue.js 单元测试 v-slot

】带有函数调用的vue.js单元测试v-slot【英文标题】：vue.jsunittestv-slotwithfunctioncall【发布时间】：2020-08-2908:33:51【问题描述】：我将bootstrap-vue用于vue.jscss框架，并决定测试所需的组件。该组件使用b-table，并有一个带调用功能的v-sl... 查看详情

使用 Jest、Vue、Vuetify 和 Pug 运行单元测试

】使用Jest、Vue、Vuetify和Pug运行单元测试【英文标题】：RununittestwithJest,Vue,Vuetify,andPug【发布时间】：2020-07-3114:44:38【问题描述】：我目前正在开发一个项目，该项目使用Vue、基于类的组件、typescript、pug、vuetify和Jest进行单元测... 查看详情

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

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

在单元测试中使用模拟获取响应时，Vue 组件无法呈现

】在单元测试中使用模拟获取响应时，Vue组件无法呈现【英文标题】：Vuecomponentfailstorenderwhenusingmockedfetchresponseinunittest【发布时间】：2021-07-0717:22:33【问题描述】：我想根据API提供的数据测试BootstrapVue表是否正确呈现。作为其中... 查看详情

vue+element-ui单元测试出错。

参考技术Avue+element-ui当多个页面使用el-select时，使用单元测试测试所有页面时，出现错误。环境；vue：v2.5.1，element-ui：v2.7.0，karma：1.4.1，mocha：3.2.0修改vue和element-ui版本无效；修改单元测试插件，使用@vue/cli-plugin-unit-mocha无效。... 查看详情