How to test Button disabled\enabled state?

[stasmotorny]

Hi, guys. I can't test Button state changes.
I have two inputs with validations, if user entered valid email and password and we have no errors login Button should become enabled otherwise it should be disabled.
When I'm testing my implementation on simulator everything works fine, btn becomes enabled or disabled as expected.
I want to write tests for this behaviour, but can't find a way to do it.
My test looks like this:

  it('Login button should be ENABLED if email and password are VALID', async () => {
    const user = userEvent.setup();

    const {getByTestId} = render(<App />);

    // Next two lines should simulate user input of valid data
    await user.type(getByTestId('EmailInput'), '[email protected]');
    await user.type(getByTestId('PasswordInput'), '12345');
    
    //After we simulated valid data input btn should become enabled
    const button = await screen.findByTestId('LoginBtn');
    expect(button).toBeEnabled();
  });

I was also trying to find some Button prop that defines enabled\disabled, but wasn't able to do it. accessibilityState.disabled is always true and accessible is also always true.

[lukewalczak]

I was testing it in the following way which gives me expected result. Make sure that your button has any touch handler passed, because without it it's always disabled.

it('test enabled state', () => {
  const { getByTestId, update } = render(
    <Button testID="button" disabled onPress={() => {}}>
      Test
    </Button>
  );

  expect(getByTestId('button')).not.toBeEnabled();

  update(
    <Button testID="button" disabled={false} onPress={() => {}}>
      Test
    </Button>
  );

  expect(getByTestId('button')).toBeEnabled();
});