Как исправить предупреждение при запуске тестов с помощью jest: не удалось смонтировать компонент: шаблон или функция визуализации не определены - PullRequest
Новая
       17

Как исправить предупреждение при запуске тестов с помощью jest: не удалось смонтировать компонент: шаблон или функция визуализации не определены

0 голосов
/ 10 июля 2019

Я видел множество сообщений об одной и той же ошибке, но я получаю ее только при запуске тестов с 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: "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.

Конфигурация Jest: 

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 Ответ

0 голосов
/ 15 июля 2019

Я разрешил предупреждение, изменив порядок расширений в moduleFileExtensions на: 

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

Мне также нужно было использовать shallowMount вместо mount, поскольку у меня есть Image дочерний компонент, который фиксируется в хранилище Vuex, которое я не хочу выполнять.

...