Just starting out with testing and have a simple question:
I am working on testing a checkbox component. I understand the basics, but how can I render multiple components within one it block?
Here is my current code. I am stuck on the second test where I need to render multiple items and select one. How can I test for the selected checkbox value?
The component itself is straightforward. It consists of a label and checkbox element, with all the expected props.
Thank you in advance!
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 () => {
// unsure how to proceed 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);
});
});