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
Logging StatusBar from react-native@0.68.2 in the component shows:
[Function: StatusBar] {
_propsStack: [],
_defaultProps: {
backgroundColor: { value: 'black', animated: false },
barStyle: { value: 'dark-content', animated: false },
translucent: false,
hidden: { value: false, animated: false, transition: 'fade' },
networkActivityIndicatorVisible: false
},
_updateImmediate: null,
_currentValues: null,
currentHeight: null,
_updatePropsStack: [Function (anonymous)]
}
We also have issue with _reactNative.Keyboard.addListener is not a function, it seems it does not work with react-native well.
Workaround
// don't know why we need this
jest.unmock('react-native')
Question
Any clue what is going wrong here? Thanks in advance