Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
721 views
in Technique[技术] by (71.8m points)

unit-testing - Mocha Chai Vue测试Vue组件:this。$ notify不是函数(Mocha Chai vue testing a vue component : this.$notify is not a function)

I'm using this component : https://github.com/euvl/vue-notification

(我正在使用这个组件: https : //github.com/euvl/vue-notification)

Since then, all of my Mocha chai test units are failing .

(从那以后,我所有的摩卡(mocha)柴测试单元都失败了。)

this.$notify is not a function

This is my login spec :

(这是我的登录规范:)

// Importing The testing library 
import { expect } from "chai";
import { mount } from '@vue/test-utils'

// Importing  The component I need to test
import Login from "@/components/Login.vue";


// Mounting the component as in real life 
const wrapper = mount(Login);


describe("Login test", () => {

  it("getAuth() to be a function", () => {
    expect(wrapper.vm.getAuth).to.be.a("function");
  });

});

I've tried out mount, shallowMount, render with no luck .

(我已经尝试过mount,movemount,没有运气了。)

Any workaround ?

(任何解决方法?)

I'm calling vue-notification in main.js like this :

(我在main.js中这样调用vue-notification:)

import Notifications from "vue-notification";
Vue.use(Notifications);

Thank you !

(谢谢 !)

EDIT : Ive tried to add

(编辑:香港专业教育学院试图添加)

const $notify = require('vue-notification')

To my Login.vue component with no luck

(到我的Login.vue组件没有运气)

EDIT 2 : Tried to call the function like this with no luck :

(编辑2:尝试没有运气调用这样的函数:)

 this.$root.$notify({
        group: 'foo',
        title: 'Hello ',
        text: 'Cool'
        });

[Vue warn]: Error in mounted hook: "TypeError: this.$root.$notify is not a function"
  ask by harmonius cool translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

*EDIT : ***** Resolved by me ****** * I was badly importing vue .

(*编辑:*****由我解决*******我严重导入了vue。)

Please see my working login.spec.js testing file there :

(请在此处查看我的工作login.spec.js测试文件:)

// THE ASSERTION LIBRARY
import { expect } from "chai";

// THE TESTING LIBRARY
import { mount } from "@vue/test-utils";

// THE COMPONENT THAT I WANT TO TEST
import Login from "@/components/Login.vue";

// THE EXTERNAL COMPONENTS LINKED TO MY LOGIN COMPONENT  THAT I NEED TO JOIN
import Vue from 'vue';
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
 import {
    required,
    minLength,
    between
} from "vuelidate/lib/validators";
import Notifications from "vue-notification";
import velocity      from 'velocity-animate'
Vue.use(Notifications, { velocity });


// THE WRAPPER CONTAIN MY LOGIN MOUNTED COMPONENT, JUST LIKE IN THE REAL LIFE
const wrapper = mount(Login)

describe("Login test", () => {

  it("getAuth() to be a function", () => {
    expect(wrapper.vm.getAuth).to.be.a("function");
  });

});

成功的结果


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...