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