Тестирование v-слотов с помощью v-for - Jest / Vue

Question

Я пытаюсь выяснить, как проверить мой компонент, в котором есть 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.... создает только один столбец. Как я могу представить столбцы = количество столбцов модели списка? Первый вариант / комментарий Я не уверен Если я написал это хорошо - return h('Column' .... - это может быть неправильно.

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

Answer 1

На самом деле, неясно, чего вы хотите достичь с помощью этого теста, это выглядит сложно.Если вы хотите протестировать только 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

* 1014 должен быть отдельный тест* Документы: Vue Test Utils-Опции монтажа-Слоты