[英]Failed to mount component: template or render function not defined in Vue with Typescript & Webpack,
[英]How to fix warning when running tests with jest: Failed to mount component: template or render function not defined
我已經看到過很多關於相同錯誤的帖子,但是我只在用Jest運行測試時得到它:
console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Navbar>
<Root>
導航欄
<template>
...
<div>
<Image
v-if="email"
/>
</div>
</template>
<script>
module.exports = require("./Navbar.ts");
</script>
導航欄
import Vue from "vue";
import Image from "@/components/Image/Image";
export default Vue.extend({
name: "Navbar",
components: {
Image,
},
computed: {
email() {
return this.$store.getters.email;
}
}
});
Navbar.spec.ts示例測試
import { mount, createLocalVue } from "@vue/test-utils";
import Navbar from "../Navbar";
import Vuex from "vuex";
const localVue = createLocalVue();
localVue.use(Vuex);
let wrapper;
const state = {
email: "name@gmail.com"
};
const getters = {
email: state => state.email
};
const store = new Vuex.Store({ state, getters });
describe("Navbar", () => {
beforeEach(() => {
wrapper = mount(Navbar, {
store,
localVue
});
});
it("returns correct email from the store", () => {
expect(wrapper.vm.email).toBe("name@gmail.com");
});
});
測試本身通過。 我假設我丟失/設置了某些錯誤的配置,但不確定到底是什么。 我也在使用Typescript。
開玩笑的配置:
module.exports = {
displayName: "test",
roots: ["<rootDir>/src"],
moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node", "vue"],
transform: {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "ts-jest"
},
testURL: "http://localhost/",
snapshotSerializers: ["<rootDir>/node_modules/jest-serializer-vue"],
testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/src/$1"
}
};
我希望測試仍能通過而不會出現控制台錯誤。
我通過將moduleFileExtensions
擴展名的順序修改為以下方式解決了警告:
moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx", "node"],
我還需要使用shallowMount
而不是mount
因為我有要提交到我不想執行的Vuex存儲的Image
子組件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.