how to check disabled status of input field react-test-library

Question

I'm using @testing-library/react for react unit test.

I wanna do unit test of input field's disabled status and value.

Below is dom element from chrome inspect.

<input type="text" placeholder="Enter text..." aria-disabled="false" class="styles__TextInput-sc-1vdcacp-2 grIDkE" value="test">

I tried like below, but it does not work.

expect(screen.getByText('Enter text...')).toBeVisible();
expect(screen.getByRole('input')).toBeVisible();

Please let me know how to test input field and it's disabled status and value.

Answer 1

You can use getByRole, but parameter should be textbox, not input.

And for input field's value, you can test it like this:

expect(screen.getByRole('textbox').value).toBe('test');

For check disabled status, you can use toHaveAttribute like this:

expect(screen.getByRole('textbox')).toHaveAttribute(
      'aria-disabled',
      'true'
    );