I got this error when I try to run a test on bootstrap vue components:
"ReferenceError: BootstrapVue is not defined"
In the .spec.js file I added this:
import TableSummary from "#/components/TableSummary";
import { createLocalVue, mount } from "#vue/test-utils";
const localVue = createLocalVue();
localVue.use(BootstrapVue);
describe('TableSummary', ()=> {
test('if the user is typing, the button becomes enabled', async ()=> {
const wrapper = mount(TableSummary, { localVue });
wrapper.setData({isDisabled: true});
await wrapper.vm.$nextTick;
expect(wrapper.find('input').state.isDisabled).toBe(false);
});
});
I ran the same instructions as a correct answer here on stack overflow but still, it doesn't work for me... I couldn't comment on the answer as I am not level 50, and I had to open a new question.
I think you need to import the BootstrapVue
import BootstrapVue from 'bootstrap-vue'
Related
I follow the AppLoading component installation from expo documentation but, Whenever I lunch my app on my real device in Expo go it will get stuck on the splash screen it doesn't show me any error in the console. below is my App.js file also, I have researched all the neccesary blogs and developers forums out there but still can't find a solution to this problem.
I Knew it was the AppLoading Component that is causing the problem because when I use useEffect hook the problem go away but my app performs poorly because I need to add AppLoading for better loading performances.
App.js
import React, { useState } from 'react';
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import AppLoading from 'expo-app-loading';
import AuthNavigator from './app/Navigation/AuthNavigator';
import navigationTheme from './app/Navigation/navigationTheme';
import AppNavigator from './app/Navigation/AppNavigator';
import OfflineNotice from './app/components/OfflineNotice';
import AuthContext from './app/auth/context';
import authStorage from './app/auth/storage';
import jwtDecode from 'jwt-decode';
import AsyncStorage from '#react-native-async-storage/async-storage';
import { useEffect } from 'react/cjs/react.development';
export default function App() {
const [user, setUser] = useState();
const [isReady, setIsReady] = useState(false);
const restoreToken = async() => {
const token = await authStorage.getToken();
if (!token) return;
setUser(jwtDecode(token));
}
if (!isReady)
return (
<AppLoading startAysnc={restoreToken}
onFinish={() => setIsReady(true)}
/>
);
console.log("hi");
// useEffect(() => {
// restoreToken();
// },[])
return (
<AuthContext.Provider value={{user,setUser}}>
<OfflineNotice />
<NavigationContainer theme={navigationTheme}>
{user ?<AppNavigator/>:<AuthNavigator/>}
</NavigationContainer>
</AuthContext.Provider>
);
}
When I run this code:
import { NestFactory } from '#nestjs/core';
import { AppModule } from './app.module';
import cookieParser from 'cookie-parser';
async function bootstrap() {
const app = await NestFactory.create(AppModule);
app.use(cookieParser());
await app.listen(3000);
}
bootstrap();
I get:
(node:28) UnhandledPromiseRejectionWarning: TypeError: cookie_parser_1.default is not a function
at bootstrap (/usr/src/app/dist/main.js:8:36)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
If I comment out "app.use(cookieParser());" the problem goes away, but I need the cookie parser.
I literally found this as I was about to hit submit.
Modify the above to have
import * as cookieParser from 'cookie-parser';
and it works as expected.
I've used aws-sdk npm package in my vuejs app - app.vue file
//App.vue
created() {
const value = AWS.config.credentials;
}
and while write test for this file like below
//App.spec.js
import { mount, createLocalVue } from '#vue/test-utils';
import AWS from 'aws-sdk-mock';
import App from 'src/App.vue';
const localVue = createLocalVue();
localVue.use(AWS);
describe('App.vue', () => {
it('renders app content', () => {
const wrapper = mount(App, {
localVue,
});
expect(wrapper.isVueInstance()).toBeTruthy();
});
}
and ran the test and got the error
App.vue › renders app content
ReferenceError: AWS is not defined
Kindly let me know if you have any idea or any issues same like this.
EDIT:
AWS is defined globally in main.js
//main.js
import Vue from 'vue';
import AWS from 'aws-sdk';
Vue.use(AWS);
new Vue({
render: (h) => h(App),
}).$mount('#app');
I'm using this component : https://github.com/euvl/vue-notification
Since then, all of my Mocha chai test units are failing .
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 .
Any workaround ?
I'm calling vue-notification in main.js like this :
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
EDIT 2 : Tried to call the function like this with no luck :
this.$root.$notify({
group: 'foo',
title: 'Hello ',
text: 'Cool'
});
[Vue warn]: Error in mounted hook: "TypeError: this.$root.$notify is not a function"
*EDIT : ***** Resolved by me ****** *
I was badly importing vue . Please see my working login.spec.js testing file there :
// 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");
});
});
We are using vuejs, typescript, vuex and jest. We are currently using test-utils to mock the store.
But I cannot find out how to mock a call to this.$parent.$on
Here is one of our components (very simplified):
AnalysisList.ts:
import Component from 'vue-class-component'
import {Getter} from 'vuex-class'
import {UserVO} from '#/valueObjects/UserVO'
import {Vue} from 'vue-property-decorator'
#Component
export default class AnalysisList extends Vue {
#Getter('getCurrentUser') private currentUser: UserVO
private searchString = ''
public mounted() {
this.$parent.$on('resetAnalyses', this.reset)
}
public reset() {
this.searchString = ''
}
}
AnalysisList.vue:
<template lang="pug">
text test
</template>
<script lang="ts" src="./AnalysisList.ts">
</script>
AnalysisList.spec.ts:
import {shallowMount} from '#vue/test-utils'
import AnalysisList from '#/components/analysis/AnalysisList'
import Vuex from 'vuex'
import {Vue} from 'vue-property-decorator'
import VueRouter from 'vue-router'
Vue.use(Vuex)
Vue.use(VueRouter)
describe('AnalysisList.vue', () => {
const store = new Vuex.Store( {
modules: {
user: {
state: {currentUser: 'test'},
getters: {
getCurrentUser: (state: any) => state.currentUser,
},
},
},
})
it('minimum test', (done) => {
const wrapper = shallowMount(AnalysisList, {store})
done()
})
})
When I run the test, I have the following error message, because $parent is not mocked:
TypeError: Cannot read property '$on' of undefined
at VueComponent.mounted (src/components/analysis/AnalysisList/AnalysisList.vue:73:20)
at callHook (node_modules/vue/dist/vue.runtime.common.js:2919:21)
at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2800:5)
at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
at mount (node_modules/#vue/test-utils/dist/vue-test-utils.js:5381:8)
at shallowMount (node_modules/#vue/test-utils/dist/vue-test-utils.js:5414:10)
at Object.done (tests/unit/AnalysisList.spec.ts:20:53)
If I try to add a new property to shallowMount parameter:
const wrapper = shallowMount(AnalysisList, {store, parent: {$on: ()=>{}}})
I obtain a type error:
TS2345: Argument of type 'VueConstructor<Vue>' is not assignable to parameter of type 'FunctionalComponentOptions<Record<string, any>, PropsDefinition<Record<string, any>>>'. Property 'functional' is missing in type 'VueConstructor<Vue>'.
Do you have any clue to help me mock this.$parent.$on ? Thanks.
I got the same issue with vue-test-utils and Jest (under the Vue, Vuex and Typescript environment)
For me, createLocalVue() of vue-test-utils library fixed the issue. This function creates a local copy of Vue to use when mounting the component. Installing plugins on this copy of Vue prevents polluting the original Vue copy. (https://vue-test-utils.vuejs.org/api/options.html#localvue)
Adding this to my test file fixed the issue:
const EventBus = new Vue();
const GlobalPlugins = {
install(v) {
// Event bus
v.prototype.$bus = EventBus;
},
};
// create a local instance of the global bus
const localVue = createLocalVue();
localVue.use(GlobalPlugins);
Hope this helps others, thanks :)