Cannot check if an element is disabled after updating to v7

[Covicake]

Describe the bug

In v6.0.0, I was able to check if an element had a disabled prop like this: expect(element.props.disabled).toBeTruthy(), but since I updated to v7.0.1, the disabled attribute is no longer in the element.

Expected behavior

I would like to check if an element is disabled or not

Steps to Reproduce

Render a <TouchableOpacity disabled /> component and then try to check if it is disabled with expect(element.props.disabled).toBeTruthy()

Versions

@testing-library/react-native: ^7.0.1 => 7.0.1 
react: ~16.11.0 => 16.11.0 
react-native: https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz => 0.62.2 

[thymikee]

Can you provide a repro we can download?

[Covicake]

https://github.com/Covicake/react-native-issue

run yarn test after installing the dependencies. The test is in App.spec.tsx

[pillu00]

you can use jest-native matcher toBeDisabled(), instead of checking props directly. That should work.

[Covicake]

you can use jest-native matcher toBeDisabled(), instead of checking props directly. That should work.

That's the first thing that I tried but it doesn't work. The test passes using toBeDisabled() but it also passes using toBeEnabled().

And also, I don't know why VS Code doesn't recognize those functions to be part of the expect. I added the 'extend-expect' thing to the jest.setup.js and it doesn't crash when I run the tests, so I don't know what else do I have to do to make the editor know of these functions

[pillu00]

@Covicake , You're right. Moreover, when i use not.toBeDisabled() or not.toBeEnabled(). The test fails with error, Received element is disabled and Received element is enabled respectively.

Anyway there is already a open bug on jest-native --> testing-library/jest-native#23

Please also have a look there, if you haven't done it already 🙂

[Covicake]

@pillu00 Alright, thanks for the info. Let's hope they fix it soon!

[cross19xx]

you can use jest-native matcher toBeDisabled(), instead of checking props directly. That should work.

That's the first thing that I tried but it doesn't work. The test passes using toBeDisabled() but it also passes using toBeEnabled().

And also, I don't know why VS Code doesn't recognize those functions to be part of the expect. I added the 'extend-expect' thing to the jest.setup.js and it doesn't crash when I run the tests, so I don't know what else do I have to do to make the editor know of these functions

To ensure that VSCode recognizes these functions as part of expect, create a global.d.ts in the project root and import extend-expect

import "@testing-library/jest-native/extend-expect";

[thymikee]

@Covicake if you check the debug output:

<View
      accessibilityLabel="test"
      accessible={true}
      focusable={false}
      onClick={[Function onClick]}
      onResponderGrant={[Function onResponderGrant]}
      onResponderMove={[Function onResponderMove]}
      onResponderRelease={[Function onResponderRelease]}
      onResponderTerminate={[Function onResponderTerminate]}
      onResponderTerminationRequest={[Function onResponderTerminationRequest]}
      onStartShouldSetResponder={[Function onStartShouldSetResponder]}
      style={
        Object {
          "opacity": 1,
        }
      }
    />

you'll notice that the View host component doesn't get the disabled prop, although it's still disabled because it has onStartShouldSetResponder implemented. You can verify it's disabled by acting on it (firing an event that won't call the or something), like this:

it("is disabled", () => {
  const spy = jest.fn();
  const { getByLabelText } = render(
    <TouchableOpacity disabled accessibilityLabel="test" onPress={spy} />
  );
  
  fireEvent.press(getByLabelText("test"));
  expect(spy).not.toHaveBeenCalled();
});

[JoseLion]

@thymikee that does not really solve the problem. Most of the time you'll not be able to change the onPress prop for a spy because usually, we'd want to test buttons deep within a screen.

As a workaround, I implemented a helper function that checks if onStartShouldSetResponder is implemented and has the pressablility config present:

export function isDisabled(element: Nullable<ReactTestInstance>): boolean {
  return !!element?.props.onStartShouldSetResponder?.testOnly_pressabilityConfig()?.disabled;
}

Then in a spec

expect(isDisabled(getByText("Cancel")).toEqual(false);

expect(isDisabled(getByText("Continue")).toEqual(true);

[thymikee]

Yea, sounds like something to be included in toBeDisabled() custom matcher here: https://github.com/testing-library/jest-native/ cc @mdjastrzebski

[JoseLion]

While jest-native is great, we could not be using it on a project. We could not be even using Jest and testing with Mocha for instance (which is possible and fairly easy to achieve 😅).

IMHO, I think it'll be better if this issue is addressed right from RNTL. I think this is not just an assertion convenience, it's usually very important to tests that interactions are enable or disabled for a user 🙂

It'd be great if this issue can be reopened 😀