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 }
    });
});

我确实写了两种渲染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

进行单独的测试

文档：Vue Test Utils-Mounting Options-Slots

使用v-for测试v插槽-Jest / Vue

1 个答案: