如何断言React Native Testing库中的按钮已禁用？

如何解决如何断言React Native Testing库中的按钮已禁用？

如何断言React Native Testing库中的按钮已禁用？我会想象像这样的东西：

expect(getByRole('button')).toBedisabled()

但是RNTL不提供toBedisabled断言。

解决方法

由于 RN 的性质，这是一个常见问题。我只是通过测试回调函数的实际效果来达到我的目标，而不仅仅是比较调用次数之类的......

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

确保您的按钮看起来像：

const isBlockedInteraction: boolean = isLoading || isDisabled;

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