Check that button is disabled in react-testing-library
ReactjsReact Testing-LibraryReactjs Problem Overview
I have a React component that generates a button whose content contains a <span>
element like this one:
function Click(props) {
return (
<button disable={props.disable}>
<span>Click me</span>
</button>
);
}
I want to test the logic of this component with the use of react-testing-library
and mocha
+ chai
.
The problem at which I stuck at the moment is that the getByText("Click me")
selector returns the <span>
DOM node, but for the tests, I need to check the disable
attribute of the <button>
node. What is the best practice for handling such test cases? I see a couple of solutions, but all of them sound a little bit off:
- Use
data-test-id
for<button>
element - Select one of the ancestors of the
<Click />
component and then select the buttonwithin(...)
this scope - Click on the selected element with
fireEvent
and check that nothing has happened
Can you suggest a better approach?
Reactjs Solutions
Solution 1 - Reactjs
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();
Solution 2 - Reactjs
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()
Solution 3 - Reactjs
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)
Solution 4 - Reactjs
I would politely argue you are testing an implementation detail, which react-testing-library discourages.
> The more your tests resemble the way your software is used, the more confidence they can give you.
If a button is disabled, a user doesn't see a disabled prop, instead they see nothing happen. If a button is enabled, a user doesn't see the omission of a disabled prop, instead they see something happen.
I believe you should be testing for this instead:
const Button = (props) => (
<button
type="submit"
onClick={props.onClick}
disabled={props.disabled}
>
Click me
</button>
);
describe('Button', () => {
it('will call onClick when enabled', () => {
const onClick = jest.fn();
render(<Button onClick={onClick} disabled={false} />);
userEvent.click(getByRole('button', /click me/i));
expect(onClick).toHaveBeenCalledTimes(1);
});
it('will not call onClick when disabled', () => {
const onClick = jest.fn();
render(<Button onClick={onClick} disabled={true} />);
userEvent.click(getByRole('button', /click me/i));
expect(onClick).not.toHaveBeenCalled();
});
})
Solution 5 - Reactjs
toHaveAttribute is good option in using attribute.
<button data-testid="ok-button" type="submit" disabled>ok</button>
const button = getByTestId('ok-button')
//const button = getByRole('button');
expect(button).toHaveAttribute('disabled')
expect(button).toHaveAttribute('type', 'submit')
expect(button).not.toHaveAttribute('type', 'button')
expect(button).toHaveAttribute('type', expect.stringContaining('sub'))
expect(button).toHaveAttribute('type', expect.not.stringContaining('but'))
Hope this will be helpful.
Solution 6 - Reactjs
You can test the disable prop of the button just by using @testing-library/react
as follows.
example:
import { render } from '@testing-library/react';
const {getByText} = render(<Click/>)
expect(getByText('Click me').closest('button').disabled).toBeTruthy()
Solution 7 - Reactjs
Another way to fix this would be to grab by the role and check the innerHTML like,
const { getByRole } = render(<Click />)
const button = getByRole('button')
// will make sure the 'Click me' text is in there somewhere
expect(button.innerHTML).toMatch(/Click me/))
This isn't the best solution for your specific case, but it's one to keep in your back pocket if you have to deal with a button component that's not an actual button, e.g.,
<div role="button"><span>Click Me</span></div>
Solution 8 - Reactjs
My solution, It seems to me that this case covers well what is necessary. Check that the button is disabled, so toHaveBeenCalledTimes must receive 0
test('Will not call onClick when disabled', () => {
const mockHandler = jest.fn()
render(<Button title="Disabled account" disabled={true} onClick={mockHandler} />)
const button = screen.getByText("Disabled account")
fireEvent.click(button)
expect(mockHandler).toHaveBeenCalledTimes(0)
expect(button).toHaveProperty('disabled', true)
})