Vue Unit Test - дочерние компоненты и i18n

Я вхожу в мир тестирования приложений, и у меня есть некоторые сомнения по поводу того, как тестировать, в основном из-за языков и дочерних компонентов.

По сути, первые тесты, которые я пытаюсь провести, - это проверить, есть ли на страницах списка правильные данные.

Структура, которая у меня есть на данный момент, представляет собой следующую структуру -

состав компонентов

baseTable
  |- columnHeader
  |- rowRoute

В зависимости от маршрута, на котором находится пользователь, в компоненте baseTable тело таблицы динамически импортируется.

Например, активная страница - это пользователи, поэтому она будет импортировать rowUsers.

Первая ошибка, которая возникает у меня, заключается в том, что в компоненте columnHeader он представляет ошибку

vm.$t is not a function

вторая ошибка находится в компоненте rowUsers, в котором говорится

[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

третья ошибка состоит в том, что компонент rowUsers не существует.

expect( wrapper.find( rowUsers ).exists()).toBe( true ); Ожидается: true Получено: false

Я попытался передать i18n и ссылку на маршрутизатор на обертке, но это все равно не сработало.

import { shallowMount } from '@vue/test-utils';
import baseTable from '@/components/bundles/tables/baseTable';
import rowUsers from '@/components/dynamic/tables/rowUsers';
import i18n from '@/plugins/i18n';

describe( 'Lists', () => {

    it( 'Users list', () => {
        // mock from user
        const fields = [{
            email: '[email protected]',
            name: 'user 1',
            role: 'admin'
        }];

        const wrapper = shallowMount( baseTable, {
            propsData: {
                url: 'users',
                headers: [ null, 'name', 'email', 'role' ],
                fields: fields,
                row: 'Users'
            },
            stubs: ['router-link'],
            i18n
        });

        expect( wrapper.find( rowUsers ).exists()).toBe( true );
    })

})

Любое предложение?


jestjs vue.js vue-router vue-i18n vue-test-utils
person martinho    schedule 25.06.2020    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете издеваться над $t вот так:

shallowMount( baseTable, {
  mocks: {
    $t: (msg) => msg
  }
})

или вы можете добавить глобальный макет, чтобы избежать повторения кода в каждом тестовом файле:

import VueTestUtils from "@vue/test-utils"

VueTestUtils.config.mocks["$t"] = msg => msg

https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#example-with-vue-i18n

person aach    schedule 25.06.2020

arrow_upward
1
arrow_downward

Первая и вторая ошибки могут быть просто связаны с отсутствующей зависимостью Vue-router в Vue-test-utils vm, особенно если вы тестируете компонент самостоятельно, в то время как Vue-router был импортирован в корень вашего приложения.

Вы пробовали импортировать Vue-router в свой тестовый файл перед монтированием компонента?

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Что касается третьей ошибки, это просто синтаксис, wrapper.find() ожидайте селектора CSS, чтобы выбрать свой компонент, используйте wrapper.findComponent(), также shallowMount по умолчанию заглушит ВСЕ ваши дочерние компоненты, поэтому вы можете вместо этого использовать mount:

const wrapper = mount( baseTable, {
  propsData: {
    url: 'users',
    headers: [ null, 'name', 'email', 'role' ],
    fields: fields,
    row: 'Users'
  },
  stubs: ['router-link'],
  i18n
});

expect(wrapper.findComponent(rowUsers).exists()).toBe(true);
person Ninowis    schedule 09.07.2020