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.