Skip to content

[jest] Fixing enabled prop in buttons #3612

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 15, 2025

Conversation

akwasniewski
Copy link
Contributor

@akwasniewski akwasniewski commented Jul 14, 2025

Description

Passing enabled={false} to buttons in jest tests now has effect. I properly configured the corresponding mocks. Change was motivated by issue #2385.

Test plan

Tested using React Native 80.1

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

Copy link
Contributor

@m-bert m-bert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you checked if Pressable works? 😅

@@ -1,7 +1,16 @@
jest.mock('./src/RNGestureHandlerModule', () => require('./src/mocks'));
jest.mock('./src/components/GestureButtons', () => require('./src/__mocks__/GestureButtons'));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I read in jest docs, __mocks__ directory should be used to mock node modules. User modules can be mocked, but should be placed in the same directory (docs).

Could you check if mocking GestureButtons like this works? Something tells me that we don't even need this directory for the current use case, but I wouldn't change that.

So to summarize, if we need to create separate file with button mocks, then lets either make it in components/__mocks__, or create our own mocks directory and use them for both, current mocks.tsx and GestureButtons mock.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed, I managed to find an easier solution, we don't need seperate GestureButtons mock file. However, in the jestSetup we still must mock source files separetely to mocks

jest.mock('./lib/commonjs/RNGestureHandlerModule', () =>
require('./lib/commonjs/mocks')
);
jest.mock('./lib/commonjs/components/GestureButtons', () =>
require('./lib/commonjs/mocks')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As far as I can see bob doesn't generate __mocks__ directory when running yarn build. That's ok, but does this actually work, or does it work by accident because this file already contains these mocks?

What I want to say - do we need GestureButtons mock file?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked it, it's not by accident. I managed to find an easier solution, we don't need seperate GestureButtons mock file. However, in the jestSetup we still must mock source files separetely to mocks

jest.mock('./lib/module/RNGestureHandlerModule', () =>
require('./lib/module/mocks')
);
jest.mock('./lib/module/components/GestureButtons', () =>
require('./lib/module/mocks')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above

@akwasniewski akwasniewski force-pushed the mocking-disabled-gesture-buttons branch from bd5f5d4 to 88470f8 Compare July 15, 2025 06:37
@@ -31,14 +31,15 @@ const LongPressGestureHandler = View;
const PinchGestureHandler = View;
const RotationGestureHandler = View;
const FlingGestureHandler = View;
const RawButton = ({ enabled, ...rest }: any) => (
export const RawButton = ({ enabled, ...rest }: any) => (
<TouchableNativeFeedback disabled={!enabled} {...rest}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't really an issue with this PR, but i just noticed, won't the RawButton by default be disabled?
When enabled is undefined, the disabled is set to true.
Rather, the enabled should be checked against strict false - disabled={enabled === false}.

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't really an issue with this PR

It is not, but it would be great to fix it in this one (cc @akwasniewski)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed, and tested. Now it works as intended

@akwasniewski akwasniewski force-pushed the mocking-disabled-gesture-buttons branch from 7f5048f to 85e1a94 Compare July 15, 2025 11:27
@akwasniewski akwasniewski force-pushed the mocking-disabled-gesture-buttons branch from 85e1a94 to 60b8285 Compare July 15, 2025 11:29
@akwasniewski akwasniewski force-pushed the mocking-disabled-gesture-buttons branch from 0499b7e to 14053f3 Compare July 15, 2025 12:19
@m-bert
Copy link
Contributor

m-bert commented Jul 15, 2025

What about deprecating testOnly props form Pressable? (cc @akwasniewski, @latekvo)

@latekvo
Copy link
Member

latekvo commented Jul 15, 2025

What about deprecating testOnly props form Pressable?

I have nothing against it, since these won't be used anymore once the mocks are fixed.

Although it'd be best to notify testing-library maintainers of this change, since testOnly_* props are there only for tight integration with the testing-library and for nothing else.

(c.c. @mdjastrzebski)

@m-bert
Copy link
Contributor

m-bert commented Jul 15, 2025

Although it'd be best to notify testing-library maintainers of this change

Yes I agree, I wanted to know what do you think about deprecation 😅

@akwasniewski akwasniewski force-pushed the mocking-disabled-gesture-buttons branch 2 times, most recently from ecdd6e4 to e3782a6 Compare July 15, 2025 13:27
@akwasniewski akwasniewski force-pushed the mocking-disabled-gesture-buttons branch from e3782a6 to 98b52db Compare July 15, 2025 13:35
@akwasniewski akwasniewski merged commit b70def4 into main Jul 15, 2025
1 check passed
@akwasniewski akwasniewski deleted the mocking-disabled-gesture-buttons branch July 15, 2025 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants