Добре дошли в първата част от нашата серия за функцията за автоматично импортиране на Nuxt 3. В тази статия ще проучим как ефективно да се справяме с автоматичното импортиране при писане на тестове с помощта на Vite и Vue Test Utils. Auto-Imports е функция, променяща играта в Nuxt 3, рационализирайки начина, по който импортираме компоненти, модули и плъгини, като по този начин значително подобрява поддръжката и четливостта на кода. Въпреки това, когато става въпрос за тестване, особено в контекста на Vite и Vue Test Utils, има някои нюанси, които трябва да се вземат предвид.

Разбиране на Nuxt 3 Auto-Imports

Auto-Imports in Nuxt 3 представляват скок напред в ефективността на разработката. Те дават възможност на разработчиците да използват компоненти, модули и плъгини без необходимост от многословни инструкции за импортиране, което води до по-чист код и намален шаблон. Въпреки това, както ще открием, тестването на автоматично импортирани компоненти може да представлява уникално предизвикателство.

Тестване с Vite и Vue Test Utils

Тестването на компоненти, които използват Auto-Imports, може да бъде трудно, главно защото тези компоненти не са изрично импортирани във вашите тестови файлове. Нека се задълбочим в това как да преодолеем това предизвикателство.

Да предположим, че имаме ясна структура на проект Nuxt 3 с индексна страница и компонент:

<!-- ./pages/index.vue -->
<template>
  <div>Hello world</div>
  <MyComponent />
</template>
<!-- ./components/MyComponent.vue -->
<template>
  <div>I'm an awesome component</div>
</template>

Сега нека създадем тестов файл за индексната страница:

// ./__tests__/pages/index.spec.ts
import { describe, test, expect } from 'vitest';
import { mount } from '@vue/test-utils';
import Index from './pages/index.vue';

describe('My index page test', async () => {
  test('default text should be shown', () => {
    const wrapper = mount(Index);
    expect(wrapper.text()).toContain('Hello world');
  });
  test('MyComponent component should exist', () => {
    const wrapper = mount(Index);
    expect(wrapper.text()).toContain(`I'm an awesome component`);
  });
});

В тази тестова настройка ние използваме vitest и @vue/test-utils за тестване на единици. Въпреки това, както може би сте забелязали, тестът за MyComponent се проваля с грешка, защото vitest не е наясно с Auto-Imports на Nuxt.

Поддържане на автоматични импорти и постигане на успешно преминаване на тестовете

За да сте сигурни, че вашите тестове протичат гладко, можете:

  • Изрично импортиране на компонента: Във вашия файл със страница Nuxt (./pages/index.vue в този случай) изрично импортирайте автоматично импортирания компонент.
<!-- ./pages/index.vue -->
<template>
  <div>Hello world</div>
  <MyComponent />
</template>

<script lang="ts">
import MyComponent from '~/components/MyComponent.vue';

export default {
  components: {
    MyComponent,
  },
};
</script>

Чрез изрично импортиране на MyComponent и регистрирането му в обекта на компонентите, но прекъсване на функционалността за автоматично импортиране, като същевременно позволява компонентът да бъде разпознат в тестове.

След тази корекция вашите тестове ще преминат, но вие губите предимствата от автоматичното импортиране:

✓ __test__/pages/index.spec.ts (2)
  ✓ My index page test (2)
    ✓ default text should be shown
    ✓ MyComponent component should exist

Подобряване на тестовата конфигурация с unplugin-vue-components

За да рационализирате допълнително тестването с Auto-Imports, можете да използвате библиотеката unplugin-vue-components. Ето как да го настроите:

unplugin-vue-components

  • Инсталирайте библиотеката
❯ npm i unplugin-vue-components -D
  • Актуализирайте своя vitest.config.ts конфигурационен файл, за да включите unplugin-vue-components. Уверете се, че импортирате необходимите модули:
import Components from 'unplugin-vue-components/vite';
import vue from '@vitejs/plugin-vue';
  • Добавете unplugin-vue-components към вашите добавки за Vite:
plugins: [vue(), Components({ dirs: ['./components'] })],

Пълният конфигурационен файл трябва да изглежда така

import * as path from 'path';
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vitest/config';
import Components from 'unplugin-vue-components/vite';

const r = (p: string) => path.resolve(__dirname, p);

export default defineConfig({
  plugins: [vue(), Components({ dirs: ['./components'] })],
  test: {
    globals: true,
    environment: 'jsdom',
  },
  resolve: {
    alias: {
      '~': r('.'),
    },
  },
});

Премахнете ненужните импортирания от индексната страница и изпълнете тестовете отново.

✓ __test__/pages/index.spec.ts (2)
   ✓ My index page test (2)
     ✓ default text should be shown
     ✓ MyComponent component should exists

С тази настройка unplugin-vue-components управлява автоматичното импортиране във вашите тестове, което им позволява да работят безпроблемно, като същевременно запазва предимствата на автоматичното импортиране.

Заключение

Автоматичното импортиране в Nuxt 3 предоставя забележителен тласък на ефективността на разработката, правейки вашия код по-чист и по-лесен за поддръжка. Когато става въпрос за тестване, от съществено значение е да адаптирате стратегиите си за тестване, за да приспособите ефективно автоматичното импортиране. Независимо дали изберете изрично да импортирате компоненти или да използвате библиотеки като unplugin-vue-components, можете да гарантирате, че вашите тестове преминават с блестящи цветове, докато се наслаждавате на предимствата на автоматичното импортиране.

Очаквайте следващите статии от тази поредица, където ще се потопим по-задълбочено в управлението на автоматичното импортиране за други типове ресурси като магазини и компоновки. Дотогава, приятно тестване и продължавайте да кодирате!