测试库(VueJS)-在it块中呈现多个组件

Question

测试相对较新，因此这可能非常简单：

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

Answer 1

我不确定你想在一个it块中渲染多个组件，但如果你想在同一个it块中渲染几个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(...)
})