正文 

当前位置： 首页 > 问答 >

使用 b 按钮“to”对 vue 路由进行单元测试

     2023-02-22     74

关键词：

【中文标题】使用 b 按钮“to”对 vue 路由进行单元测试【英文标题】：Unit testing vue routing with b-button "to" 【发布时间】：2020-03-22 03:04:09 【问题描述】：

我有一个包含来自 Vue Bootstrap 的 b 按钮组件的组件。在我的单元测试中，我想检查当我单击组件中的那个按钮时，我会被路由到我在传递给 b 按钮的“to”道具中指定的 url。

我的问题是在我的单元测试中没有触发路由。或者其中的 b-button / router-link 没有使用我的路由器实例。

我该如何测试呢？我什至需要吗？我已经简化了我的示例 - 我知道 b-button 自己的单元测试涵盖了“to”功能，但我想测试我是否将正确的 url 传递给它。

演示组件

<template>
    <b-card
        header="Button demo"
    >
        <b-button
            class="test"
            v-bind:to="toPath"
        >Test</b-button>
    </b-card>
</template>

<script>
export default 

    name: 'ButtonDemo',

    data()
        return 
            toPath: '/expected/path'
        
    


</script>

单元测试

import  mount, createLocalVue  from '@vue/test-utils'
import ButtonDemo from '@/path/to/ButtonDemo'
import BootstrapVue from 'bootstrap-vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'

const localVue = createLocalVue()

localVue.use(VueRouter)
const router = new VueRouter()

localVue.use(BootstrapVue)

describe('List', () => 

    let $wrapper

    test('Clicking "new" takes you to the create flow', async () => 

        $wrapper = mount(ButtonDemo,  localVue, router )

        $wrapper.find('.test').trigger('click')

        expect($wrapper.vm.$route.path).toBe('/expected/path')

    )

)

【问题讨论】：

【参考方案1】：

只需测试 b-button 上设置的 to 属性是否为预期值。

let button = $wrapper.find('.test')
expect(button.props('to')).toBe('/expected/path')

正如你所说，b-button 组件的单元测试应该已经涵盖了路由到给定路径的测试。

旁注：请考虑在单元测试中使用shallowMount 而不是mount。

【讨论】：

并且由于&lt;b-button&gt; 呈现&lt;router-link&gt;（进而呈现&lt;a&gt;），您可以检查href 属性以查看它的值是否符合您的预期路线的路径。 有道理-谢谢！ “mount”是我忘记更改的完整代码的剩余部分。 @Iainure 请考虑通过单击tick 图标来接受此答案，以便帮助社区中的其他人。 @AnkitKante - 会的。但我会在几天后接受答复，以便有时间进一步回复

iOS：使用 XCTest 对 UIViewController 组件进行单元测试

】iOS：使用XCTest对UIViewController组件进行单元测试【英文标题】：iOS:UnitTestingUIViewControllerComponentswithXCTest【发布时间】：2015-09-2109:43:31【问题描述】：我正在Swift的视图控制器中对iOSUIButton的功能进行单元测试。该按钮的预期功能... 查看详情

如何使用输入对 Angular 指令进行单元测试？

】如何使用输入对Angular指令进行单元测试？【英文标题】：HowtounittestanAngulardirectivewithanInput?【发布时间】：2020-02-2921:14:57【问题描述】：我使用copy-to-clipboard属性将以下指令添加到元素中，并在单击时将属性的内容复制到用户... 查看详情

如何对 Vue 组件的“v-show”属性进行单元测试

...如何测试这个？我一辈子都想不通。我尝试了以下方法（使用Jest 查看详情

Vue，vuex：如何使用命名空间存储和模拟对组件进行单元测试？

】Vue，vuex：如何使用命名空间存储和模拟对组件进行单元测试？【英文标题】：Vue,vuex:howtounittestacomponentwithnamespacedstoreandmocking?【发布时间】：2020-08-0909:03:44【问题描述】：我正在使用vue、vuex和vuetify构建登录组件。我决定在商... 查看详情

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

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

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

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

如何对使用 nuxt-i18n 的 Vue.js 组件进行单元测试

】如何对使用nuxt-i18n的Vue.js组件进行单元测试【英文标题】：HowtounittestVue.jscomponentsthatusenuxt-i18n【发布时间】：2019-06-2603:19:30【问题描述】：如果我尝试运行下面的东西（使用yarnrunjest），我会得到TypeError:_vm.$tisnotafunction，因为S... 查看详情

在 Laravel 中对控制器进行单元测试而不测试路由的最佳方法是啥

...】：2013-10-0212:19:33【问题描述】：我已经阅读了很多关于使用$this-&gt;call($destination 查看详情

Angular 2/4/6/7 - 使用路由器进行单元测试

】Angular2/4/6/7-使用路由器进行单元测试【英文标题】：HowcanIunittestacomponentthatusestheRouterinAngular?【发布时间】：2017-02-0901:07:30【问题描述】：在Angular2.0.0中，我正在对使用路由器的组件进行单元测试。但是我得到“提供的参数与... 查看详情

如何对依赖于 RC3 路由器的组件进行单元测试？

...：2016-11-0314:46:45【问题描述】：我正在尝试获取与RC1一起使用“新新”路由器的单元测试。我怎样才能在3.0.0-alpha.8上实现这一点？我的依赖："@angular/common":"2.0.0-rc.3","@angular/compiler 查看详情

如何使用使用 promise 的方法对 vuejs 组件更新进行单元测试

】如何使用使用promise的方法对vuejs组件更新进行单元测试【英文标题】：howtounittestavuejscomponentupdatewithmethodsusingpromise【发布时间】：2017-12-1616:29:16【问题描述】：我正在用Jest测试一个Vue组件。这是我的工作目录：这是我的组件Su... 查看详情

如何对 Vue 应用程序中的嵌套操作进行单元测试？

...-2122:48:05【问题描述】：我有一个基于TypeScript的Vue项目，使用Jest作为测试框架。我正在尝试测试的模块中有操作。我的操作如下所示：@Action()saveSomeData(payload:any):Promise<any> 查看详情

如何对将 DOM 元素附加到 HTML 正文的 Vue 组件进行单元测试？

...】：2018-06-1917:51:24【问题描述】：我有一个Vue2.0组件，它使用来自Vuetify的Menu组件。我正在使用官方vue-test-utils在测试期间挂载我的组件。我面临的问题是菜单组件将“菜单”附加到HTML正文（ 查看详情

使用 Jest 对 Vuetify 数据表进行单元测试

】使用Jest对Vuetify数据表进行单元测试【英文标题】：UnittestingaVuetifyDataTablewithJest【发布时间】：2020-08-1212:29:28【问题描述】：我已经使用Vuetify创建了一个Vue.js应用程序，现在我正在尝试对包含Vuetify数据表的组件进行单元测试... 查看详情

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

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

如何使用异步路由进行 Ember 单元测试？

】如何使用异步路由进行Ember单元测试？【英文标题】：HowtodoEmberunittestingwithasynchronousroutes?【发布时间】：2014-03-2808:18:18【问题描述】：我正在使用Ember.jsAsynchronousRouting指南中描述的功能。也就是说，我从我的异步路由的model挂... 查看详情

如何对第一个vue.js组件进行单元测试（下）(代码片段)

我们的首次测试让我们来写首个测试。我们首先需要使用shallowMount手动挂载我们的组件，并将其存储在我们将执行断言的变量中。我们还可以通过propsData属性传递道具作为对象。已安装的组件是一个对象，它有一些实用方法：然... 查看详情

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

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