关键词：
【中文标题】在 Vue 中使用外部模板文件进行单元测试【英文标题】：Unit Test with external template file in Vue 【发布时间】：2017-09-20 02:05:27 【问题描述】：我正在使用带有 webpack 模板的 vue-cli，当我将模板文件拆分为不同的文件并运行 npm run unit 或 yarn 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/components/Hello.pug 中的警告模块解析失败： /home/jmanuelrosa/Developer/test-vue/src/components/Hello.pug Unexpected token (1:0) 你可能需要一个合适的加载器来处理 这种文件类型。 | .你好 | h1 味精 | h2 基本链接@ ./src ^./(?!main(.js)?$) @ ./test/unit/index.js
我尝试使用基本的 Hello 示例，但我得到了同样的错误。这是我的带有哈巴狗模板的组件（我也安装了哈巴狗）：
<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，但是，与 dev 或 environment 有什么区别？我需要为业力安装另一个插件吗？
谢谢！
【问题讨论】：
【参考方案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'
]
【讨论】：
单元测试 Freemarker 模板
...描述】：我有一个要为其创建测试的Freemarker模板。测试使用一些模拟信息呈现freemarker模板。我想将模板渲染到外部文件，以便我可以观察结果（确保html对齐等）。我正在为这个项目使用传统的maven项目结构。有人对从我的单元... 查看详情
java应用xviii在java中使用junit5进行单元测试和自动化测试
...nit5是Java中流行的单元测试框架，本文将介绍如何在Java中使用JUnit5进行单元测试和自动化测试。二、单元测试2.1单元测试的基本概念和原理单元测试是一种测试方法，用于对软件系统中的最小可测试单元进行测试。这些单元通常... 查看详情
在vue-cli生成的项目中使用karma+chrome进行单元测试
...单元测试，那么会采用karma+mocha作为单元测试框架，默认使用的浏览器是PhantomJs。Karma是一个基于Node.js的JavaScript测试执行过程管理工具（TestRunner）。可启动所有主流Web浏览器作为测试容器，运行时会启动一个web服务器，生成包... 查看详情
单元测试-桩对象
...件系统、线程、内存、时间、数据库结果集等，这时可以使用伪对象(fake)来替代外部依赖，桩对象(stub)便是其中之一 一桩对象a)桩对象是对系统中现有依赖项的一个替代品，可人为控制。通过使用桩对象，无需涉及依赖项，... 查看详情
使用 Jest 在 Vue 中为组件中的方法编写单元测试
】使用Jest在Vue中为组件中的方法编写单元测试【英文标题】：WriteunittestforamethodinacomponentinVuewithJest【发布时间】：2021-09-0517:57:36【问题描述】：我开始使用JestVue进行单元测试。我想测试一个Vue组件中的现有方法，我写了一个测... 查看详情
使用 b 按钮“to”对 vue 路由进行单元测试
】使用b按钮“to”对vue路由进行单元测试【英文标题】：Unittestingvueroutingwithb-button"to"【发布时间】：2020-03-2203:04:09【问题描述】：我有一个包含来自VueBootstrap的b按钮组件的组件。在我的单元测试中，我想检查当我单击组... 查看详情
如何对使用 Axios（或其他异步更新）的 Vue 组件进行单元测试？
】如何对使用Axios（或其他异步更新）的Vue组件进行单元测试？【英文标题】：HowtounittestVuecomponentthatusesAxios(orotherasyncupdate)?【发布时间】：2019-05-1609:25:02【问题描述】：我有一个Vue组件/视图，它使用Axios执行API请求并使用响应... 查看详情
如何在单元测试期间访问 .war 类路径中的文件？
...【问题描述】：我有一个Web应用程序项目，我正在尝试对使用FreeMarker模板创建文件的方法进行单元测试。我的方法createFile()应该采用MyFile类型-包含要创建的文件名和FreeMarker需要的rootMap 查看详情
Vue，vuex：如何使用命名空间存储和模拟对组件进行单元测试？
】Vue，vuex：如何使用命名空间存储和模拟对组件进行单元测试？【英文标题】：Vue,vuex:howtounittestacomponentwithnamespacedstoreandmocking?【发布时间】：2020-08-0909:03:44【问题描述】：我正在使用vue、vuex和vuetify构建登录组件。我决定在商... 查看详情
使用 axios、TypeScript 模板和异步函数对 VueJS 进行单元测试
】使用axios、TypeScript模板和异步函数对VueJS进行单元测试【英文标题】：UnittestingVueJSwithaxios,TypeScripttemplate,andasyncfunctions【发布时间】：2019-04-1721:41:59【问题描述】：我正在尝试对在其mounted()挂钩中进行HTTP调用的组件进行单元测... 查看详情
使用 Vue、Axios 和 Mocha 对 HTTP 请求进行单元测试
】使用Vue、Axios和Mocha对HTTP请求进行单元测试【英文标题】：UnittestingHTTPrequestwithVue,Axios,andMocha【发布时间】：2017-06-0523:48:03【问题描述】：我真的很难尝试使用Mocha/Chai-Sinon在VueJS中测试请求，使用Axios作为请求库，并尝试了Moxios... 查看详情
使用Vue组件的mocha进行单元测试时基类中的方法不存在
】使用Vue组件的mocha进行单元测试时基类中的方法不存在【英文标题】：MethodinbaseclassdoesnotexistduringunittestingwithmochaofVuecomponent【发布时间】：2019-08-2102:18:50【问题描述】：当我在Vue中有一个从基类扩展的组件时，它可以在浏览器... 查看详情
在Vue中添加外部配置文件进行部署？
】在Vue中添加外部配置文件进行部署？【英文标题】：AddanexternalconfigurationfileinVuefordeployment?【发布时间】：2021-10-0308:53:26【问题描述】：我必须调用API(json-server)来检索数据，以便在我的Vue应用程序中填充我的下拉菜单。我想创... 查看详情
在 NestJS 中使用 Jest 和 MongoDB 进行单元测试
】在NestJS中使用Jest和MongoDB进行单元测试【英文标题】：UnittestinNestJSwithJestwithMongoDB【发布时间】：2018-09-3006:55:17【问题描述】：我正在使用Jest在框架NestJS中实现单元测试。当我启动测试时，会发生此错误：我的测试文件是这样... 查看详情
vue中引入样式文件
一、在vue中使用scss首先进行安装如下依赖： cnpmisass-loadernode-sass-D 二、vue中引入样式文件1）在index.html模板html文件中引入，这种方式引入的原样编译在生成的html文件中，如果想要通过link引入外部的样式文件，建议使用这... 查看详情
麻烦单元测试角度的反应性表单字段
...间】：2017-06-2721:11:04【问题描述】：我正在学习Angular2和使用@angular/cli1.0.0-beta.30进行单元测试，并在测试表单字段有效性的一个方面取得了一些成功，但不是全部。我暂时在我的组件中使用内联模板来消除一层复杂性（单独文件... 查看详情
java~springboot~h2数据库在单元测试中的使用
单元测试有几点要说的事实上springboot框架是一个tdd框架，你在进行建立项目时它会同时建立一个单元测试项目，而我们的代码用例可以在这个项目里完成，对于单元测试大叔有以下几点需要说明一下：单元测试的用例之间不要... 查看详情
单元测试包含带有插槽的 Vuetify 数据表的 Vue 组件
...【发布时间】：2020-08-2203:25:19【问题描述】：我正在尝试使用嵌套的v-data-table组件对简单组件进行单元测试。该页面在浏览器中正确呈现，但我似乎无法编写有效的Jest测试。问题似乎与我用于插槽的模板有关——我直接从文档... 查看详情