How to test select component with react-native-testing-library

[crisfcodes]

💬 Question

What I want is to press a select component and select an especific option, so I'm having some problems:

1. If I try to use getByTestId, console trown an error because testID prop doesn't apply for Select component, and testing-library can't found the element.

2. I can't use fireEvent over a text element rendered by Select because an error is thrown: Unable to find node on an unmounted component.

What I'm trying is this:

import React from 'react'
import {fireEvent, render, waitFor} from '@tests/test-utils'

import PSEForm from './PSEForm'

test('Render a form with financial institution selector, legal id type selector, legal id number input and submit button', async () => {
  const onSubmitMock = jest.fn()
  const {getByTestId, getByText, debug} = render(
    <PSEForm onSubmit={onSubmitMock} />,
  )

  // get form inputs
  const finantialInstitutionSelect = getByText(/selecciona tu banco/i) // press component
  const legalIdSelect = getByText(/escoge un tipo de documento/i) // press component
  const documentNumberInput = getByTestId('pse.textfield.legal-id') // input component
  const buttonSubmit = getByText(/pagar/i) // button component

  // fill the form and submit it
  fireEvent.press(legalIdSelect) // this thrwon an error
})

So what would be the correct way to test a form with Select component?

UI Kitten and Eva version

Package	Version
@eva-design/eva	2.1.0
@ui-kitten/components	5.1.0

[artyorsh]

Hey @crisfcodes. A set of tests for this component written with react-native-testing-library can be found directly in our repo. Can it be helpful?

[ernestognw]

I'm having the same issue in several instances of a project.

I see you're passing correctly the props to your subcomponents down to the TouchabeOpacity on which the Select relies on. I'm not sure if this is more a problem of the TouchableOpacity itself.

Anyway, the suggested test used is now deprecated as the getByType function was removed here , so it's not an option for newer projects like the one I'm using and I can't find another way around

If there's an issue with the Select component itself I can send a PR myself to fix the problem if needed, but I'm not sure where the testID is getting lost. Can anyone please confirm?

[MartinCerny-awin]

I am having the same problem. testID is not getting correctly set to Select component.