Creating a custom Vue plugin was essential for me, which establishes a global property on Vue in this way:
function (Vue, options) {
Vue.$detector = new TranslatableStringDetector();
}
Utilizing it within a computed property in my component is done like so:
export default {
// ...
computed: {
decoratedProfileName () {
return this.$detector.decorate(this.$props.profileName);
}
}
// ...
}
Setting it up in the Karma/Mocha test looks like this:
before(() => {
const localVue = createLocalVue();
localVue.use(Vuex);
localVue.use(TranslationDetector);
store = new Vuex.Store(cloneDeep(storeDefinition));
store.commit(SET_USER_DATA, userData);
wrapper = shallowMount(Avatar, {
localVue,
store,
propsData: {
id: 0,
inputElPrio: 2,
profileName: 'Default'
}
});
});
The error occurs during shallowMount() with the following message:
[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'decorate' of undefined"
TypeError: Cannot read property 'decorate' of undefined
at VueComponent.decoratedProfileName (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:132143:35)
at Watcher.get (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:71415:25)
[... more errors ...]
[Vue warn]: Error in render: "TypeError: Cannot read property 'decorate' of undefined"
found in
---> <Avatar> at src/components/controls/Avatar.vue
<Root>
TypeError: Cannot read property 'decorate' of undefined
at VueComponent.decoratedProfileName (http://localhost:9877/base/index.js?22adbcd7eb33d018f956122e913fca2646b1c60b:132143:35)
[... more errors ...]
This inconsistency has left me puzzled. Despite verifying that localVue.$detector is properly configured using console.debug(), I still face issues accessing it as this.$detector within my component. This leads to an unexpected "undefined" result in scenarios such as:
export default {
// ...
created: function () {
console.debug(this.$detector);
}
// ...
}