Missing useEvent in mocks

EvertEt commented 1 month ago

Description

TypeError: _reanimatedWrapper.Reanimated.useEvent is not a function

      58 |   }
      59 |
    > 60 |   const view = render(ui, {
         |                      ^
      61 |     wrapper: Wrapper,
      62 |     ...renderOptions,
      63 |   })

      at useEvent (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector/useAnimatedGesture.ts:198:28)
      at GestureDetector (node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector/index.tsx:148:3)
      at Component (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6256:18)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10702:13)
      at mountIndeterminateComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12151:16)
      at beginWork$1 (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15798:12)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15735:5)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15707:7)
      at renderRootSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15412:20)
      at callback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2594:22)
      at callback (node_modules/react/cjs/react.development.js:2667:24)
      at Object.flushActQueue [as act] (node_modules/react/cjs/react.development.js:2521:11)
      at act (node_modules/@testing-library/react-native/src/render-act.ts:14:21)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:62:33)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:32:10)

Steps to reproduce

Looking at the stack trace, I assume we'd need a test with react-native-gesture-handler but unable to share our current implementation.

Snack or a link to a repository

Not available

Reanimated version

3.6.3

React Native version

0.73.9

Platforms

Android, iOS

JavaScript runtime

Hermes

Workflow

React Native

Architecture

Paper (Old Architecture)

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

github-actions[bot] commented 1 month ago

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?

cmw9706 commented 1 month ago

I had this too but just created

// in __mocks__/react-native-reanimated.ts
const useEvent = jest.fn(() => ({}));
export { useEvent }

SMJ93 commented 3 weeks ago

I fixed this by updating my jest.setup to use the require('react-native-reanimated').setUpTests(); as per the docs

Old:

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  // The mock for `call` immediately calls the callback which is incorrect
  // So we override it with a no-op
  Reanimated.default.call = () => {};

  return Reanimated;
});

New:

require('react-native-reanimated').setUpTests();

EvertEt commented 3 weeks ago

~~Thank you @SMJ93! This indeed seems to work for most of our tests~~

For some of our tests, this is introducing a RangeError: Invalid string length in pretty-format when using toMatchSnapshot so for those files we'll need to stick with using react-native-reanimated/mock.

Part of the item it fails to snapshot

``` FiberNode { tag: 5, key: null, elementType: 'View', type: 'View', stateNode: { type: 'View', props: { style: [Object], onLayout: [Function: onContainerLayout], children: [Array], collapsable: false, forwardedRef: [Object], animatedStyle: [Object] }, isHidden: false, children: [ [Object], [Object] ], internalInstanceHandle: [Circular *1], rootContainerInstance: { children: [Array], createNodeMock: [Function: createNodeMock], tag: 'CONTAINER' }, tag: 'INSTANCE' }, return: FiberNode { tag: 1, ```

EvertEt commented 2 weeks ago

@SMJ93 Update:

It seems setUpTests only sets up a custom matcher (toHaveAnimatedStyle) but not the mocks, see https://github.com/software-mansion/react-native-reanimated/issues/3982

tkyr-hh commented 3 days ago

I fixed this by updating my jest.setup to use the require('react-native-reanimated').setUpTests(); as per the docs

Old:

jest.mock('react-native-reanimated', () => {
  const Reanimated = require('react-native-reanimated/mock');

  // The mock for `call` immediately calls the callback which is incorrect
  // So we override it with a no-op
  Reanimated.default.call = () => {};

  return Reanimated;
});

New:

require('react-native-reanimated').setUpTests();

Thanks, this solution worked for me ✅.

software-mansion / react-native-reanimated