0

テストは比較的新しいので、これはおそらく非常に簡単です。

checkboxコンポーネントをテストしたい。it基本は理解しましたが、ブロック内で複数のコンポーネントをレンダリングするにはどうすればよいですか?

これまでの私のコード。複数のアイテムをレンダリングして 1 つをチェックする 2 番目のテストに行き詰まっています。それはその値を返すはずです（または、選択したチェックボックスをテストできます）。

コンポーネント自体は非常にシンプルです。ラベルとチェックボックス要素があり、期待されるすべての小道具を受け取ります。

ありがとうございました！

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

it1 つのブロックで複数のコンポーネントをレンダリングしようとしているかどうかはわかりませんが、1 つのブロック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 に答える