Error when testing NativeBase component with jest

Question

I'm receiving the following errors when trying to perform component tests using Jest, Testing Library React Native, and Native Base.

If I pass the initialWindowMetrics property as stated in the documentation, I receive the following error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number. Check the render method of ForwardRef

If I don't provide the above property, I get an error saying that the testID could not be found.

Code Button:

import { Button, IButtonProps, Icon, Text } from 'native-base'

import { ExportIcons } from '@utils/exportIcons'
import { ColorIcons } from '@utils/exportColorsIcons'

import { IconType } from 'src/types/Icon.types'

export interface SimpleButtonProps extends IButtonProps {
  width: number | string
  backgroundColor?: 'primary' | 'secondary' | 'red' | 'gray.900'

  text: string
  colorTextButton?: 'white' | 'gray.300'
  fontFamily: 'heading' | 'body'
  fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl'

  hasIcon?: boolean
  iconProps?: IconType
}

export function SimpleButton({
  width,
  isDisabled,
  backgroundColor,

  text,
  fontSize,
  fontFamily,
  colorTextButton,

  hasIcon = false,
  iconProps,

  ...rest
}: SimpleButtonProps) {
  return (
    <Button
      testID="simpleButtonId"
      rounded="full"
      _pressed={{
        opacity: 80
      }}
      _disabled={{ opacity: 60 }}
      w={width}
      bg={backgroundColor}
      isDisabled={isDisabled}
      leftIcon={
        hasIcon && iconProps?.name !== undefined && iconProps.color !== undefined ? (
          <Icon as={ExportIcons[iconProps.name]} fill={ColorIcons[iconProps.color]} />
        ) : undefined
      }
      {...rest}
    >
      <Text testID="text-simple-button" color={colorTextButton} fontSize={fontSize} fontFamily={fontFamily}>
        {text}
      </Text>
    </Button>
  )
}

Code Test Button:

import { NativeBaseProvider } from 'native-base'
import { render } from '@testing-library/react-native'

import { SimpleButton } from '@components/SimpleButton'

import { THEME } from '../../theme'

describe('SimpleButton', () => {
  test('Checks if rendering occurs', () => {
    const { debug, getByTestId } = render(
      <NativeBaseProvider theme={THEME}>
        <SimpleButton
          width={80}
          colorTextButton="white"
          backgroundColor="secondary"
          text="Titulo Botão"
          fontFamily="heading"
          fontSize="sm"
          onPress={() => {
            console.log('teste')
          }}
        />
      </NativeBaseProvider>
    )
    debug()
    const element = getByTestId('text-simple-button')

    console.log(element)
  })
})

Attached is the error

enter image description here

I have already tried some alternatives such as:

Issue Github; Question in overflow; Docs Native Base;

But all of them have been unsuccessful.

Error when testing NativeBase component with jest

0 Answers0