React Native: replacing formik with react-hook-form break Unit Test with Jest

Issue

This Content is from Stack Overflow. Question asked by Dimitri Kopriwa

I did a POC with react-hook-form to see if it’s a better lib to replace formik. My pull request is just replacing the lib and is visible here: https://github.com/pass-culture/pass-culture-app-native/pull/3564

It seems OK, however, we can still see re-render of the whole screen for both of the lib so it’s unclear at this stage which one we will take for our app, which host at the moment 19 form and will grow.

Unit testing are now broken, we test with @testing-library/react-native, this is the error and it is not understandable:

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      56 |   const isAbsolutePosition = position === 'absolute' || !!withGoBackButton || !!RightComponent
      57 |   return (
    > 58 |     <Header>
         |                           ^
      59 |       {!!isAbsolutePosition && <SpacerAbsolutePosition height={height + top} />}
      60 |       <ColorContainer
      61 |         backgroundColor={backgroundColor}

      at Object.get StatusBar [as StatusBar] (node_modules/react-native/index.js:99:12)
      at src/ui/components/headers/PageHeader.tsx:58:27
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
      at flushPassiveEffectsImpl (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14560:11)

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      51 |      * On Android, keyboardWillHide does not exist and keyboardDidHide is then used https://github.com/facebook/react-native/issues/3468
      52 |      */
    > 53 |     if (Platform.OS === 'android') {
         |                                         ^
      54 |       handleKeyboardWillHide(e)
      55 |     }
      56 |     // If needed, implement iOS behavior here

      at Object.get Keyboard [as Keyboard] (node_modules/react-native/index.js:218:12)
      at src/ui/components/keyboard/useKeyboardEvents.ts:53:41
      at invokePassiveEffectCreate (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14504:20)
      at Object.invokeGuardedCallbackProd (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
      at invokeGuardedCallback (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)

 RUNS  src/features/profile/pages/ChangePassword/tests/ChangePassword.native.test.tsx
/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/scheduler/cjs/scheduler.development.js:60
        throw e;
        ^

TypeError: _reactNative.StatusBar.setBarStyle is not a function
    at /home/dka/workspace/github.com/pass-culture/pass-culture-app-native/src/ui/components/headers/PageHeader.tsx:58:37
    at Object.invokeGuardedCallbackProd (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11308:10)
    at invokeGuardedCallback (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:11499:31)
    at flushPassiveEffectsImpl (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14560:11)
    at unstable_runWithPriority (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/scheduler/cjs/scheduler.development.js:468:12)
    at runWithPriority (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:2486:10)
    at flushPassiveEffects (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14464:14)
    at /home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14341:11
    at workLoop (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/scheduler/cjs/scheduler.development.js:417:34)
    at flushWork (/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/node_modules/scheduler/cjs/scheduler.development.js:390:14)

Node.js v18.7.0

What we expect

We expect unit test to pass, as it does in the main branch with formik

git clone --single-branch --branch master https://github.com/pass-culture/pass-culture-app-native.git
cd pass-culture-app-native
yarn
nvm use # or preceed with `nvm install 18` if you don't have node 18
yarn test:unit src/features/profile/pages/ChangePassword/tests/ChangePassword.native.test.tsx

What is happening (with reproduction)

This error does not happen with formik, this is how to reproduce:

git clone --single-branch --branch react-hook-form-poc https://github.com/pass-culture/pass-culture-app-native.git
cd pass-culture-app-native
yarn
nvm use # or preceed with `nvm install 18` if you don't have node 18
yarn test:unit src/features/profile/pages/ChangePassword/tests/ChangePassword.native.test.tsx

Any clue what is going wrong here? Thanks in advance



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?