0

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

我想测试一个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);
    });
});
4

1 回答 1

0

我不确定您要在一个块中渲染哪些多个组件，it但如果您要OBCheckbox在一个it块中渲染多个组件，那么您可能可以做这样的事情。

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(...)
})
于 2021-01-29T08:35:59.123 回答