Javascript Jest Vue:[Vue warn]：未能装载组件：未定义模板或呈现函数。shallowMount或mount返回空html
我得到以下错误，shallowMount或mount返回空htmlJavascript Jest Vue:[Vue warn]：未能装载组件：未定义模板或呈现函数。shallowMount或mount返回空html,javascript,vue.js,vuejs2,jestjs,Javascript,Vue.js,Vuejs2,Jestjs,我得到以下错误，shallowMount或mount返回空html console.error node_modules/vue/dist/vue.js:634 [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> })) 我要测试的组件是 <template> <d
console.error node_modules/vue/dist/vue.js:634
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<template>
<div>
<div class="header-body text-center mb-1">
<b-row class="justify-content-center">
<div class="col"></div>
<div class="col-10">
<b-img
alt="Image placeholder"
src="img/brand/culmas-with-slogan.svg"
class="img-fluid"
/>
</div>
<div class="col"></div>
</b-row>
</div>
<b-container>
<b-row class="justify-content-center">
<b-col lg="6" md="8">
<b-card no-body class="bg-secondary border-0">
<div class="bg-transparent mt-3 pb-4">
<div class="h4 text-center mt-2 mb-4">
<strong>Sign in with</strong>
</div>
<div class="text-center">
<a
href="#"
class="btn btn-secondary mr-4 btn-icon"
@click="googleSignIn"
>
<span class="btn-inner--icon"><b-icon-google /> </span>
<span class="btn-inner--text">Google</span>
</a>
<a
href="#"
class="btn btn-secondary btn-icon"
@click="appleSignIn"
>
<span class="btn-inner--icon"><b-icon-apple /> </span>
<span class="btn-inner--text">Apple ID</span>
</a>
</div>
<div class="text-center">
<a
href="#"
class="btn btn-secondary mt-4 btn-icon"
@click="facebookSignIn"
>
<span class="btn-inner--icon"><b-icon-facebook /> </span>
<span class="btn-inner--text">Facebook</span>
</a>
</div>
</div>
<div class="row px-lg-5">
<div class="col"><hr /></div>
<div class="col-auto mt-3">Or</div>
<div class="col"><hr /></div>
</div>
<b-card-body class="px-lg-5 py-lg-5 mt--3">
<div class="text-center h4 mb-4">
<strong class="test">Sign in with credentials</strong>
</div>
<validation-observer
v-slot="{ handleSubmit }"
ref="formValidator"
>
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<base-input
alternative
class="mb-3 cy-email"
prepend-icon="ni ni-email-83"
placeholder="Email"
name="Email"
:rules="{ required: true, email: true }"
v-model="model.email"
>
</base-input>
<base-input
alternative
prepend-icon="ni ni-lock-circle-open"
placeholder="Password"
type="password"
name="Password"
class="cy-password"
:rules="{ required: true, min: 6 }"
v-model="model.password"
>
</base-input>
<div class="text-center">
<b-button block type="submit" variant="primary" class="mt-4"
>Sign in</b-button
>
<span
class="text-center invalid-feedback"
style="display: block;"
>{{ error }}
</span>
</div>
</b-form>
</validation-observer>
<div class="text-center h4 mb-1">
<div class="h4 text-center mt-2 mb-1">
<router-link to="/reset-password">
<b-button variant="link" class="mt-4 text-decoration-none">
I forgot my Password
</b-button>
</router-link>
</div>
</div>
</b-card-body>
</b-card>
<div class="text-center">
<router-link to="/register">
<b-button type="submit" variant="primary" class="mt-4"
><b-icon icon="vector-pen" aria-hidden="true"></b-icon> I don't
have an account, sign me up</b-button
>
</router-link>
</div>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import * as firebase from "./../../firebase";
export default {
name: "Login",
data() {
return {
model: {
email: "",
password: ""
},
error: null
};
},
methods: {
onSubmit() {
firebase.auth
.signInWithEmailAndPassword(this.model.email, this.model.password)
.then(data => {
firebase.db
.collection("users")
.doc(data.user.uid)
.get()
.then(snapshot => {
this.$store.commit("SET_USER", snapshot.data());
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
})
.catch(err => {
this.error = err.message;
});
},
googleSignIn() {
firebase
.googleAuth()
.then(data => {
this.$store.commit("SET_USER", data);
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
},
facebookSignIn() {
firebase
.facebookAuth()
.then(data => {
this.$store.commit("SET_USER", data);
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
},
appleSignIn() {
firebase
.appleAuth()
.then(data => {
this.$store.commit("SET_USER", data);
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
}
}
};
</script>
感谢您的帮助。感谢您的建议，提供一个简化的代码示例是一个好主意；也许可以将您的问题复制到CodePen/JSFiddle中。这使得其他开发人员更容易帮助您。
<template>
<div>
<div class="header-body text-center mb-1">
<b-row class="justify-content-center">
<div class="col"></div>
<div class="col-10">
<b-img
alt="Image placeholder"
src="img/brand/culmas-with-slogan.svg"
class="img-fluid"
/>
</div>
<div class="col"></div>
</b-row>
</div>
<b-container>
<b-row class="justify-content-center">
<b-col lg="6" md="8">
<b-card no-body class="bg-secondary border-0">
<div class="bg-transparent mt-3 pb-4">
<div class="h4 text-center mt-2 mb-4">
<strong>Sign in with</strong>
</div>
<div class="text-center">
<a
href="#"
class="btn btn-secondary mr-4 btn-icon"
@click="googleSignIn"
>
<span class="btn-inner--icon"><b-icon-google /> </span>
<span class="btn-inner--text">Google</span>
</a>
<a
href="#"
class="btn btn-secondary btn-icon"
@click="appleSignIn"
>
<span class="btn-inner--icon"><b-icon-apple /> </span>
<span class="btn-inner--text">Apple ID</span>
</a>
</div>
<div class="text-center">
<a
href="#"
class="btn btn-secondary mt-4 btn-icon"
@click="facebookSignIn"
>
<span class="btn-inner--icon"><b-icon-facebook /> </span>
<span class="btn-inner--text">Facebook</span>
</a>
</div>
</div>
<div class="row px-lg-5">
<div class="col"><hr /></div>
<div class="col-auto mt-3">Or</div>
<div class="col"><hr /></div>
</div>
<b-card-body class="px-lg-5 py-lg-5 mt--3">
<div class="text-center h4 mb-4">
<strong class="test">Sign in with credentials</strong>
</div>
<validation-observer
v-slot="{ handleSubmit }"
ref="formValidator"
>
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<base-input
alternative
class="mb-3 cy-email"
prepend-icon="ni ni-email-83"
placeholder="Email"
name="Email"
:rules="{ required: true, email: true }"
v-model="model.email"
>
</base-input>
<base-input
alternative
prepend-icon="ni ni-lock-circle-open"
placeholder="Password"
type="password"
name="Password"
class="cy-password"
:rules="{ required: true, min: 6 }"
v-model="model.password"
>
</base-input>
<div class="text-center">
<b-button block type="submit" variant="primary" class="mt-4"
>Sign in</b-button
>
<span
class="text-center invalid-feedback"
style="display: block;"
>{{ error }}
</span>
</div>
</b-form>
</validation-observer>
<div class="text-center h4 mb-1">
<div class="h4 text-center mt-2 mb-1">
<router-link to="/reset-password">
<b-button variant="link" class="mt-4 text-decoration-none">
I forgot my Password
</b-button>
</router-link>
</div>
</div>
</b-card-body>
</b-card>
<div class="text-center">
<router-link to="/register">
<b-button type="submit" variant="primary" class="mt-4"
><b-icon icon="vector-pen" aria-hidden="true"></b-icon> I don't
have an account, sign me up</b-button
>
</router-link>
</div>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import * as firebase from "./../../firebase";
export default {
name: "Login",
data() {
return {
model: {
email: "",
password: ""
},
error: null
};
},
methods: {
onSubmit() {
firebase.auth
.signInWithEmailAndPassword(this.model.email, this.model.password)
.then(data => {
firebase.db
.collection("users")
.doc(data.user.uid)
.get()
.then(snapshot => {
this.$store.commit("SET_USER", snapshot.data());
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
})
.catch(err => {
this.error = err.message;
});
},
googleSignIn() {
firebase
.googleAuth()
.then(data => {
this.$store.commit("SET_USER", data);
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
},
facebookSignIn() {
firebase
.facebookAuth()
.then(data => {
this.$store.commit("SET_USER", data);
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
},
appleSignIn() {
firebase
.appleAuth()
.then(data => {
this.$store.commit("SET_USER", data);
this.$router.replace({ name: "Dashboard" });
})
.catch(err => {
this.error = err.message;
});
}
}
};
</script>
"name": "bootstrap-vue-argon-dashboard-pro",
"version": "1.0.0",
"private": true,
"description": "BootstrapVue Argon Dashboard PRO",
"author": "Creative Tim - https://www.creative-tim.com/",
"scripts": {
"serve": "vue-cli-service serve --open",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint",
"dev": "npm run serve"
},
"dependencies": {
"@fullcalendar/core": "^4.0.2",
"@fullcalendar/daygrid": "^4.0.1",
"@fullcalendar/interaction": "^4.0.2",
"@fullcalendar/timegrid": "^4.0.1",
"@fullcalendar/vue": "^4.0.2-beta",
"@vue/test-utils": "^1.1.3",
"bootstrap": "4.3.1",
"bootstrap-vue": "^2.5.0",
"chart.js": "^2.9.3",
"d3": "^5.7.0",
"datamaps": "^0.5.9",
"date-fns": "^1.30.1",
"debounce": "^1.2.0",
"dropzone": "^5.5.1",
"element-ui": "2.4.11",
"es6-promise": "^4.1.1",
"eslint-plugin-cypress": "^2.11.2",
"firebase": "^8.2.6",
"flatpickr": "^4.5.7",
"fuse.js": "^3.2.0",
"google-maps": "^3.2.1",
"nouislider": "^12.1.0",
"perfect-scrollbar": "^1.3.0",
"quill": "^1.3.6",
"sweetalert2": "^9.5.4",
"vee-validate": "^3.2.1",
"vue": "^2.6.11",
"vue-chartjs": "^3.5.0",
"vue-class-component": "^7.2.6",
"vue-clipboard2": "^0.3.0",
"vue-flatpickr-component": "^8.1.2",
"vue-router": "^3.0.6",
"vue2-transitions": "^0.2.3",
"vuefire": "^2.2.5",
"vuex": "^3.6.2"
},
"devDependencies": {
"@types/webpack-env": "^1.16.0",
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-e2e-cypress": "^4.5.11",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-plugin-unit-jest": "^4.5.11",
"@vue/cli-service": "^3.7.0",
"@vue/eslint-config-prettier": "^4.0.1",
"@vue/test-utils": "^1.0.3",
"babel-plugin-component": "^1.1.0",
"cypress": "^6.4.0",
"eslint": "^4.19.1",
"jest": "^26.6.3",
"node-sass": "^4.12.0",
"prettier": "^1.19.1",
"sass-loader": "^7.1.0",
"ts-loader": "^8.0.17",
"typescript": "^4.1.5",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint"
],
"parserOptions": {
"ecmaVersion": 2020
},
"rules": {},
"overrides": [
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
},
{
"files": [
"**/__tests__/*.{j,t}s?(x)",
"**/tests/unit/**/*.spec.{j,t}s?(x)"
],
"env": {
"jest": true
}
}
]
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
],
"jest": {
"preset": "@vue/cli-plugin-unit-jest",
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "babel-jest"
},
"moduleNameMapper": {
"vue$": "vue/dist/vue"
},
"transformIgnorePatterns": [
"./node_modules/(?!bootstrap-vue)"
]
}
}
const path = require("path");
function resolveSrc(_path) {
return path.join(__dirname, _path);
}
// vue.config.js
module.exports = {
lintOnSave: true,
configureWebpack: {
// Set up all the aliases we use in our app.
resolve: {
alias: {
assets: resolveSrc("src/assets"),
vue$: "vue/dist/vue.common.js"
}
},
output: {
libraryExport: "default"
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
include: /src/,
loader: "ts-loader",
options: {
transpileOnly: true,
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.sass$/,
use: [
"vue-style-loader",
"css-loader",
{
loader: "sass-loader",
options: {
indentedSyntax: true,
// sass-loader version >= 8
sassOptions: {
indentedSyntax: true
}
}
}
]
}
]
}
},
css: {
// Enable CSS source maps.
sourceMap: process.env.NODE_ENV !== "production"
}
};