I'm trying to create some tests for a checkbox component but looks like I can't make an assertion for an input[type="checkbox"]
when is disabled.
In the first two blocks I'm testing if the checkbox can be checked/uncheck if the element is disabled, everything ok here.
For the last two blocks, I'm trying that same, to check/uncheck but now I set the attribute disabled
to the element but looks like the library is ignoring the attribute
Here are my tests
import { fireEvent, render, screen } from '@testing-library/vue';
it('should uncheck if is not disabled', async () => {
render({
template: '<input data-test-id="checkbox" type="checkbox" checked />',
});
const el = screen.getByTestId('checkbox');
await fireEvent.click(el);
expect(el).not.toBeDisabled();
expect(el).not.toBeChecked();
});
it('should check if is not disabled', async () => {
render({
template: '<input data-test-id="checkbox" type="checkbox" />',
});
const el = screen.getByTestId('checkbox');
await fireEvent.click(el);
expect(el).not.toBeDisabled();
expect(el).toBeChecked();
});
it('should not uncheck if is disabled', async () => {
render({
template: '<input data-test-id="checkbox" type="checkbox" checked disabled />',
});
const el = screen.getByTestId('checkbox');
await fireEvent.click(el);
expect(el).toBeDisabled();
expect(el).toBeChecked(); // ! FAIL
});
it('should not check if is disabled', async () => {
render({
template: '<input data-test-id="checkbox" type="checkbox" disabled />',
});
const el = screen.getByTestId('checkbox');
await fireEvent.click(el);
expect(el).toBeDisabled();
expect(el).not.toBeChecked(); // ! FAIL
});
And the console output
FAIL Checkbox.spec.js
✓ should uncheck if is not disabled (24ms)
✓ should check if is not disabled (3ms)
✕ should not uncheck if is disabled (5ms)
✕ should not check if is disabled (3ms)
● should not uncheck if is disabled
expect(element).toBeChecked()
Received element is not checked:
<input checked="checked" data-test-id="checkbox" disabled="disabled" type="checkbox" />
37 |
38 | expect(el).toBeDisabled();
> 39 | expect(el).toBeChecked(); // ! FAIL
| ^
40 | });
41 |
42 | it('should not check if is disabled', async () => {
at Object.<anonymous> (Checkbox.spec.js:39:14)
● should not check if is disabled
expect(element).not.toBeChecked()
Received element is checked:
<input data-test-id="checkbox" disabled="disabled" type="checkbox" />
50 |
51 | expect(el).toBeDisabled();
> 52 | expect(el).not.toBeChecked(); // ! FAIL
| ^
53 | });
54 |
at Object.<anonymous> (Checkbox.spec.js:52:18)
Test Suites: 1 failed, 1 total
Tests: 2 failed, 2 passed, 4 total
Snapshots: 0 total
Time: 1.707s, estimated 3s
You can see that there is a similar issue in
testing-library
github which is exactly your problem.According to
user-event
docs, you should useuserEvent
instead offireEvent
:You can visit @testing-library/user-event github in this link.
So follow below steps:
So first you should install this using
npm install --save-dev @testing-library/user-event
.Then import it at the top of your tests
import userEvent from "@testing-library/user-event";
Replace every
fireEvent
withuserEvent
.Final code is something like this: