Как решить проблему с Vue.component в Vue или Nuxt с помощью Test Units и Jest.

Модульные тесты важны для предотвращения ошибок фьючерсов в масштабируемом приложении, но зачем использовать пользовательский компонент с vue.componentнастройкой его для глобального элемента и необходимостью его тестирования с шуткой?

Чтобы продолжить чтение статьи, я полагаю, что у вас уже есть базовые знания о Vue и модульных тестах с Jest.

Возможно, это случалось с пользователями из Nuxt.js до того, как было легко импортировать пользовательский элемент с vue.component в папку плагинов с nuxt.config.js, не загрязняя базовый код, но если вы используете Vue, вы можете использовать его в main.js с тем же кодом.

В этой статье я использую Nuxt.js для иллюстрации ошибки с Jest.

Проблема

Я импортировал множество пользовательских компонентов с помощью vue.component с такой структурой:

плагины/custom-elements.js

import Vue from 'vue'
import custom_header from '~/components/Custom/Header.vue
Vue.component('custom-element', custom_header)

и он находится в nuxt.config.js:

plugins: ["~/plugins/custom-elements"]

Пользовательские элементы теперь успешно работают, но мы используем их в тесте в пользовательском представлении/странице с помощью Jest?

тест/App.spec.js

Консоль возвращает следующую ошибку:

[Vue warn]: Unknown custom element: <custom-element> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Хорошо, это легко решить, но это не кажется таким простым. В сети много одинаковых вопросов и разных вариантов, которые мне не подошли.

Решение

Помните, ясоздавал пользовательские элементы без подключаемого модуля? Ошибка здесь, вам нужно передать ее пользовательскому плагину и заменить его в Vue/Nuxt, вызвав плагин с помощью Vue.use, и изменить юнит-тест с помощью createLocalVue.

Теперь давайте создадим собственный плагин в Vue с той же структурой:

плагины/custom-plugin.js

и он находится в nuxt.config.js:

plugins: ["~/plugins/custom-plugin"]

или в main.js (возможно, вы используете Vue):

Возвращаясь к основной проблеме с Jest, я заменил код этой структуры:

Теперь работает с Units Test без ошибки от Unknown custom element.

Я хочу, чтобы это решило вашу проблему с пользовательскими элементами!

Спасибо за чтение, и если это поможет вам, не забудьте поставить лайк этой статье.