Skip to content

[Bug]: mock.js in v5.1.6 breaks Jest due to untranspiled JSX #2377

@vanGalilea

Description

@vanGalilea

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Web

What happened?

After upgrading to @gorhom/bottom-sheet v5.1.6, running jest fails with the following error:

SyntaxError: Unexpected token '<'

This occurs because the mock.js file introduced in PR #2265 now includes JSX, which Jest cannot parse unless explicitly configured to transform the module using Babel.

This is a breaking change for apps that:

use Jest without transforming node_modules (which is default behavior), and rely on the mock working out of the box, as it did prior to v5.1.6.

📌 The root issue is the JSX syntax like:

<Content data={this.data} />

inside a non-transpiled .js file.

Reproduction steps

  1. Install @gorhom/bottom-sheet v5.1.6

  2. Create a test file like:

import { render } from '@testing-library/react-native';
import { BottomSheetModal } from '@gorhom/bottom-sheet';

test('renders modal', () => {
  render(<BottomSheetModal />);
});
  1. Run jest

Expected: ✅ Test passes or mock works out of the box.
Actual: ❌ Jest fails with:

/node_modules/@gorhom/bottom-sheet/mock.js:54
  <Content data={this.data} />
  ^

SyntaxError: Unexpected token '<'

Reproduction sample

https://creations.mtdv.me/blog/posts/9qb9BRE0gI

Relevant log output

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinginvalidThis doesn't seem right

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions