1

I'm trying to test my Select component from Native Base and in the test I select an item from the list or directly trigger the onValueChange prop with a value and then assert the selected value, but I can't find the prop that holds the selected value, I've tried debugging, logging the component but I can't see what prop holds the value, it's supposed to be selectedValue but I can't get to it.

A short snippet of my select that's managed by React Hook Forms and my test that uses React Native Testing Library and Jest

 <Controller
              control={control}
              render={({ field: { onChange, onBlur, value } }) => (
                <Select
                  selectedValue={value}
                  onValueChange={onChange}
                  minWidth='200'
                  accessibilityLabel={t('typePlaceholder')}
                  placeholder={t('typePlaceholder')}
                  _selectedItem={{
                    bg: 'teal.600',
                    endIcon: <CheckIcon size={5} />,
                  }}
                  mt='1'
                  testID='type-select'
                >
                  {FUTURE_EXPENSE_TYPE_LIST.map(({ id, label, type }) => (
                    <Select.Item
                      label={t(label)}
                      value={type}
                      key={id}
                      testID={`${label}-id`}
                    />
                  ))}
                </Select>
              )}
              name='type'
            />

My test:

 it.only('test', async () => {
    const futureExpensesAndGoalsPage = defaultNativeBaseWrapper(
      <FutureExpensesAndGoals />
    );
    fireEvent.press(
      futureExpensesAndGoalsPage.getByText(
        'enableFutureExpenseAndGoalsFormButtonLabel'
      )
    );

    fireEvent(
      futureExpensesAndGoalsPage.getByPlaceholderText('typePlaceholder'),
      'onValueChange',
      'goals'
    );

    expect(
      futureExpensesAndGoalsPage.getByPlaceholderText('typePlaceholder').props
        .value
    ).toBe('goals');

    futureExpensesAndGoalsPage.debug();

    console.log(
      'test',
      futureExpensesAndGoalsPage.getByTestId('debt-id').props
    );
  });
bojackhorseman99
  • 157
  • 5
  • 15

1 Answers1

0

Have you tried:

onValueChange={(value) => onChange(value)}
cyberdevnet
  • 19
  • 4
  • Yes I did, but I found half a solution, when you select something by using fireEvent with onValueChange, Native Base adds an attribute that is the accessibility state, there you can check if the option is selected, but it works only when you do select something, the default is never taken into account, which is something that could be useful when testing. – bojackhorseman99 Dec 30 '22 at 01:30