gorhom / react-native-bottom-sheet

A performant interactive bottom sheet with fully configurable options 🚀
https://ui.gorhom.dev/components/bottom-sheet
MIT License
6.36k stars 722 forks source link

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

Open gersomvg opened 2 years ago

gersomvg commented 2 years ago

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.

image

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 commented 2 years ago

Having the same issue.

gorhom commented 2 years ago

will work on a fix by this week

gersomvg commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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:

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

gorhom commented 2 years ago

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

PedroRestrepo commented 2 years ago

@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.

image

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

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

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

Alaa-Ben commented 1 year ago

Here's what I did, works for me:

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

use this:

import mockBottomSheet from '@gorhom/bottom-sheet/mock';
jest.mock('@gorhom/bottom-sheet', () => mockBottomSheet);
anabeatrizzz commented 7 months ago

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

anniekao commented 2 months ago

@anabeatrizzz were you able to resolve your issue? I'm seeing something similar in tests where the BottomSheetModal is open by default and tests are failing.