I'm relatively new to developing with VueJS and testing with Mocha (being used headlessly) and I'm intentionally not using vue-cli to get a better understanding of how everything works. I have a suit of unit tests that function fairly well (fetch requests, getting/setting props, etc), up until the point where I need to check something in the DOM. It appears that the components are being successfully created, but they are not being mounted to an element.
I'm using JSDom to create a DOM context for the headless tests, as can be seen in my _setup.js:
global.Vue = require('vue/dist/vue');
require('jsdom-global')('<html><head></head><body><main id="MyApp"></main></body>');
In these cases, $el is undefined, despite the fact the above-defined DOM elements can be found:
app.spec.js
import assert from 'assert';
import app from '../src/js/app.vue';
describe('app.vue', function() {
describe('#created', function() {
it('should initialize the application', function() {
const vEl = document.getElementById('MyApp');
const vm = new Vue({el: vEl}).$mount();
console.log(vEl); // HTMLElement {}
console.log(vm.$el); // undefined
assert(true); // pass anyway for now
});
});
});
myComp.spec.js:
import assert from 'assert';
import header from '../src/js/components/myComp.vue';
describe('myComp.vue', function() {
describe('#created', function() {
it('should initialize the component', function() {
const Constructor = Vue.extend(myComp);
const comp = new Constructor({
propsData: {
someProp: 'hello world'
}
}).$mount();
console.log(document.getElementById('MyApp')); // HTMLElement {}
console.log(comp.$el) // undefined
assert(true);
});
});
});
Note that if I change the element's ID to something that doesn't exist when doing getElementById, I get the following error - which to me it would imply that it has a handle on the element when using the correct ID:
// document.getElementById('IDontExist');
[Vue warn]: Failed to mount component: template or render function not defined.
Note that my component definition is a little different since I'm going for a bare-bones approach and not using vue-cli. Examples (some code omitted for brevity):
app.vue
import myComp from './components/myComp.vue';
let app = new Vue({
el: '#MyApp',
data: {
someProp: 'hello world'
},
created: function() {},
methods: {}
});
export {app};
myComp.vue
export default Vue.component('my-comp', {
props: ['someProp'],
data: function() {},
created: {},
watch: {},
methods: {},
template: `<div></div>`
});
I have a feeling I'm overlooking something pretty simple regarding how to wire up the component mounting to the DOM, or accessing the component (but it seems to be in line with the docs). Any ideas?
Aucun commentaire:
Enregistrer un commentaire