5 минут на исправление шутливых тестов для приложения с: Неизвестным настраиваемым элементом: - Вы правильно зарегистрировали компонент?

Вы получаете следующую ошибку?

Решения

1. Вам не хватает пакетов?

  1. Проверьте свой пакет node_modules и установите отсутствующие пакеты / компоненты модулей. Или переустановите ваши node_modules через `npm install`.

Ссылка:

2. Правильно ли вы закрываете свои шутливые тесты?

Если вы пишете модульные тесты и хотите проверить функциональность компонента по отдельности, настройте функцию shallowMount и протестируйте ее. Заглушка внутри юнит-тестов jest.

Разница между shallowMount и mount

mount:

Метод монтирования принимает компонент Vue в качестве первого аргумента и возвращает его экземпляр vue вместе с некоторым помощником, который используется для взаимодействия с экземпляром компонента, такого как установка реквизитов, триггерные клики и т. Д.

shallowMount:

Метод shallowMount также работает аналогично методу монтирования, основное отличие состоит в том, что shallowMount не отображает дочерние компоненты, поэтому он позволяет нам тестировать компонент изолированно, чтобы убедиться, что дочерние компоненты не включены в тест.

Если вы хотите протестировать вложенный компонент, используйте функцию монтирования.

Я бы рекомендовал использовать функцию shallowMount, поскольку она предназначена для модульного тестирования компонента.

В моем случае мне пришлось заглушить свои прекрасные шрифты значки из @nuxtjs/fontawesome-module

import { shallowMount } from '@vue/test-utils'
import Index from '@/pages/index.vue'
import { fas } from '@fortawesome/free-solid-svg-icons'
describe('index.vue', () => {
  test('is a Vue instance', () => {
    const wrapper = shallowMount(Index, {
      stubs: ['fa'], // <<<<<STUB HERE>>>>>
      components: {},
      computed: {
        faPhone() {
          return fas.faPhone
        }
      }
    })
    expect(wrapper).toBeTruthy()
  })
})

3. Правильно ли вы игнорируете node_modules?

В большинстве случаев вам потребуется следующая строка внутри вашего jest.config.js, вам просто нужно игнорировать компонентный модуль, когда вы запускаете свои тесты. В противном случае он также запускал бы тесты внутри ваших node_modules.

//jest.config.js
transformIgnorePatterns: [
    '/node_modules/'
    '/node_modules/(?!<SOME PACKAGE HERE>)',
  ],

Подводить итоги

  • Установите отсутствующие пакеты или переустановите node_modules
  • mount / shallow - монтируйте и вставляйте компоненты при необходимости или при использовании внешних модулей.
  • Игнорируйте node_modules из вашего jest.config.js

Ваше здоровье! Надеюсь, вы нашли эту статью полезной! 🍻

Теги: # решение #nuxtjs #vuejs #javascript #typescript # разработка