How to assert that a button is disabled in React Native Testing Library?

Question

How can I assert that a button is disabled in React Native Testing Library? I would imagine something like:

expect(getByRole('button')).toBeDisabled()

but RNTL doesn't provide toBeDisabled assertion.

@jonrsharpe Thanks for pointing me in the right direction. The correct method is toHaveProp. — Petr K.
– Petr K., Commented Nov 5, 2020 at 14:17
At the end I've found out that there is .toBeDisabled indeed. Doc: github.com/testing-library/jest-native#tobedisabled — Petr K.
– Petr K., Commented Nov 5, 2020 at 14:25

David Leuliette · Accepted Answer · 2021-05-30 01:53:41Z

3

this is a common issue due to RN nature. I have managed to reach my goal by just testing the actual effect of callback function, not just comparing the number of calls or something like that...

describe('<Button /> - ', () => {
  let state = false
  const onPressMock = jest.fn(() => {
    state = !state
  })
  const props: ButtonProps = {
    text: 'Submit',
    onPress: onPressMock
  }

  it('should become disabled', () => {
    // act: render container
    const { container } = render(<Button {...props} isDisabled />)

    // assert 1: check if button receives {isDisabled}
    expect(container.props.isDisabled).toEqual(true)
    
    // act2: fire callback
    fireEvent(container, 'onPress')
    
    // assert 2: "state" should remain as false.
    expect(state).toEqual(false)
  })
})

make sure that your button looks like:

const isBlockedInteraction: boolean = isLoading || isDisabled;

return (
  <TouchableOpacity
    onPress={!isBlockedInteraction && onPress}
    disabled={isBlockedInteraction}
    {...props}
  />
)

edited May 30, 2021 at 1:53

David Leuliette

2,06126 silver badges35 bronze badges

answered Mar 14, 2021 at 9:23

wentris

5135 silver badges10 bronze badges

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

1 Comment

Johhan Santana Over a year ago

this solution for some reason doesn't work in react native... it still says that the function was called once and still changes the variable state to true

AndriyFM · Accepted Answer · 2022-06-19 04:30:58Z

0

Quite a simple try toHaveProperty method, I hope that helped.

example:

import React from 'react'
import {fireEvent, render} from '@testing-library/react-native';
import {SignInScreen} from './SignInScreen';

it('disabled button if email and password are empty', () => {
  const screen = render(<SignInScreen />);
  const button = screen.getByText('Login');

  // screen.debug();
  // console.log(button.props);

  expect(button.props).toHaveProperty('disabled', true);
});

answered Jun 19, 2022 at 4:30

AndriyFM

1,62318 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to assert that a button is disabled in React Native Testing Library?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related