正文 

当前位置： 首页 > 问答 >

使用Vue组件的mocha进行单元测试时基类中的方法不存在

     2023-02-22     103

关键词：

【中文标题】使用Vue组件的mocha进行单元测试时基类中的方法不存在【英文标题】：Method in base class does not exist during unit testing with mocha of Vue component 【发布时间】：2019-08-21 02:18:50 【问题描述】：

当我在 Vue 中有一个从基类扩展的组件时，它可以在浏览器的运行时运行，正如预期的那样。但是当使用 mocha 进行单元测试时，基类上的方法消失了。在下面的简单示例中，这会导致错误 TypeError: this.methodInBaseClass is not a function。但是在运行时它可以工作，然后显示消息Some other data，正如我所期望的那样。

出了什么问题？更重要的是，如何解决？

考虑这个简单的 Vue 组件：

<template>
    <div> myData </div>
</template>

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator';
import BaseClass from '@/components/BaseClass.vue';

@Component
export default class HelloWorld extends BaseClass 
    @Prop() private msg!: string;

    private created(): void 
        this.methodInBaseClass();
    

</script>

和基类

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator';
export default class BaseClass extends Vue 
    protected myData: string = 'Some data';

    protected methodInBaseClass(): void 
        this.myData = 'Some other data';
    

</script>

和单元测试

import  expect  from 'chai';
import  shallowMount  from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';

describe('HelloWorld.vue', () => 
    it('Data is mutated', () => 
        const wrapper = shallowMount(HelloWorld);
        expect(wrapper.html()).to.include('Some other data');
    );
);

【问题讨论】：

【参考方案1】：

您需要将Component 装饰器添加到基类中，以便方法methodInBaseClass 可以声明为vue-object 方法：

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator';
@Component
export default class BaseClass extends Vue 
    protected myData: string = 'Some data';

    protected methodInBaseClass(): void 
        this.myData = 'Some other data';
    

</script>

【讨论】：

是的，这行得通。伟大的。谢谢。但是当我使基类抽象时，我不能再将@Component 放在类上。但是，我将使用throw new Error('Not implemented'); 或其他方法作为解决方法，而不是抽象类。我仍然不明白为什么它在运行时有效，但在单元测试中无效。【参考方案2】：

如果您想在抽象类上使用 Component 装饰器，您可以使用以下技巧。

创建一个新的AbstractComponent装饰器：

import  Component  from 'vue-property-decorator';
export default function AbstractComponent(v: any) 
    return Component(v);

您将能够在抽象类上使用 AbstractComponent 装饰器并获得与 Component 装饰器相同的功能。

【讨论】：

使用 Jest 在 Vue 中为组件中的方法编写单元测试

】使用Jest在Vue中为组件中的方法编写单元测试【英文标题】：WriteunittestforamethodinacomponentinVuewithJest【发布时间】：2021-09-0517:57:36【问题描述】：我开始使用JestVue进行单元测试。我想测试一个Vue组件中的现有方法，我写了一个测... 查看详情

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

...0-1612:51:14【问题描述】：我正在构建一个新的Vue组件，它使用命名空间的Vuexgetter来访问列名列表。实际的组件编译并运行。在我的Mocha单元测试中，我创建了一个模拟的getter，它返回一个名为“allColumns”的字 查看详情

Vue 和 Jest 单元测试组件

...：2019-01-0209:17:46【问题描述】：我是Vuejs的新手，我开始使用Jest进行单元测试。我不知道从哪里以及如何开始。我有这段Vue代码，我想用Jest进行测试。任何提示或想法我都会非常感激。我读到我应该使用Vuetest-utils中的shallowMount... 查看详情

如何在 mocha 单元测试中使用猫鼬？

】如何在mocha单元测试中使用猫鼬？【英文标题】：Howtousemongooseinmochaunittest?【发布时间】：2014-10-1207:28:04【问题描述】：感觉很迷茫，怎么单元测试涉及到mocha中的mongodb，我还是不能成功调用save函数，没有抛出异常。我尝试用... 查看详情

mocha 单元测试中的 Highchart 导入错误

...加载到浏览器之外。我们的代码repro是Typescript，因此我们使用ts-node转译为commo 查看详情

使用 Mocha 和 Node.js 对私有函数进行单元测试

】使用Mocha和Node.js对私有函数进行单元测试【英文标题】：UnittestingofprivatefunctionswithMochaandNode.js【发布时间】：2014-04-0114:23:03【问题描述】：我正在使用Mocha来对为Node.js编写的应用程序进行单元测试。我想知道是否可以对尚未在... 查看详情

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

】使用b按钮“to”对vue路由进行单元测试【英文标题】：Unittestingvueroutingwithb-button"to"【发布时间】：2020-03-2203:04:09【问题描述】：我有一个包含来自VueBootstrap的b按钮组件的组件。在我的单元测试中，我想检查当我单击组... 查看详情

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

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

将 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... 查看详情

使用来自 WebPack.DefinePlugin 的全局注入变量进行 NodeJS Mocha 单元测试

】使用来自WebPack.DefinePlugin的全局注入变量进行NodeJSMocha单元测试【英文标题】：NodeJSMochaunittestingwithglobalinjectedvariablesfromWebPack.DefinePlugin【发布时间】：2018-11-2920:44:45【问题描述】：通过WebPack.DefinePlugin注入的全局变量似乎与我... 查看详情

如何使用 Visual Studio Code 中的 Mocha 调试 Typescript 编写的单元测试

】如何使用VisualStudioCode中的Mocha调试Typescript编写的单元测试【英文标题】：HowtodebugunittestswritteninTypescriptwithMochafromVisualStudioCode【发布时间】：2017-08-1806:00:22【问题描述】：我编写了一个Typescript库。单元测试也是使用Mocha框架用T... 查看详情

使用javascript与mocha和sinon进行单元测试问题

我正在尝试使用mocha和sinon来测试使用AWS服务的一段代码。代码下方：exports.init=({athenaClient})=>{constcommand={};command.execute=sqlCommand=>{constparams={QueryString:sqlCommand,QueryExecutionContext:{Database:process.en 查看详情

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

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

如何在 Typescript 中对私有方法进行单元测试

】如何在Typescript中对私有方法进行单元测试【英文标题】：HowtounittestprivatemethodsinTypescript【发布时间】：2018-08-0101:37:56【问题描述】：当我尝试对类中的私有方法进行单元测试时，由于私有方法只能在类中访问而出错。在这里... 查看详情

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

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

使用 typescript/mocha 进行单元测试时找不到模块

】使用typescript/mocha进行单元测试时找不到模块【英文标题】：Modulenotfoundwhendoingunittestwithtypescrit/mocha【发布时间】：2018-05-0113:38:00【问题描述】：我对Typescript还很陌生，并试图按照本教程建立一个项目：http://mherman.org/blog/2016/11/... 查看详情

如何使用 mocha sinon 存根对请求库进行单元测试？

】如何使用mochasinon存根对请求库进行单元测试？【英文标题】：HowtounittestRequestlibrarywithmochasinonstub?【发布时间】：2021-11-2618:37:36【问题描述】：如何使用Mocha、sinon和chai测试NPM请求库？我得到一个Error:getaddrinfoENOTFOUND。URL应该无... 查看详情

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

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