Am I missing something in my jest setup?

[atheck]

I use the Reanimated Swipeable component in my UI. When running UI tests with jest, I get a warning:

[react-native-gesture-handler] None of the callbacks in the gesture are worklets. If you wish to run them on the JS thread use '.runOnJS(true)' modifier on the gesture to make this explicit. Otherwise, mark the callbacks as 'worklet' to run them on the UI thread.

      36 |
      37 | const renderComponent = (component: ReactElement): RenderResult =>
    > 38 |      render(
         |            ^
      39 |              <GestureHandlerRootView>
      40 |                      <Provider>{component}</Provider>
      41 |              </GestureHandlerRootView>,

      at warn (../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector/utils.ts:104:13)
      at attachHandlers (../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector/attachHandlers.ts:45:37)
      at ../node_modules/react-native-gesture-handler/lib/commonjs/handlers/gestures/GestureDetector/index.tsx:154:19
      at commitHookEffectListMount (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13038:26)
      at commitLayoutEffectOnFiber (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:13153:15)
      at commitLayoutMountEffects_complete (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14369:9)
      at commitLayoutEffects_begin (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14355:7)
      at commitLayoutEffects (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14340:3)
      at commitRootImpl (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16101:5)
      at commitRoot (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15972:5)
      at performSyncWorkOnRoot (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15493:3)
      at flushSyncCallbacks (../node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2597:22)
      at flushActQueue (../node_modules/react/cjs/react.development.js:2667:24)
      at act (../node_modules/react/cjs/react.development.js:2521:11)
      at actImplementation (../node_modules/@testing-library/react-native/src/act.ts:30:25)
      at renderWithAct (../node_modules/@testing-library/react-native/src/render-act.ts:12:11)
      at renderInternal (../node_modules/@testing-library/react-native/src/render.tsx:59:33)
      at renderInternal (../node_modules/@testing-library/react-native/src/render.tsx:29:10)

My setup:

• I use a <GestureHandlerRootView> around my tested components
• I use the reanimated babel plugin
• I use the "node_modules/react-native-gesture-handler/jestSetup.js" in my jest setup
• I call the setUpTests() from "react-native-reanimated" in my jest setup

Am I missing something?

[m-bert]

Could you show whole test code? As the error suggests, your gesture callbacks are not worklets, so you either want to run them on JS thread with runOnJS(true), or add 'worklet' directive.

[atheck]

That's the problem, I don't have any gesture callbacks.

I have a ListItem component, which uses a Swipeable:

My ListItem component:

function ListItem({ children }): JSX.Element {
  return (
  <Swipeable
    overshootRight={false}
    leftThreshold={80}
    rightThreshold={40}
    activeOffsetX={activeOffsetX}
  >
    {children}
  </Swipeable>
  );
}

Even if I only render the ListItem component in my tests the warning is printed.

[m-bert]

I assume that this is our old Swipeable component, not ReanimatedSwipeable, right?

[atheck]

No, it's the new reanimated version.

[m-bert]

Oh okay, I get it now. The thing is, jest is similar to web environment, therefore worklets don't make much sense there (or should I say, they simply don't work in that case). Check that throws warning is called while handlers are being attached. At this point, callbacks are already workletized, but in jest it doesn't happen, hence you see the warning. It should be safe to ignore it.

[atheck]

Ah ok, sorry, I should have mentioned that I'm using the new Swipeable.

Your explanation makes sense to me. Thank you very much.

[m-bert]

I know that these warnings may be irritating, so I've prepared PR that will disable them in jest 😄