garganurag893 / react-native-phone-number-input

React Native component for phone number.
MIT License
372 stars 212 forks source link

Need help with jest Test #136

Open rodrigodiasf1984 opened 1 year ago

rodrigodiasf1984 commented 1 year ago

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:

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;

my tests:

import React from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react-native';
import PhoneContact from '..';
import DefaultPhoneInput from 'react-native-phone-number-input';

const mockedNavigation = jest.fn();
const phoneInputRef = React.createRef<any>();
const onChange = jest.fn();

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: () => ({
      navigate: mockedNavigation,
    }),
  };
});

describe('PhoneContact', () => {
  beforeEach(() => {
    mockedNavigation.mockClear();
  });
  it('should navigate to Login screen', () => {
    const { getByTestId } = render(<PhoneContact />);
    render(
      <DefaultPhoneInput
        ref={phoneInputRef}
        defaultValue={'+34623423423'}
        value={'+34623423423'}
        defaultCode={'ES'}
        placeholder="Número de teléfono"
        disableArrowIcon
        onChangeText={onChange}
        countryPickerProps={{
          disableNativeModal: false,
        }}
      />,
    );

    const buttonContinue = getByTestId('button-continue');
    fireEvent.press(buttonContinue);

    expect(mockedNavigation).toHaveBeenCalledWith('Login');
  });

  it('should show an erro if the input is empty', async () => {
    const { getByTestId, getByText } = render(<PhoneContact />);
    render(
      <DefaultPhoneInput
        ref={phoneInputRef}
        defaultValue={''}
        value={''}
        defaultCode={'ES'}
        placeholder="Número de teléfono"
        disableArrowIcon
        onChangeText={onChange}
        countryPickerProps={{
          disableNativeModal: false,
        }}
      />,
    );

    const buttonContinue = getByTestId('button-continue');
    fireEvent.press(buttonContinue);

    await waitFor(() => {
      expect(getByText('Campo obligatorio')).toBeDefined();
    });
  });
});
mattlewer commented 2 weeks ago

@rodrigodiasf1984 Did you manage to solve this? Facing the same issue

rodrigodiasf1984 commented 2 weeks ago

@rodrigodiasf1984 Did you manage to solve this? Facing the same issue

not yet, sorry