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:

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

Can you suggest a better approach?

Test that the disabled attribute of the button element is true? — jonrsharpe
– jonrsharpe, Commented Jun 14, 2019 at 7:58
Not OP's case, but for future visitors that came here looking to test aria-disabled, .toBeDisabled() won't work. The workaround is .toHaveAttribute('aria-disabled', 'true'). See jest-dom #144. — ggorlen
– ggorlen, Commented Dec 15, 2022 at 19:29

johnny peter · Accepted Answer · 2020-09-25 17:34:13Z

226

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

edited Sep 25, 2020 at 17:34

answered Jun 14, 2019 at 8:00

johnny peter

4,8701 gold badge28 silver badges39 bronze badges

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

9 Comments

Nikita Sivukhin Over a year ago

Just a note: there must be a relatevily fresh version of the jsdom library to be able to use closest(...) function in your example (v 11.12.0 or higher)

Sam Over a year ago

Note that toHaveAttribute requires that github.com/testing-library/jest-dom be installed.

René Over a year ago

For everyone using a different framework than jest, e.g. Jasmine, something like this should do the job: expect(getByText(/Click me/i).closest('button').hasAttribute('disabled')).toBeTrue();

Chris Over a year ago

While this answer works, personally I feel like its not aligned to the ethos of react-testing-library. I've provided an alternative answer below that, to me, is more in-tune with rtl (not saying better or worse, just an alternative)

Shawn Erquhart Over a year ago

I felt similarly to others about this approach being focused on implementation details, but it's noteworthy that in testing-library's own jest-dom implementation, .toBeDisabled() is just checking the attribute, and they recommend using this matcher for checking disabled state in their own guide.

|

Towko · Accepted Answer · 2020-02-18 13:14:11Z

40

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

edited Feb 18, 2020 at 13:14

Towko

337 bronze badges

answered Jul 17, 2019 at 19:54

Meysam Izadmehr

3,2601 gold badge19 silver badges25 bronze badges

Comments

lpham2525 · Accepted Answer · 2022-01-27 03:47:16Z

21

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)

edited Jan 27, 2022 at 3:47

lpham2525

53 bronze badges

answered Jun 18, 2020 at 6:46

Tony Nguyen

3,49814 silver badges20 bronze badges

1 Comment

Sebastian Nielsen Over a year ago

instead of .toBe(null) use .toBeNull().

Chris · Accepted Answer · 2021-08-08 10:20:34Z

16

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

answered Aug 8, 2021 at 10:20

Chris

58.9k34 gold badges158 silver badges198 bronze badges

6 Comments

Nikita Sivukhin Over a year ago

Good point! Altough I think that in the case of disabled button you can sacrifice the purity of concept and test "implementation details", especially when you test disabled attribute which is the part of the HTML specification with fixed behaviour. Can you provide some example that will shows cons of testing disabled prop and pros of mocking click callback, just for my interest?

Logan Cundiff Over a year ago

As @NikitaSivukhin stated, you are testing the HTML fixed behavior when you check if clicking a disabled button will trigger OnClick. While the user cannot see if a prop is disabled, they will see the visual effect of the disabled prop.

Chris Over a year ago

@LoganCundiff Of course. Basically "never say never" - there will always be exceptions to the "rules". I personally wouldn't check for the disabled attribute but there may be cases where it makes more sense to sacrifice the purity of the concept as Nikita said. Ultimately I don't know your codebase and you should do what fits within your team and projects

Logan Cundiff Over a year ago

@Chris Yea I think it is good you brought up this point. It's worth asking these questions when considering how to implement a test instead of taking a one fit all approach. Good point.

Deno Over a year ago

Testing the disabled prop is not implementation detail and should be encouraged. If you only test for onClick, the user may see an enabled button that doesn't call the onClick function, causing frustration. Jest wouldn't have implemented the shorthand method toBeDisabled if it was discouraged

|

Ultimate Fire · Accepted Answer · 2021-07-06 00:47:58Z

6

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.

answered Jul 6, 2021 at 0:47

Ultimate Fire

2814 silver badges8 bronze badges

Comments

Satish · Accepted Answer · 2020-04-09 02:33:23Z

3

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

answered Apr 9, 2020 at 2:33

Satish

391 bronze badge

1 Comment

Rokit Over a year ago

I like this answer because it doesn't rely on another library. Thanks.

Yatrix · Accepted Answer · 2020-05-29 19:02:23Z

1

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>

answered May 29, 2020 at 19:02

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

Comments

Markoz Peña · Accepted Answer · 2022-05-18 19:14:04Z

1

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

answered May 18, 2022 at 19:14

Markoz Peña

111 bronze badge

Comments

Debmallya · Accepted Answer · 2023-05-15 14:13:57Z

0

Current answer:

expect(await screen.findByRole('button', { name: 'Click me' })).toBeEnabled();

answered May 15, 2023 at 14:13

Debmallya

5746 silver badges16 bronze badges

Comments

Tushar Balar · Accepted Answer · 2023-10-30 18:07:44Z

0

You can use the 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();

answered Oct 30, 2023 at 18:07

Tushar Balar

7513 gold badges8 silver badges25 bronze badges

Collectives™ on Stack Overflow

Check that button is disabled in react-testing-library

10 Answers 10

9 Comments

Comments

1 Comment

6 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

9 Comments

Comments

1 Comment

6 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related