Unit tests fail on separation of html from vue file

Setup

Module	Version
Node.js	6.9.2
npm	4.3
vue-cli	2.8.1
vue	2.1.10
webpack	2.2.1
babel	6.22

Issue details

Took a fresh copy of the webpack template and moved the html in vue file to different file:

<!-- src/components/Hello.vue -->
<template src="./hello.html">

</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>

<!-- src/components/hello.html -->
<div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
        <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
        <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
        <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
        <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
        <br>
        <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
        <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
        <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
        <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
        <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>
</div>

While running webpack, we get the warning:

WARNING in ./src/components/hello.html
Module parse failed: /home/suhas/Projects/mycode/vue-test/src/components/hello.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <div class="hello">
|     <h1>{{ msg }}</h1>
|     <h2>Essential Links</h2>
 @ ./src ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js

We also get a warning WARN [reporter]: SourceMap position not found for trace: undefined

Complete `npm run unit` output

> vue-test@1.0.0 unit /home/suhas/Projects/mycode/vue-test
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

Hash: b9f5465a9c850274ab28
Version: webpack 2.2.1
Time: 1844ms
   Asset    Size  Chunks                    Chunk Names
index.js  680 kB       0  [emitted]  [big]  index.js
chunk    {0} index.js (index.js) 253 kB [entry] [rendered]
    [0] ./src/components/Hello.vue 1.45 kB {0} [built]
    [1] ./src/router/index.js 1.12 kB {0} [optional] [built]
    [3] ./src/assets/logo.png 9.17 kB {0} [built]
    [4] ./src/App.vue 1.46 kB {0} [optional] [built]
    [7] ./~/vue/dist/vue.runtime.common.js 162 kB {0} [built]
    [8] ./~/function-bind/index.js 111 bytes {0} [built]
    [9] ./src ^\.\/(?!main(\.js)?$) 325 bytes {0} [built]
   [10] ./test/unit/specs \.spec$ 177 bytes {0} [built]
   [11] ./test/unit/specs/Hello.spec.js 344 bytes {0} [optional] [built]
   [16] ./~/function-bind/implementation.js 1.42 kB {0} [built]
   [18] ./~/vue-loader/lib/template-compiler.js?id=data-v-4c74d97c!./src/components/hello.html 2.13 kB {0} [built]
   [20] ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-0da8b164!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 1.34 kB {0} [built]
   [21] ./~/vue-style-loader!./~/css-loader!./~/vue-loader/lib/style-rewriter.js?id=data-v-4c74d97c&scoped=true!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Hello.vue 1.42 kB {0} [built]
   [24] ./src/components/hello.html 271 bytes {0} [optional] [built] [failed] [1 error]
   [25] ./test/unit/index.js 272 bytes {0} [built]
     + 11 hidden modules

WARNING in ./src/components/hello.html
Module parse failed: /home/suhas/Projects/mycode/vue-test/src/components/hello.html Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <div class="hello">
|     <h1>{{ msg }}</h1>
|     <h2>Essential Links</h2>
 @ ./src ^\.\/(?!main(\.js)?$)
 @ ./test/unit/index.js
18 02 2017 12:52:26.501:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
18 02 2017 12:52:26.503:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 02 2017 12:52:26.510:INFO [launcher]: Starting browser PhantomJS
18 02 2017 12:52:26.803:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket xeNY1WDvg0BIH7BZAAAA with id 58691659
PhantomJS 2.1.1 (Linux 0.0.0) INFO LOG: 'You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html'
18 02 2017 12:52:26.947:WARN [reporter]: SourceMap position not found for trace: undefined
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  Error: Module parse failed: /home/suhas/Projects/mycode/vue-test/src/components/hello.html Unexpected token (1:0)
  You may need an appropriate loader to handle this file type.
  | <div class="hello">
  |     <h1>{{ msg }}</h1>
  |     <h2>Essential Links</h2>
  at index.js:9538

PhantomJS 2.1.1 (Linux 0.0.0): Executed 0 of 0 ERROR (0.148 secs / 0 secs)

Expected output

> vue-test@1.0.0 unit /home/suhas/Projects/mycode/vue-test
> cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run

18 02 2017 13:08:00.221:INFO [karma]: Karma v1.4.1 server started at http://0.0.0.0:9876/
18 02 2017 13:08:00.224:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
18 02 2017 13:08:00.230:INFO [launcher]: Starting browser PhantomJS
18 02 2017 13:08:00.487:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket bu5qnN7DoGOrxJ62AAAA with id 59329966
PhantomJS 2.1.1 (Linux 0.0.0) INFO LOG: 'You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html'

  Hello.vue
    ✓ should render correct contents

PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 1 SUCCESS (0.001 secs / 0.006 secs)
TOTAL: 1 SUCCESS


=============================== Coverage summary ===============================
Statements   : 100% ( 2/2 )
Branches     : 100% ( 0/0 )
Functions    : 100% ( 0/0 )
Lines        : 100% ( 2/2 )
================================================================================

[georgwittberger]

Thanks for the hint, @Hanruis - the following adjustment in /test/unit/index.js (line 12) resolved the HTML import problems for me:

const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)(?!.+\.html$)/);

Simply added the negative lookahead (?!.+\.html$) at the end of the regex pattern.

[JonathanSpooner]

If you’re using vue-cli’s generated project you can change line 11 in webpack.test.conf.js to include an html-loader. The tests will run, however there’s some strange output which may or may not have to do with the new rule.

//line 11 webpack.test.conf.js rules: [...utils.styleLoaders(), {test: /\.html/, loader: 'html-loader'}]