I have this test (React, Vitest & Testing Library):
<code>import { describe, expect, it } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
describe('App button Problem', () => {
it('types in the input correctly', async () => {
render(<input type={'text'} disabled={false}/> );
const input : HTMLInputElement = screen.getByRole('textbox');
fireEvent.input(input, { target: { value: 'test' } });
expect( input.value).toBe('test'); // this is ok
});
it('does not types in the input if disabled', async () => {
render(<input type={'text'} disabled={true}/> );
const input : HTMLInputElement = screen.getByRole('textbox');
fireEvent.input(input, { target: { value: 'test' } });
expect( input.value).toBe(''); // this fails (why?)
});
});
</code>
<code>import { describe, expect, it } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
describe('App button Problem', () => {
it('types in the input correctly', async () => {
render(<input type={'text'} disabled={false}/> );
const input : HTMLInputElement = screen.getByRole('textbox');
fireEvent.input(input, { target: { value: 'test' } });
expect( input.value).toBe('test'); // this is ok
});
it('does not types in the input if disabled', async () => {
render(<input type={'text'} disabled={true}/> );
const input : HTMLInputElement = screen.getByRole('textbox');
fireEvent.input(input, { target: { value: 'test' } });
expect( input.value).toBe(''); // this fails (why?)
});
});
</code>
import { describe, expect, it } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
describe('App button Problem', () => {
it('types in the input correctly', async () => {
render(<input type={'text'} disabled={false}/> );
const input : HTMLInputElement = screen.getByRole('textbox');
fireEvent.input(input, { target: { value: 'test' } });
expect( input.value).toBe('test'); // this is ok
});
it('does not types in the input if disabled', async () => {
render(<input type={'text'} disabled={true}/> );
const input : HTMLInputElement = screen.getByRole('textbox');
fireEvent.input(input, { target: { value: 'test' } });
expect( input.value).toBe(''); // this fails (why?)
});
});
I get this error:
<code>AssertionError: expected 'test' to be '' // Object.is equality
Expected :
Actual :test
</code>
<code>AssertionError: expected 'test' to be '' // Object.is equality
Expected :
Actual :test
</code>
AssertionError: expected 'test' to be '' // Object.is equality
Expected :
Actual :test
Any idea why?
fireEvent.input() doesn’t respect the disabled attribute of the input element by default in the test environment.
But you could replace fireEvent with userEvent from @testing-library/user-event, which respects the disabled attribute:
<code>import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
describe('App button Problem', () => {
it('types in the input correctly', async () => {
render(<input type={'text'} disabled={false} />);
const input: HTMLInputElement = screen.getByRole('textbox');
await userEvent.type(input, 'test');
expect(input.value).toBe('test'); // this is ok
});
it('does not type in the input if disabled', async () => {
render(<input type={'text'} disabled={true} />);
const input: HTMLInputElement = screen.getByRole('textbox');
// Try to type in the input (userEvent respects disabled attribute)
await userEvent.type(input, 'test');
// The input value should remain unchanged
expect(input.value).toBe('');
});
});
</code>
<code>import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
describe('App button Problem', () => {
it('types in the input correctly', async () => {
render(<input type={'text'} disabled={false} />);
const input: HTMLInputElement = screen.getByRole('textbox');
await userEvent.type(input, 'test');
expect(input.value).toBe('test'); // this is ok
});
it('does not type in the input if disabled', async () => {
render(<input type={'text'} disabled={true} />);
const input: HTMLInputElement = screen.getByRole('textbox');
// Try to type in the input (userEvent respects disabled attribute)
await userEvent.type(input, 'test');
// The input value should remain unchanged
expect(input.value).toBe('');
});
});
</code>
import { describe, expect, it } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
describe('App button Problem', () => {
it('types in the input correctly', async () => {
render(<input type={'text'} disabled={false} />);
const input: HTMLInputElement = screen.getByRole('textbox');
await userEvent.type(input, 'test');
expect(input.value).toBe('test'); // this is ok
});
it('does not type in the input if disabled', async () => {
render(<input type={'text'} disabled={true} />);
const input: HTMLInputElement = screen.getByRole('textbox');
// Try to type in the input (userEvent respects disabled attribute)
await userEvent.type(input, 'test');
// The input value should remain unchanged
expect(input.value).toBe('');
});
});
4