Тестирование компонента Vue: не удалось смонтировать компонент: шаблон или функция визуализации не определены - PullRequest
Новая
       36

Тестирование компонента Vue: не удалось смонтировать компонент: шаблон или функция визуализации не определены

1 голос
/ 09 мая 2019

Я пишу тест для компонента Vue, используя Mocha, и я не могу разрешить это предупреждение: 

[Vue warn]: Failed to mount component: template or render function not defined.

После небольшого исследования кажется, что большинство других экземпляров этого предупрежденияпоявление включает в себя использование vue-router.Однако я не использую эту библиотеку.

Я вижу предупреждение даже в самом простом компоненте, подобном приведенному ниже.Примерно так следует этому примеру: Тестирование однофайловых компонентов с помощью Mocha + webpack . 

<template>
  <div>
    <ul>
      <li v-for="item in items">
        {{ item }}
      </li>
    </ul>

  </div>
</template>

<script>

  export default {
    props: {
      items: Array,
      required: true,
    },
    data () {
      return {}
    },
  }
<script>

<style>
</style>

В браузере все работает нормально, но тесты демонстрируют необычное поведение.Вот два теста, оба очень простые.Первый проходит, а второй не проходит.Оба теста вызывают предупреждение о том, что шаблон или функция рендеринга не определены. 

import { mount } from '@vue/test-utils';
import Foo from '../../foo.vue';

describe('Foo', () => {
  it('works', () => {
    const wrapper = mount(Foo, {
      propsData: {
        items: ['a','b','c']
      }
    });
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('contains a property', () => {
    const wrapper = mount(Foo, {
      propsData: {
        items: ['a','b','c']
      }
    });
    expect(wrapper.props()).toEqual({items: ['a','b','c']})
  })
});

Второй тест не пройден, поскольку кажется, что реквизиты не установлены.Ошибка теста говорит: 

Expected: ["a", "b", "c"]
Received: {}

Основываясь на документации ue-test-utils , я подумал, что это будет простой тест, поэтому я не понимаю, почему он вообще не работает.

Я не уверен, есть ли какая-то часть предварительной компиляции, которую я пропускаю, или что-то еще.Я пытался запустить эти тесты как с mocha-webpack, так и с более современным mochapack тестовым прогоном, но результат тот же.

Какой-нибудь совет, как убрать это предупреждение и пройти эти тесты?

1 Ответ

1 голос
/ 09 мая 2019

Я тестирую свои компоненты vue с помощью jest, и я не эксперт в этой теме, но могу предположить, что вы не настроили свою среду должным образом.

По крайней мере, для шутки мне пришлось настроить объект преобразования следующим образом. 

"transform": {
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },

Дело в том, что это преобразование превращает файл * .vue в javascript. И на этом шаге создается функция рендеринга.

Возможно, этого не хватает, и именно поэтому вы получаете эту ошибку. Но я не могу объяснить, почему первый тест прошел успешно.

Надеюсь, это может помочь. В противном случае я удаляю этот пост. ;)

...