I've been trying to test with jest and @testing-library/react-native but I'm facing this error and I don't know how to fix:
node 'node_modules/.bin/jest' '/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/screens/PhoneContact/__tests__/PhoneContact.test.tsx' -t 'PhoneContact should navigate to L
ogin screen'
watchman warning: Recrawled this watch 1 times, most recently because:
MustScanSubDirs UserDroppedTo resolve, please review the information on
https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl
To clear this warning, run:
`watchman watch-del '/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing' ; watchman watch-project '/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing'`
console.error
Warning: An update to null inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/Flag.tsx:63:27)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/Flag.tsx:81:3)
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryPicker.tsx:81:5)
at ThemeProvider (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/@callstack/react-theme-provider/src/createThemeProvider.js:14:3)
at theme (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/index.tsx:50:17)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at AnimatedComponent (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Animated/createAnimatedComponent.js:52:26)
at AnimatedComponentWrapper
at TouchableOpacity (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js:131:23)
at TouchableOpacity
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at children (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryModalProvider.tsx:18:40)
at PhoneInput (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-phone-number-input/lib/index.js:18:22)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at props (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-hook-form/src/controller.tsx:51:54)
at control (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/components/ControlledPhoneInput/index.tsx:21:3)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at ImageBackground (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Image/ImageBackground.js:46:22)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at children (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/components/BackgroundImage/index.tsx:10:35)
at RCTSafeAreaView
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at Login (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/screens/PhoneContact/index.tsx:29:14)
at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:72:30)
at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:46:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16677:9)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14877:5)
at dispatchSetState (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7510:7)
at Object.setValue [as setResult] (node_modules/react-async-hook/src/index.ts:158:20)
at setResult (node_modules/react-async-hook/src/index.ts:255:24)
at tryCallOne (node_modules/promise/lib/core.js:37:12)
at node_modules/promise/lib/core.js:123:15
at flush (node_modules/asap/raw.js:50:29)
console.error
Warning: An update to CountryPicker inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryPicker.tsx:81:5)
at ThemeProvider (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/@callstack/react-theme-provider/src/createThemeProvider.js:14:3)
at theme (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/index.tsx:50:17)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at AnimatedComponent (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Animated/createAnimatedComponent.js:52:26)
at AnimatedComponentWrapper
at TouchableOpacity (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js:131:23)
at TouchableOpacity
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at children (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryModalProvider.tsx:18:40)
at PhoneInput (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-phone-number-input/lib/index.js:18:22)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at props (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-hook-form/src/controller.tsx:51:54)
at control (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/components/ControlledPhoneInput/index.tsx:21:3)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at ImageBackground (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Image/ImageBackground.js:46:22)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at children (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/components/BackgroundImage/index.tsx:10:35)
at RCTSafeAreaView
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockNativeComponent.js:17:18)
at Styled (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled/index.js:23:34)
at /Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/nativewind/dist/styled-component.js:10:57
at Login (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/screens/PhoneContact/index.tsx:29:14)
at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:72:30)
at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:46:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16677:9)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14877:5)
at dispatchSetState (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7510:7)
at setState (node_modules/react-native-country-picker-modal/src/CountryPicker.tsx:143:5)
at tryCallOne (node_modules/promise/lib/core.js:37:12)
at node_modules/promise/lib/core.js:123:15
at flush (node_modules/asap/raw.js:50:29)
console.error
Warning: An update to null inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/Flag.tsx:63:27)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/Flag.tsx:81:3)
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryPicker.tsx:81:5)
at ThemeProvider (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/@callstack/react-theme-provider/src/createThemeProvider.js:14:3)
at theme (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/index.tsx:50:17)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at AnimatedComponent (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Animated/createAnimatedComponent.js:52:26)
at AnimatedComponentWrapper
at TouchableOpacity (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js:131:23)
at TouchableOpacity
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at children (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryModalProvider.tsx:18:40)
at PhoneInput (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-phone-number-input/lib/index.js:18:22)
at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:72:30)
at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:46:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16677:9)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14877:5)
at dispatchSetState (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7510:7)
at Object.setValue [as setResult] (node_modules/react-async-hook/src/index.ts:158:20)
at setResult (node_modules/react-async-hook/src/index.ts:255:24)
at tryCallOne (node_modules/promise/lib/core.js:37:12)
at node_modules/promise/lib/core.js:123:15
at flush (node_modules/asap/raw.js:50:29)
console.error
Warning: An update to CountryPicker inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
at countryCode (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryPicker.tsx:81:5)
at ThemeProvider (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/@callstack/react-theme-provider/src/createThemeProvider.js:14:3)
at theme (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/index.tsx:50:17)
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at AnimatedComponent (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Animated/createAnimatedComponent.js:52:26)
at AnimatedComponentWrapper
at TouchableOpacity (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js:131:23)
at TouchableOpacity
at View
at Component (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native/jest/mockComponent.js:28:18)
at children (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-country-picker-modal/src/CountryModalProvider.tsx:18:40)
at PhoneInput (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/node_modules/react-native-phone-number-input/lib/index.js:18:22)
at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:72:30)
at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:46:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16677:9)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14877:5)
at dispatchSetState (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7510:7)
at setState (node_modules/react-native-country-picker-modal/src/CountryPicker.tsx:143:5)
at tryCallOne (node_modules/promise/lib/core.js:37:12)
at node_modules/promise/lib/core.js:123:15
at flush (node_modules/asap/raw.js:50:29)
console.error
Warning: An update to Login inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):
act(() => {
/* fire events that update state */
});
/* assert on the output */
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
at Login (/Users/rodrigodiasdefigueiredo/Desktop/zerelparksharing/src/screens/PhoneContact/index.tsx:29:14)
at printWarning (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:72:30)
at error (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:46:7)
at warnIfUpdatesNotWrappedWithActDEV (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:16677:9)
at scheduleUpdateOnFiber (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14877:5)
at dispatchSetState (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7510:7)
at Object.next (node_modules/react-hook-form/src/useForm.ts:98:8)
at Object.observer [as next] (node_modules/react-hook-form/src/utils/createSubject.ts:26:22)
at node_modules/react-hook-form/src/logic/createFormControl.ts:1065:22
FAIL src/screens/PhoneContact/__tests__/PhoneContact.test.tsx
PhoneContact
✕ should navigate to Login screen (234 ms)
○ skipped should show an erro if the input is empty
● PhoneContact › should navigate to Login screen
expect(jest.fn()).toHaveBeenCalledWith(...expected)
Expected: "Login"
Number of calls: 0
40 | fireEvent.press(buttonContinue);
41 |
> 42 | expect(mockedNavigation).toHaveBeenCalledWith('Login');
| ^
43 | });
44 |
45 | it('should show an erro if the input is empty', async () => {
at Object.toHaveBeenCalledWith (src/screens/PhoneContact/__tests__/PhoneContact.test.tsx:42:30)
------------------------------------|---------|----------|---------|---------|-------------------
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
------------------------------------|---------|----------|---------|---------|-------------------
All files | 9.58 | 6.41 | 10.71 | 9.62 |
components/BackgroundImage | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
components/ControlledPhoneInput | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
components/CustomButton | 100 | 50 | 100 | 100 |
index.tsx | 100 | 50 | 100 | 100 | 32
components/CustomFooter | 0 | 0 | 0 | 0 |
index.tsx | 0 | 0 | 0 | 0 | 16-56
components/CustomStatusBar | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
components/CustomToast | 0 | 0 | 0 | 0 |
index.tsx | 0 | 0 | 0 | 0 | 9-91
components/LoginFormInput | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 9-27
components/LoginHeader | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
components/LoginSection | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
components/LoginTitle | 100 | 100 | 100 | 100 |
index.tsx | 100 | 100 | 100 | 100 |
components/OpenDoorModal | 0 | 0 | 0 | 0 |
index.tsx | 0 | 0 | 0 | 0 | 21-84
components/OpenDoorModal/functions | 0 | 0 | 0 | 0 |
handleOpenDoor.ts | 0 | 0 | 0 | 0 | 17-34
screens/GPSPermission | 0 | 0 | 0 | 0 |
index.tsx | 0 | 0 | 0 | 0 | 23-117
styles.ts | 0 | 100 | 100 | 0 | 1-4
screens/HamburguerMenu | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 33-175
screens/History | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/Home | 0 | 0 | 0 | 0 |
index.tsx | 0 | 0 | 0 | 0 | 10-96
screens/Incidences | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/Login | 0 | 0 | 0 | 0 |
biometricFunctions.ts | 0 | 0 | 0 | 0 | 5-73
index.tsx | 0 | 0 | 0 | 0 | 28-81
screens/Notifications | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/OnBoarding | 0 | 0 | 0 | 0 |
index.tsx | 0 | 0 | 0 | 0 | 31-177
screens/PhoneContact | 85.71 | 100 | 50 | 85.71 |
index.tsx | 83.33 | 100 | 50 | 83.33 | 37
schema.ts | 100 | 100 | 100 | 100 |
screens/Places | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/Profile | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/Settings | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/VehicleComunication | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/Vehicles | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
screens/Wallet | 0 | 100 | 0 | 0 |
index.tsx | 0 | 100 | 0 | 0 | 4-5
styles | 0 | 100 | 100 | 0 |
common.ts | 0 | 100 | 100 | 0 | 1
------------------------------------|---------|----------|---------|---------|-------------------
Test Suites: 1 failed, 1 total
Tests: 1 failed, 1 skipped, 2 total
Snapshots: 0 total
Time: 1.734 s, estimated 2 s
Ran all test suites matching /\/Users\/rodrigodiasdefigueiredo\/Desktop\/zerelparksharing\/src\/screens\/PhoneContact\/__tests__\/PhoneContact.test.tsx/i with tests matching "PhoneContact should navigate to Login screen".
this is my component:
import React from 'react';
import { SafeAreaView, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { theme } from '../../../tailwind.config';
import { ThemeConfig } from 'tailwindcss/types/config';
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
import { navigationProps } from '../../@types';
import LoginHeader from '../../components/LoginHeader';
import { CustomStatusBar } from '../../components/CustomStatusBar';
import * as CustomButton from '../../components/CustomButton';
import GPSScreenBackground from '../../assets/img/PS_background_login.png';
import { schema } from './schema';
import ControlledPhoneInput from '../../components/ControlledPhoneInput';
import LoginTitle from '../../components/LoginTitle';
import { BackgroundImage } from '../../components/BackgroundImage';
function PhoneContact() {
const navigation = useNavigation<navigationProps>();
const { colors } = theme?.extend as ThemeConfig;
const {
control,
handleSubmit,
formState: { errors },
} = useForm({
resolver: yupResolver(schema),
defaultValues: {
phoneNumber: '',
},
});
const onSubmit = () => {
navigation.navigate('Login');
};
return (
<SafeAreaView
testID="safe-area-view"
className="items-center justify-between"
>
<BackgroundImage source={GPSScreenBackground}>
<CustomStatusBar
backgroundColor={'transparent'}
barStyle="dark-content"
/>
<LoginHeader />
<View className="mb-6">
<LoginTitle
title="Teléfono de contacto"
paragraph="Introduce el número de teléfono con el que vas a usar tu app Zerel Parking"
/>
</View>
<View className="mb-8" testID="container-phone-input">
<ControlledPhoneInput
control={control}
error={errors.phoneNumber?.message}
name="phoneNumber"
/>
</View>
<View className="mb-12">
<CustomButton.Root
bgColor={colors['primary']}
onPress={handleSubmit(onSubmit)}
testID="button-continue"
>
<CustomButton.Title
title={'Continuar'}
textColor={colors['white']}
/>
</CustomButton.Root>
</View>
</BackgroundImage>
</SafeAreaView>
);
}
export default PhoneContact;
Hello, first thank you for this package.
I've been trying to test with jest and @testing-library/react-native but I'm facing this error and I don't know how to fix:
this is my component:
my tests: