Моки с типами

Vue Test Utils предоставляет мощный инструмент для тестирования компонентов Vue, но для эффективной работы с компонентами часто приходится использовать моки. В процессе работы с моками важно, чтобы они правильно взаимодействовали с типами, что позволяет избежать ошибок и повышает точность тестов.

Зачем нужны моки с типами?

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

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

Моки для props

При тестировании компонентов часто необходимо передавать пропсы, чтобы проверить их правильную обработку. Создание моков для пропсов в TypeScript требует точного соблюдения типизации, чтобы избежать несоответствия типов и предотвратить ошибку в процессе тестирования.

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

interface MockProps {
  title: string
  count: number
}

describe('MyComponent', () => {
  it('renders props correctly', () => {
    const wrapper = mount(MyComponent, {
      propsData: { title: 'Test', count: 5 } as MockProps,
    })
    expect(wrapper.text()).toContain('Test')
    expect(wrapper.text()).toContain('5')
  })
})

В этом примере создаётся интерфейс MockProps, который точно указывает типы для пропсов, передаваемых компоненту. Благодаря этому, TypeScript будет отслеживать корректность типов во время написания тестов.

Моки для событий

Моки событий также могут быть полезными, особенно когда компонент зависит от пользовательского ввода или взаимодействий. В TypeScript важно, чтобы типы событий соответствовали ожидаемым типам в компоненте.

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

describe('MyComponent', () => {
  it('emits an event correctly', async () => {
    const wrapper = mount(MyComponent)
    await wrapper.vm.$emit('increment', 1)

    expect(wrapper.emitted().increment).toBeTruthy()
    expect(wrapper.emitted().increment[0]).toEqual([1])
  })
})

Для имитации событий нужно убедиться, что они соответствуют типам, определённым в компоненте. TypeScript поможет избежать ошибок, если событие будет передаваться с неправильным типом данных.

Моки для зависимостей

Моки для зависимостей — это ещё один важный момент при тестировании. Когда компоненты зависят от внешних сервисов, API или хранилищ, их нужно заменить на моки, чтобы тестировать компоненты в изоляции. В TypeScript необходимо правильно типизировать моки для таких зависимостей.

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

interface ApiService {
  fetchData: () => Promise<string>
}

describe('MyComponent', () => {
  it('fetches data from API', async () => {
    const mockApiService: ApiService = {
      fetchData: jest.fn().mockResolvedValue('mocked data'),
    }

    const wrapper = mount(MyComponent, {
      mocks: {
        $api: mockApiService,
      },
    })

    await wrapper.vm.fetchDataFromApi()
    expect(wrapper.text()).toContain('mocked data')
  })
})

Здесь создаётся интерфейс ApiService, который описывает методы API. В моках используется jest.fn() для имитации поведения метода fetchData, что позволяет точно контролировать, какие данные он возвращает. Использование TypeScript для типизации моков помогает избежать ошибок, например, когда метод возвращает не тот тип данных.

Моки для Vuex

Когда компонент использует Vuex для работы с состоянием, необходимо смокировать хранилище. Типизация Vuex-хранилища с использованием TypeScript требует определённого подхода. Создание правильных типов для мутаций, действий и состояния улучшает точность тестов.

import { mount } from '@vue/test-utils'
import { createStore } from 'vuex'
import MyComponent from '@/components/MyComponent.vue'

interface State {
  count: number
}

const store = createStore({
  state: () => ({
    count: 0,
  }),
  mutations: {
    increment(state: State) {
      state.count++
    },
  },
})

describe('MyComponent', () => {
  it('commits mutation correctly', async () => {
    const wrapper = mount(MyComponent, {
      global: {
        plugins: [store],
      },
    })

    await wrapper.find('button').trigger('click')

    expect(store.state.count).toBe(1)
  })
})

Типизация хранилища через интерфейс State гарантирует, что доступ к состоянию и мутациям будет правильным, что снижает шанс на ошибку при тестировании. Важно также помнить о правильном подключении хранилища через глобальные плагины.

Использование мока с Vue Router

Когда компонент использует Vue Router для навигации, также может понадобиться мокировать маршруты и историю навигации. В TypeScript это важно, чтобы типы маршрутов и их параметров соответствовали ожидаемым значениям.

import { mount } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import MyComponent from '@/components/MyComponent.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [{ path: '/home', component: MyComponent }],
})

describe('MyComponent', () => {
  it('navigates correctly', async () => {
    const wrapper = mount(MyComponent, {
      global: {
        plugins: [router],
      },
    })

    await router.push('/home')
    await wrapper.vm.$nextTick()

    expect(wrapper.text()).toContain('Welcome to Home')
  })
})

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

Заключение

Использование моков с типами в Vue Test Utils и TypeScript значительно улучшает качество тестирования компонентов. Типизация помогает предотвратить множество ошибок, которые могли бы возникнуть из-за неверных данных или неправильного взаимодействия между компонентами и их зависимостями. Важно тщательно проектировать типы для моков, чтобы тесты были максимально точными и стабильными.

Оглавление