My task involves investigating unit testing for JavaScript on an older application that does not utilize JS modules (import/export). The app contains JS object/prototypes in external .js files that are imported via script src, and more recently, some Vue 2 components in .vue files using PHP include('mycomponent.vue').
All the available examples for different unit testing frameworks assume the usage of JS modules. Can Vue be effectively tested without modules?
I am feeling a bit overwhelmed and would greatly appreciate any guidance, suggestions, or code samples related to testing.
Thank you for your assistance. It means a lot.
Below is a snippet of a sample component:
PHP view (.phtml)
<?php include 'mycomponent.vue' ?>
<script type="text/javascript">
Vue.use(Vuex);
Vue.use(BootstrapVue);
Vue.component('v-select', VueSelect.VueSelect);
const i18n = new VueI18n({
locale: 'en',
dateTimeFormats: {
en: {
long: {
year: 'numeric', month: 'long', day: 'numeric',
hour: 'numeric', minute: 'numeric',
timezone: 'EST',
},
},
},
messages: {
en: <?= json_encode([
'messages' => 'etc'
]) ?>,
}
});
const store = new Vuex.Store({
state: {
//etc
}
});
new Vue({
el: '#wrapper',
store,
i18n,
data() {
return <?= json_encode([
'something' = [
bits: 'Bob'
]
]) ?>;
},
});
</script>
<div id="wrapper" v-cloak>
<mycomponent
:something="something"
></mycomponent>
</div>
mycomponent.vue
<template id="mycomponent_tmpl">
<div>
{{currentMessage}}
</div>
</template>
<script>
Vue.component('mycomponent', {
template: '#mycomponent_tmpl',
props: {
something: {
type: Object,
required: true,
}
},
data() {
return {
this.message = 'Hello World'
}
},
created() {
},
mounted() {
},
watch: {
},
computed: {
currentMessage() {
return this.message + ' ' + this.something.bits;
}
},
methods: {
}
});
</script>