mardi 6 octobre 2020

What is the correct way to select a label with react-native-testing-library?

I am using tcomb forms to create my react-native forms. Within the form structure there are 3 dropdown selectors: birthdate, gender, and country. I am testing the component using jest and I cannot find a way to select the dropdown form sections. Currently I am trying this:

const firstNameInput = getByLabelText('First Name');
const lastNameInput = getByLabelText('Last Name');
const birthDateInput = getByLabelText('Date of Birth');
const genderInput = getByLabelText('Gender');
const countryInput = getByLabelText('Country');
const bioInput = getByLabelText('Bio');
const zipInput = getByLabelText('Zip');

This does not find any instance of the label, even though I have the label set as such:

const FORM_OPTIONS = {
  stylesheet: Widgets.tCombStylesheet,
  fields: {
    firstName: {
      label: 'First Name',
      placeholder: '',
      error: Strings.invalidFirstNameWarning
    },
    lastName: {
      label: 'Last Name',
      placeholder: '',
      error: Strings.invalidLastNameWarning
    },
    birthdate: {
      mode: 'date',
      label: 'Date of Birth',
      error: Strings.invalidBirthDateWarning,
      config: {
        placeholder: ''
      }
    },
    gender: {
      label: 'Gender',
      error: Strings.invalidGenderWarning,
      config: {
        items: Object.values(genders),
        placeholder: 'Select a gender'
      }
    },
    country: {
      label: 'Country',
      error: Strings.invalidCountryWarning,
      config: {
        items: countries,
        placeholder: 'Select a country'
      }
    },
    zipCode: {
      label: 'Zip',
      placeholder: '',
      error: Strings.invalidZipCodeWarning
    },

The other options on the form are selectable, see first name and last name. However, the birthdate, gender, and country are not found by getLabelByText, even though there is clearly a label on the element.

Aucun commentaire:

Enregistrer un commentaire