[v4] Jest tests don't run (included a minimal reproduction)

[gersomvg]

Bug

I have a bigger project that uses this library quite heavily, but when including it in our jest testing suite I run into all kinds of errors.

I've made a minimal reproduction here: https://github.com/gersomvg/bug-bottom-sheet-jest

The error that I run into there isn't exactly the same as the one I have in the bigger project, but I suspect they are related.

It looks like @gorhom/bottom-sheet doesn't play nicely with gesture-handler and reanimated mocks.

Environment info

Library	Version
@gorhom/bottom-sheet	4.2.2
react-native	17.0.2
react-native-reanimated	2.8.0
react-native-gesture-handler	2.4.1 (tried 1.10.3 as well)

Steps To Reproduce

1. Clone this repo: https://github.com/gersomvg/bug-bottom-sheet-jest
2. Follow the three steps in the readme

Describe what you expected to happen:

1. The tests run without error

Reproducible sample code

https://github.com/gersomvg/bug-bottom-sheet-jest

[hannibaldinski]

Having the same issue.

[gorhom]

will work on a fix by this week

[gersomvg]

@gorhom Amazing! Let me know if there is anything I can help you with, for example testing fixes or adding more docs regarding jest/testing.

I can also try out any possible fixes on our bigger project, to see if it also solves the issues there, since we use a few more bottom-sheet hooks and components in that project.

[gorhom]

hi @gersomvg , could you test this branch and let me know if its working ?

yarn add ssh://github.com/gorhom/react-native-bottom-sheet#refactor/added-jest-mock

[gersomvg]

Thanks for this @gorhom! I guess this is a good and simple approach to just mock out the lib completely for external consumers, assuming the lib tests its internals itself.

Few issues I ran into:

• The mock for BottomSheetView seems to be missing
• It seems like the yarn add doesn't generate all needed build files? I couldn't figure out how to build your branch, so I just copied the mock.js and package.json changes manually to my node_modules. This worked, except for that my typescript code didn't recognise the mock.js as a commonjs (?) module, so after mocking, the BottomSheet in import BottomSheet from '@gorhom/react-native-bottom-sheet' contained everything from module.exports in mock.js.

After accounting for these two points, my tests ran fine! 🎊

[gorhom]

Hi @gersomvg , did the release v4.3.0 fixes your issue ?

[PedroRestrepo]

@gorhom seems like the issue with toString is fixed, but was getting the following error because of how the default is imported and used in our codebase.

Fixed it by adding __esModule to the jest mock so it handles the default correctly

jest.mock('@gorhom/bottom-sheet', () => ({
  ...mockBottomSheet,
  __esModule: true,
}));

[gersomvg]

@gorhom Thanks for the release! I was on holiday, hence the late response. With @PedroRestrepo's fix it works for me.

[Alaa-Ben]

Here's what I did, works for me:

jest.mock('@gorhom/bottom-sheet', () => ({
  __esModule: true,
  ...require('@gorhom/bottom-sheet/mock')
}))

[pvinis]

use this:

import mockBottomSheet from '@gorhom/bottom-sheet/mock';
jest.mock('@gorhom/bottom-sheet', () => mockBottomSheet);

[anabeatrizzz]

Here's what I did, works for me:

jest.mock('@gorhom/bottom-sheet', () => ({
  __esModule: true,
  ...require('@gorhom/bottom-sheet/mock')
}))

I have a screen with three BottomSheet components. When I run a test case, all of them are opened on debug tree and overlap a button that must be pressed. Do you have any tips regarding this mock, thus none of the components stay opened? @Alaa-Ben