enabled = false has no effect during tests

[Andarius]

Description

Passing enable={false} to a RectButton will have no effect when running jest tests.
My guess is that since RectButton is using TouchableNativeFeedback (

react-native-gesture-handler/src/mocks.ts

Line 34 in f0868f7

const RectButton = TouchableNativeFeedback;

) that uses disabled instead, it has no effect.

A potential fix could be:

import React from 'react';
import { Pressable } from 'react-native';
import type { RectButtonProperties } from 'react-native-gesture-handler';

const RectButtonMock = (props: RectButtonProperties) => {
  const { onPress, enabled, ...rest } = props;
  return (
    <Pressable
      disabled={!enabled}
      onPress={() => onPress && onPress(true)}
      {...rest}
    >
      {props.children}
    </Pressable>
  );
};

jest.mock('react-native-gesture-handler', () => {
  const actual = jest.requireActual('react-native-gesture-handler');
  return {
    ...actual,
    RectButton: RectButtonMock,
  };
});

Steps to reproduce

describe.only('Testing disabled Button', () => {
  it('onPress does not trigger', function () {
    const onPress = jest.fn();
    const { getByTestId } = render(
      <RectButton testID="btn" onPress={onPress} enabled={false} />
    );
    const btn = getByTestId('btn');

    expect(onPress).not.toHaveBeenCalled();
    fireEvent.press(btn);
    expect(onPress).not.toHaveBeenCalled();   // Will fail
  });
});

Snack or a link to a repository

NA

Gesture Handler version

2.8.0

React Native version

0.70.5

Platforms

Android

JavaScript runtime

Hermes

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

[github-actions]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[versten1uk]

Same issue here. onPress fires no matter if enabled or not.

[m-bert]

Hi! Could you please check if #3062 fixes this?

[sidferreira]

@m-bert @versten1uk @Andarius I did some digging and I believe the problem is some weird interaction on how fireEvent works.

https://github.com/callstack/react-native-testing-library/blob/3545a94d080687bbf96c0d4426b3e55201a3426f/src/fire-event.ts#L62

To fix my tests I just set pointerEvents: none, but it is a sub-optimal solution.

I wish someone from swmansion could reach callstack and find the best solution for this...

Edit: Pointer Events fixes only some cases... it is a bit deeper... It is not a drop in replacement when we talk about tests...

Edit 2: After a lot of tests, the issue seems to be a small trick that RN Pressable does with pressability (removing the onPress from the buttons) and something from fireEvent, which will (in my case) get the Pressable's parent onPress prop and call it as if it was the interactable component.

const MyPressable = ({ onPress, ...props }) => <Pressable onPress={onPress} {...props} />

const MyButton = (props) => {
  const { onPress, enabled, ...rest } = props;
  return (
    <MyPressable
      disabled={!enabled}
      onPress={() => onPress && onPress(true)}
      {...rest}
    >
      {props.children}
    </Pressable>
  );
};

In this case fireEvent will trigger the event based on MyButton as it receives an onPress prop, instead of giving up on MyPressable's state.

Edit 3: After a lot of improvements, my final changes are:

  const disabled = state === 'inactive';

  // BEGIN: Ported from react-native::Pressable, will PR into react-native-gesture-handler
  const _accessibilityState = {
    busy: ariaBusy ?? accessibilityState?.busy,
    checked: ariaChecked ?? accessibilityState?.checked,
    disabled: disabled || (ariaDisabled ?? accessibilityState?.disabled),
    expanded: ariaExpanded ?? accessibilityState?.expanded,
    selected: ariaSelected ?? accessibilityState?.selected,
  };
  // END: Ported from react-native::Pressable, will PR into react-native-gesture-handler

<Pressable
 ...

      accessibilityState={_accessibilityState}
      pointerEvents={disabled ? 'none' : pointerEvents}
      onStartShouldSetResponder={(params) =>
        onStartShouldSetResponder?.(params) || !disabled
      }
... />

Edit 4: #3347 WIP

[Andarius]

Hi! Could you please check if #3062 fixes this?

Hi,

I re-tested using the following, but it's still not working.

import { render, userEvent } from '@testing-library/react-native';
import { RectButton } from 'react-native-gesture-handler';


export const user = userEvent.setup()


describe('Testing disabled Button', () => {
  it('onPress does not trigger', async () => {
    const onPress = jest.fn();
    const { getByTestId } = render(
      <RectButton testID="btn" onPress={onPress} enabled={false} />
    );
    const btn = getByTestId('btn');

    expect(onPress).not.toHaveBeenCalled();
    await user.press(btn);
    expect(onPress).not.toHaveBeenCalled();   // Fails
  });
});

Here are the dependencies:

    "@testing-library/react-native": "^13.2.0",
    "jest": "^29.2.1",
    "react": "19.0.0",
    "react-native": "^0.79.0",
    "react-native-gesture-handler": "^2.26.0",
    "react-test-renderer": "19.0.0",

Here is the jest config:

"jest": {
    "preset": "react-native",
    "modulePathIgnorePatterns": [
      "<rootDir>/example/node_modules",
      "<rootDir>/lib/"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/__tests__/mocks.tsx"
    ],
    "setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "testMatch": [
      "**/?(*.)+(spec|test).(js|ts|tsx)"
    ],
    "moduleNameMapper": {
      "\\.svg": "<rootDir>/src/__tests__/__mocks__/svgMock.ts"
    },
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|@react-native|react-native-gesture-handler|@react-navigation|@react-native-community|react-native-reanimated|react-native-svg)/)"
    ]
  },