react-native-text-input-mask / react-native-text-input-mask

Text input mask for React Native, Android and iOS
MIT License
1.18k stars 305 forks source link

Having trouble testing with jest and react-native-testing-library #266

Open cloudworkpro-hassen opened 2 years ago

cloudworkpro-hassen commented 2 years ago

Hello there, I am getting this error here and I am not really sure what to do

    Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

    Check the render method of `ForwardRef`.

      at createFiberFromTypeAndProps (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14410:21)
      at createFiberFromElement (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:14433:15)
      at createChild (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4377:28)
      at reconcileChildrenArray (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:4649:25)
      at reconcileChildFibers (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5054:14)
      at reconcileChildren (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7234:28)
      at updateHostComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7741:3)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9050:14)
      at performUnitOfWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12649:12)
      at workLoopSync (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:12622:22)

      etc...

      62 |       {label && <Label required={required}>{label}</Label>}
      63 |       <View>
    > 64 |         <TextInputMask
         |         ^
      65 |           maxLength={maxLength}
      66 |           numberOfLines={numberOfLines}
      67 |           multiline={multiline}

      at printWarning (node_modules/react/cjs/react.development.js:220:30)
      at error (node_modules/react/cjs/react.development.js:196:5)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2215:7)
      at app/components/Inputs/TextInput/TextInput.tsx:64:9
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5552:18)
      at updateForwardRef (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:7288:20)
      at beginWork (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:9068:16)

I have the text-input-mask wrapped within a reusable component like this

etc..
<View style={styles.container}>
      {label && <Label required={required}>{label}</Label>}
      <View>
        <TextInputMask
          maxLength={maxLength}
          numberOfLines={numberOfLines}
          multiline={multiline}
          mask={mask}
          ref={combinedRef}
          value={value}
          onChangeText={onChange}
          secureTextEntry={password}
          style={inputStyles}
          blurOnSubmit={next == null && !multiline}
          onSubmitEditing={doNext}
          onBlur={doBlur}
          returnKeyType={multiline ? undefined : next == null ? 'done' : 'next'}
          {...other}
        />
        {leftIcon != null && <LeftIconType name={leftIcon.name} style={styles.leftIcon} size={ICON_SIZE.BASE} />}
        {rightIcon != null && <RightIconType name={rightIcon.name} style={styles.rightIcon} size={ICON_SIZE.BASE} />}
      </View>

etc...

I have a jest setup up file that has this in it

jest.mock('react-native-text-input-mask', () => ({
  default: jest.fn(),
}));

this Is how I am using my reusable text input component within login or signup component

<TextInput label="Email or Username" keyboardType="email-address" autoCapitalize="none" value={email} {...emailProps} />

and finally this is how my test looks like

  it('should render Login Screen', async () => {
    const queryClient = new QueryClient();

    const screen = render(
      <QueryClientProvider client={queryClient}>
        <NavigationContainer>
          <AuthProvider>
            <LoginScreen />
          </AuthProvider>
        </NavigationContainer>
      </QueryClientProvider>,
    );
  });
MaximPVladimirovich commented 1 year ago

I have this issue as well.I just use the render prop to render the TextMaskInput in a regular TextInput from react-native. I get the same error.