Блог

Я пытаюсь выяснить, как протестировать мой компонент, в котором есть v-слот. Структура шаблона компонента:

Grid.vue

 <div> 
   <v-slot>
</div>
  

И когда я вызываю это, это что-то вроде:

 <Grid>
   <Column v-for="(element, index) in list" :key=index /> 
</Grid>
  

Пока у меня есть это :

 import { mount } from '@vue/test-utils';
import Grid from '~/components/Grid';
import GridColumn from '~/components/Column';

const columns = [
    {
        id: 'col1',
    },
    {
        id: 'col2',
    },
];

describe('Grid.vue', () => {
    const columnWrapper = {
        // render(h) {
        //     return columns.map(function (item) {
        //         return h('Column', item.id) })
        // }
        render(h) {
            return h(Column, { props: { index: 1, column: columns[0] } });
        }
    };

    const wrapper = mount(Grid, {
        slots: { columnWrapper }
    });
});
  

Я написал 2 способа рендеринга слотов для Grid . Второй вариант с return h(Column.... создает только один столбец. Как я мог бы отобразить список моделей columns = количество столбцов? Первый вариант / прокомментированный Я не уверен, хорошо ли я его написал — return h('Column' .... — это может быть неправильно.

Когда я консольный журнал, wrapper.vm.$el.children он HTMLCollection пуст. Столбцы не были добавлены в Grid . Кто-нибудь знает, что я делаю не так?

На самом деле, неясно, чего вы хотите достичь с помощью этого теста, это выглядит сложным. Если вы хотите протестировать только Grid компонент или инициализировать его с помощью некоторых слотов, я рекомендую написать что-нибудь читаемое и избегать использования других компонентов:

 // example
const wrapper = mount(Grid, {
    slots: {
       default: columns.map(c => `<div class="foo">${c.id}</div>`)
    }
});

expect(wrapper.findAll('.foo').length).toBe(2)
  

Если вы хотите протестировать эту часть:

 // for example, GridUsage.vue
<Grid>
   <Column v-for="(element, index) in list" :key=index /> 
</Grid>
  

Итак, просто протестируйте компонент, в котором существует такое использование, это не ответственность Grid.vue

 // example part of test file
const columns = [
   {
      id: 'col1',
   },
   {
      id: 'col2',
   },
];
const wrapper = mount(GridUsage, { propsData: { list: columns  } });
expect(wrapper.findAll(Column).length).toBe(2)
  

И, конечно, должен быть отдельный тест для Column.vue

Документы: Тестовые утилиты Vue-Варианты монтажа-Слоты