如何在使用 jest 运行测试时修复警告：无法安装组件：未定义模板或渲染函数

Posted 2023-02-22

【中文标题】如何在使用 jest 运行测试时修复警告：无法安装组件：未定义模板或渲染函数

【英文标题】：How to fix warning when running tests with jest: Failed to mount component: template or render function not defined

【发布时间】：2019-11-20 00:24:55

【问题描述】：

我已经看到了大量关于相同错误的帖子，但我只是在使用 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>

Navbar.vue

<template>
...
  <div>
    <Image
      v-if="email"
    />
  </div>
</template>
<script>
module.exports = require("./Navbar.ts");
</script>

Navbar.ts

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: "[e-mail]"
;
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("[e-mail]");
  );
);

测试本身通过。我假设我缺少/设置了错误的某些配置，但不确定到底是什么。我也在使用打字稿。

笑话配置：

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

我希望测试仍能通过而不会出现控制台错误。

【参考方案1】：

我通过将moduleFileExtensions 中的扩展顺序修改为：

moduleFileExtensions: ["js", "jsx", "json", "vue", "ts", "tsx", "node"],

我还需要使用shallowMount 而不是mount，因为我有Image 子组件正在提交给我不想执行的Vuex 存储。