测试库 (VueJS) - 在 it 块中渲染多个组件答案

【问题标题】：Testing Library (VueJS) - Rendering multiple components in a it block测试库 (VueJS) - 在 it 块中渲染多个组件
【发布时间】：2020-11-25 15:58:22
【问题描述】：

测试相对较新，所以这可能非常简单：

我想测试一个checkbox 组件。我掌握了基础知识，但是，如何在 it 块内渲染多个组件？

到目前为止我的代码。我被困在第二个测试中，我想渲染多个项目并检查一个。这应该会返回它的值（或者我们可以测试选中的复选框）。

组件本身很简单。它有一个标签和复选框元素，并接收您期望的所有道具。

谢谢！

import { render } from '@testing-library/vue';
import OBCheckbox from '../OBCheckbox.vue';

describe('OBCheckbox', () => {
    it('should be selected', async () => {
        const label = 'checkboxLabel1';
        const value = 'Testing Value';
        const { getByLabelText } = render(OBCheckbox, { props: { label, value } });

        const checkBox = getByLabelText(label);
        expect(checkBox).toBeChecked(value);
    });
    it('should return selected items value', async () => {
        // stuck here
    });
    it('should be disabled', async () => {
        const label = 'checkboxLabel1';
        const value = 'Testing Value';
        const disabled = true;
        const { getByLabelText } = render(OBCheckbox, { props: { label, value, disabled } });

        const checkBox = getByLabelText(label);
        expect(checkBox).toBeDisabled();
    });
    it('should be accessible', async () => {
        const label = 'checkboxLabel1';
        const value = 'Testing Value';
        const { getByRole } = render(OBCheckbox, { props: { label, value } });

        const checkBox = getByRole('checkbox');
        expect(checkBox).toBeChecked(value);
    });
});

【问题讨论】：

标签： javascript unit-testing vue.js testing-library

【解决方案1】：

我不确定您要在一个 it 块中渲染哪些多个组件，但如果您要在一个 OBCheckbox 块中渲染多个 OBCheckbox，那么您可能可以执行类似的操作这个。

import { screen, render } from '@testing-library/vue';

it('should return selected items value', () => {
    render({
        template:`
            <div>
                <your_component :label="'label1'" :value="'value1'"/>                
                <your_component :label="'label2'" :value="'value2'"/>
                <your_component :label="'label3'" :value="'value3'"/>
            </div>
        `,
        components:{ your_component }
    })

    // assuming the label of the component is associated with its input by input's id
    const selectedCheckbox = screen.getByRole('checkbox', { name: 'label1' })
    expect(selectedCheckbox).toBe(...)
})

【讨论】：