Добре дошли в първата част от нашата серия за функцията за автоматично импортиране на 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. Ето как да го настроите:
- Инсталирайте библиотеката
❯ 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, можете да гарантирате, че вашите тестове преминават с блестящи цветове, докато се наслаждавате на предимствата на автоматичното импортиране.
Очаквайте следващите статии от тази поредица, където ще се потопим по-задълбочено в управлението на автоматичното импортиране за други типове ресурси като магазини и компоновки. Дотогава, приятно тестване и продължавайте да кодирате!