Регистрация плагинов в тестах

В контексте тестирования Vue-компонентов с использованием Vue Test Utils (VTU) регистрация плагинов играет ключевую роль, особенно если компонент зависит от сторонних библиотек или глобальных расширений Vue. Плагин может предоставлять глобальные методы, директивы, миксины или компоненты, без которых компонент не сможет корректно работать.

Глобальная регистрация плагинов

В стандартном приложении Vue плагины обычно подключаются через app.use(plugin). В тестах процесс аналогичен, но требует явного указания при создании обёртки компонента с помощью mount или shallowMount.

Пример:

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';
import MyPlugin from '@/plugins/MyPlugin';

const wrapper = mount(MyComponent, {
  global: {
    plugins: [MyPlugin]
  }
});

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

Особенности:

Каждый плагин должен быть зарегистрирован до создания компонента.
Если плагин использует опции или конфигурацию, её можно передавать при подключении:

plugins: [[MyPlugin, { option1: true, option2: 'value' }]]

Регистрация отдельных компонентов, директив и миксинов через глобальный объект

Иногда необходимо не подключать весь плагин, а лишь отдельные его части:

const wrapper = mount(MyComponent, {
  global: {
    components: {
      'MyButton': MyButtonComponent
    },
    directives: {
      focus: {
        mounted(el) {
          el.focus();
        }
      }
    },
    mixins: [
      {
        created() {
          this.testValue = 42;
        }
      }
    ]
  }
});

Ключевые моменты:

components регистрирует глобальные компоненты, используемые внутри тестируемого компонента.
directives позволяет эмулировать поведение пользовательских директив.
mixins подключает глобальные миксины, которые могут быть критичны для логики компонента.

Локальная регистрация плагинов и изоляция тестов

Для тестов важно избегать влияния глобального состояния, чтобы каждый тест был независимым. Локальная регистрация плагинов через global.plugins обеспечивает такую изоляцию.

Пример с разными настройками плагина в двух тестах:

test('использует плагин с одной конфигурацией', () => {
  const wrapper = mount(MyComponent, {
    global: {
      plugins: [[MyPlugin, { mode: 'light' }]]
    }
  });
  expect(wrapper.text()).toContain('Light mode');
});

test('использует плагин с другой конфигурацией', () => {
  const wrapper = mount(MyComponent, {
    global: {
      plugins: [[MyPlugin, { mode: 'dark' }]]
    }
  });
  expect(wrapper.text()).toContain('Dark mode');
});

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

Мокирование плагинов

Если подключение реального плагина затруднительно (например, из-за внешних зависимостей), VTU позволяет использовать моки:

const mockPlugin = {
  install(app) {
    app.config.globalProperties.$myMethod = () => 'mocked';
  }
};

const wrapper = mount(MyComponent, {
  global: {
    plugins: [mockPlugin]
  }
});

expect(wrapper.vm.$myMethod()).toBe('mocked');

Мокирование позволяет контролировать поведение плагина и проверять реакции компонента на различные сценарии.

Особенности работы с Vue 2 и Vue 3

В Vue 2 плагины чаще подключаются через Vue.use(plugin). Для тестов VTU предоставляет опцию localVue, которая создаёт изолированное пространство для регистрации плагинов:

import Vue from 'vue';
import { createLocalVue, mount } from '@vue/test-utils';
import MyPlugin from '@/plugins/MyPlugin';

const localVue = createLocalVue();
localVue.use(MyPlugin);

const wrapper = mount(MyComponent, { localVue });

В Vue 3 подход глобального объекта global заменяет localVue и обеспечивает более гибкую настройку тестового окружения.