I am currently developing a web application using VueJs and attempting to set up unit tests for it. I took inspiration from the unit-tests in vue-mdl. However, I am encountering difficulties as the tests are not running properly for my code. The issue arises when I try to access vm.$el, which returns undefined, hindering my progress.
Below is the component that I am trying to test:
Confirmation.vue
<template>
<div>
Your order has been confirmed with the following details.
</div>
</template>
<script type="text/javascript">
export default {
data () {
return {
data_from_pg: null
}
}
}
</script>
Here is the failing test for the component:
Confirmation.spec.js
import Confirmation from 'src/components/Confirmation'
import { vueTest } from '../../utils'
describe('Confirmation', () => {
let vm
let confirmation
before(() => {
vm = vueTest(Confirmation)
console.log('vm.$el ' + vm.$el) => this prints undefined
confirmation = vm.$el.querySelector('#confirmation') => so this line gives error
// confirmation = vm.$('#confirmation')
})
it('exists', () => {
confirmation.should.exist
confirmation.should.be.visible
})
})
utils.js
export function vueTest (Component) {
const Class = Vue.extend(Component)
Class.prototype.$ = function (selector) {
return this.$el.querySelector(selector)
}
Class.prototype.nextTick = function () {
return new Promise((resolve) => {
this.$nextTick(resolve)
})
}
const vm = new Class({
replace: false,
el: 'body'
})
return vm
}
You can find the complete code here, along with all the test configurations that I have attempted to modify multiple times without success. If you spot any errors or have any suggestions on how to resolve the issue, please do let me know. Thank you.