Check that button is disabled in react-testing-library

Question

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:

1. Use data-test-id for <button> element
2. Select one of the ancestors of the <Click /> component and then select the button within(...) this scope
3. Click on the selected element with fireEvent and check that nothing has happened

Can you suggest a better approach?

Answer 1

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

Answer 2

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()