Vue中带有外部模板文件的单元测试

Question

我正在将vue cli与webpack模板一起使用，当我将模板文件拆分到不同的文件中，并运行npm run unit或warn run unit时，会出现以下错误：

$ 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

警告。/src/组件/Hello.pug模块解析失败： /home/jmanuelrosa/Developer/test-vue/src/components/Hello.pug意外令牌（1:0）您可能需要适当的加载器来处理此文件类型。|. hello|h1{{msg}}|h2 Essential Links@./src ^. /(?! main（. js)? $) @ ./test/Unit/index.js

我尝试使用基本的Hello示例，得到了相同的错误。我已经安装了pug（我的模板也安装了pug）：

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

和哈巴狗模板：

.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

这个问题与#531有关

在这个问题上，用户说解决方案是更改扩展，并使用tpp.html，但是，与开发或环境有什么区别？我需要为因果报应安装另一个插件？

谢啦！

Answer 1

我解决它添加更多的装载机： D

module: {
  rules: [
    {
      test: /\.pug/,
      use: [
        'html-loader',
        'pug-loader?sourceMap'
      ]
    },
    {
      test: /\.css$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },
        'postcss-loader'
      ]
    }
}