Unit Test with external template file in Vue - vue.js

Question

I'm using vue-cli with webpack template, and when I split templates file in different files, and run npm run unit or yarn run unit, I get this error:
$ yarn run unit
yarn run v0.21.3
$ cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run
Hash: a52075458d6736c6b5a6
Version: webpack 2.4.1
Time: 2543ms
Asset Size Chunks Chunk Names
index.js 1.05 MB 0 [emitted] [big] index.js
chunk {0} index.js (index.js) 396 kB [entry] [rendered]
[0] ./src/components/Hello.vue 1.63 kB {0} [built]
[1] ./~/vue/dist/vue.esm.js 247 kB {0} [built]
[2] ./src/router/index.js 1.51 kB {0} [optional] [built]
[4] ./src/assets/logo.png 9.17 kB {0} [built]
[5] ./src/App.vue 1.56 kB {0} [optional] [built]
[8] (webpack)/buildin/global.js 509 bytes {0} [built]
[9] ./src ^\.\/(?!main(\.js)?$) 324 bytes {0} [built]
[10] ./test/unit/specs \.spec$ 177 bytes {0} [built]
[11] ./test/unit/index.js 452 bytes {0} [built]
[12] ./test/unit/specs/Hello.spec.js 573 bytes {0} [optional] [built]
[13] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 1.39 kB {0} [built]
[14] ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Hello.vue 1.79 kB {0} [built]
[24] ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-01ff506a","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 1.66 kB {0} [built]
[25] ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"id":"data-v-bef6f4c0","scoped":false,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 1.62 kB {0} [built]
[27] ./src/components/Hello.pug 239 bytes {0} [optional] [built] [failed] [1 error]
+ 13 hidden modules
WARNING in ./src/components/Hello.pug Module parse failed:
/home/jmanuelrosa/Developer/test-vue/src/components/Hello.pug
Unexpected token (1:0) You may need an appropriate loader to handle
this file type. | .hello | h1 {{ msg }} | h2 Essential Links #
./src ^./(?!main(.js)?$) # ./test/unit/index.js
I try it with the basic Hello example, and I get the same error. This is my component with pug template (I have pug installed too):
<template lang='pug' src='./Hello.pug'></template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
And pug template:
.hello
h1 {{ msg }}
h2 Essential Links
ul
li
a(href='https://vuejs.org', target='_blank') Core Docs
li
a(href='https://forum.vuejs.org', target='_blank') Forum
li
a(href='https://gitter.im/vuejs/vue', target='_blank') Gitter Chat
li
a(href='https://twitter.com/vuejs', target='_blank') Twitter
br
li
a(href='http://vuejs-templates.github.io/webpack/', target='_blank') Docs for This Template
h2 Ecosystem
ul
li
a(href='http://router.vuejs.org/', target='_blank') vue-router
li
a(href='http://vuex.vuejs.org/', target='_blank') vuex
li
a(href='http://vue-loader.vuejs.org/', target='_blank') vue-loader
li
a(href='https://github.com/vuejs/awesome-vue', target='_blank') awesome-vue
This issue it's related with #531
In this issue, the user say that solution is change extension, and use tpp.html, but, what is the difference with dev or environment? I'll need to install another plugin for karma?
Thanks !

Answer 1

I solve it adding more loaders :D
module: {
rules: [
{
test: /\.pug/,
use: [
'html-loader',
'pug-loader?sourceMap'
]
},
{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1
}
},
'postcss-loader'
]
}
}