I'm trying to test a component that uses vuex inside it, I'm trying to pass the store of the respective component so that it can be assembled, but I'm getting the following error:
_vuex.default.store is not a constructor
I have no idea what's going on and I couldn't find anything on the internet to help me, if anyone can help me, I would be very grateful!
Spec file
import {shallowMount,createLocalVue} from '#vue/test-utils'
import Vuex from 'vuex'
import sateliteComponent from '#/components/satelite/listaSatelite.vue'
import sateliteStore from '#/core/modules/satelite/index.js'
var vueWithVuex = createLocalVue()
vueWithVuex.use(Vuex)
const store = new Vuex.store({
sateliteStore
})
describe('testes componente satelite', () => {
test('instanciado', () => {
const wrapper = shallowMount(sateliteComponent,{
localVue:vueWithVuex,
store
})
expect(wrapper.isVueInstance()).toBeTruthy()
});
});
if necessary, I can post my component that is being rendered
Correct with this:
const store = new Vuex.Store({
sateliteStore
})
It should be Vuex.Store check the capitalization of the word store.
For anyone else visiting:
Even with the right casing, this error can also come up if you try to use
new Vuex.Store()
before running
Vue.use(Vuex)
Related
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'
I'm using a custom test helper which requires access to the Ember data store, but I don't know how to access it from the given application argument.
export default registerAsyncHelper('myCustomHelper', function(app) {
console.log(app); // how to access store?
let store = app.__registry__.registrations['service:store'];
store.pushPayload(// json payload);
});
How can I get access to the store when registering a custom helper? I've been trying to figure out a way to access it from the __registry__.registrations['service:store'] key but that gives me an undefined value, when I can see that it's there and has the pushPayload function. Help would be greatly appreciated
Hah! I think I got it:
export default registerAsyncHelper('myCustomHelper', function(app) {
let instance = app.buildInstance();
let store = instance.lookup('service:store');
store.pushPayload(// json payload);
});
Not sure if that has any side effects though? Please let me know if it does, I think I've spent enough time trying to setup a good test environment already :p
This is typescript, but it should hopefully work the same in js (without the type annonations though)
// tests/helpers/get-service.ts
import { getContext } from "#ember/test-helpers";
export function getService<T>(name: string): T {
const { owner } = getContext();
const service = owner.lookup(`service:${name}`);
return service;
}
example usage:
// tests/helpers/create-current-user.ts
import { run } from '#ember/runloop';
import { DS } from 'ember-data';
import Identity from 'emberclear/data/models/identity/model';
import { getService } from './get-service';
export async function createCurrentUser(): Promise<Identity> {
const store = getService<DS.Store>('store');
const record = store.createRecord('identity', {
id: 'me', name: 'Test User'
});
await record.save();
return record;
}
this code is from https://emberclear.io
https://gitlab.com/NullVoxPopuli/emberclear/tree/master/packages/frontend/tests/helpers
hope this helps :)
In my component set
data(){
categories: this.$parent.categories => which I set in main.js
}
Code file main.js
import categories from '../config/categories';
new Vue({
router,
data: {
categories: categories
}
});
I created 1 function unit test
it(‘check component is a button’,() => {
const wrapper = shallow(FormSearch);
expect(wrapper.contains(‘button’)).toBe(true);
});
I run test then show error: Error in data(): "TypeError: Cannot read property ‘categories’ of undefined"
How to fix it. Help me.
Why not import you categories config file directly into your component?
import Categories from '../config/categories'
then your data method can directly access it:
data () { return { categories: Categories }}
You'll find that much easier to test
yes, thanks you. I changed. I run test then it happens error other
Cannot find module '../../config/categories' from 'mycomponet.vue'.
Although. I run project on browser just working well.
How to fix it. Thanks you very much
For Testing , you can set mock data to escape undefined error while testing . But it is not standard solution .....
it(‘check component is a button’,() => {
const wrapper = shallow(FormSearch);
let mockCategories = { // mock category data }
wrapper.$parent = {
categories: mockCategories
}
expect(wrapper.contains(‘button’)).toBe(true);
});
Try this approach:
const Parent = {
data: () => ({
val: true
}),
template: '<div />'
}
const wrapper = shallowMount(TestComponent, {
parent: Parent
})
I'm struggling with an error. It tooks me over 2 days and still no solution...
I'm using Ionic2 as a frontend and Horizon with RethinkDB as a backend. I have a table called 'messages' and few messages in it. I just want to get all these messages and show them on my HomePage.
Here is my code:
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
declare var Horizon;
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
test: any[];
constructor(public navCtrl: NavController) {
}
getMessages(){
let test = [];
let hz = new Horizon({host: 'localhost:3100'});
hz.connect();
let messages = hz('messages');
messages.watch().subscribe(messages => {
for(let i = 0; i<messages.length; i++){
console.log(messages[i].text);
console.log(messages[i].id);
this.test.push([{
text: messages[i].text,
id: messages[i].id
}])
}
});
}
}
I tried with many combinations of this.test.push but still no luck. I'm doing something wrong... Hope you guys help me!
The answer to this problem was just ensuring to reference the variable you think you're referencing.
this.test is undefined. Instead of let test = []; you should change it to this.test = [];.
Or you can change this.test.push(... to test.push(... and it should also work fine.
Being cautious when using this and juggling scope in Javascript is one of the trickiest parts of the language. I wish there was some indicator in the error as to what part in the chain is actually undefined as you thought .push was undefined on this.test where actually it was test which was undefined on the this object.
I have looked into react-intl for suggestions but it doesn't leave any explicit documentation for enzyme.
This is how I have been trying to write my tests.
import {IntlProvider} from 'react-intl';
const intlProvider = new IntlProvider({locale: 'en'}, {});
const intl = intlProvider.getChildContext();
const customMessage = shallow(<CustomMessage />, { options: { context: intl } });
But I keep getting the error
Invariant Violation: [React Intl] Could not find required intl object. needs to exist in the component ancestry.
I looked into their repo and they seems to have made it work with 'react-addons-test-utils'.
Am I doing something wrong?
I've posted an answer to a similar question:
Injecting react-intl object into mounted Enzyme components for testing
You would be able to import { shallowWithIntl } from 'intl-helper' and then use shallowWithIntl() instead of Enzyme's shallow().
I got it working by using
const customMessage = shallow(<CustomMessage />, { context: intl });
instead.
Thats how I achieve the things:
import React from 'react';
import StandardFilterIntl, {StandardFilter} from 'bundles/components/Filter/StandardFilter';
import {mountWithIntl} from 'enzyme-react-intl';
const FilterComponent = mountWithIntl(<StandardFilterIntl {...standardFilterProps} />);
FilterComponent.find(StandardFilter).state()