Check that button is disabled in react-testing-library
Assert if button is disabled
You can use the toHaveAttribute
and closest
to test it.
import { render } from '@testing-library/react';
const { getByText } = render(Click);
expect(getByText(/Click me/i).closest('button')).toHaveAttribute('disabled');
or toBeDisabled
expect(getByText(/Click me/i).closest('button')).toBeDisabled();
Assert if button is enabled
To check if the button is enabled, use not
as follows
expect(getByText(/Click me/i).closest('button')).not.toBeDisabled();
For someone who is looking for the test in which the button is not disabled.
import { render } from '@testing-library/react';
const { getByText } = render(Click);
expect(getByText(/Click me/i).getAttribute("disabled")).toBe(null)
You can use toBeDisabled()
from @testing-library/jest-dom
, it is a custom jest matcher to test the state of the DOM:
https://github.com/testing-library/jest-dom
Example:
<button>Submit</button>
expect(getByText(/submit/i)).toBeDisabled()