Input still gets values even if disabled in React Testing Library

Question

I have this test (React, Vitest & Testing Library):

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:

AssertionError: expected 'test' to be '' // Object.is equality
Expected :
Actual   :test

Any idea why?

Carsten Codes · Accepted Answer · 2024-09-25 07:15:08Z

1

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:

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(''); 
  });
});

answered Sep 25, 2024 at 7:15

Carsten Codes

1316 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chen Peleg Over a year ago

Thank you! So actually react testing library does not support disabled attribute on input

Carsten Codes Over a year ago

fireEvent does not, userEvent does, however both are from the @testing-library :)

Chen Peleg Over a year ago

Thank you! but just to be exact, it's a companion library as the docs state: testing-library.com/docs/user-event/intro

Carsten Codes Over a year ago

@ChenPeleg yes you are absolute right, thanks for clarifying this.

Collectives™ on Stack Overflow

Input still gets values even if disabled in React Testing Library

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related