Unit Test with external template file in Vue

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 !

jmanuelrosa jmanuelrosa · Accepted Answer · 2017-04-24T07:19:49

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'
      ]
    }
}

Unit Test with external template file in Vue

1 Answers