如何在测试中获取Native Base Select组件的选中值？

我在测试Native Base的Select组件时，不管是选择列表项还是直接触发onValueChange传入值，都找不到存储选中值的属性来做断言。调试、打印组件都试过，确定不了哪个属性存这个值，按理说应该是selectedValue，但就是拿不到。

组件代码片段 #

<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'
/>

测试代码片段 #

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
  );
});

解决方案 #

1. 直接断言React Hook Form的表单值 #

既然Select由React Hook Form的Controller管理，无需纠结组件内部属性，直接从表单实例获取值断言更直接：

// 在测试中获取form实例（根据组件实际情况调整）
const { result } = renderHook(() => useForm());
const { getValues } = result.current;

// 触发选择事件后
expect(getValues('type')).toBe('goals');

如果表单是在组件内部创建的，也可以通过组件props传递form实例，或者在测试中通过screen获取关联的form值。

2. 模拟真实用户交互断言显示内容 #

Native Base的Select选中后会展示选中项的标签文本，通过断言显示的文本更贴近真实用户行为，也更可靠：

// 点击Select打开下拉菜单
await fireEvent.press(futureExpensesAndGoalsPage.getByTestId('type-select'));
// 点击目标选项
await fireEvent.press(futureExpensesAndGoalsPage.getByTestId('goals-id'));
// 断言选中的文本已显示
expect(futureExpensesAndGoalsPage.getByText(t('goals'))).toBeTruthy();

注意要加await，因为下拉菜单的展开是异步渲染过程，需要等待DOM更新完成。

3. 正确定位Select组件并查看props #

你之前用getByPlaceholderText获取的可能不是真正的Native Base Select组件，改用testID定位更准确：

const select = futureExpensesAndGoalsPage.getByTestId('type-select');
// 打印组件props，查看selectedValue的存储位置
console.log(select.props);
// 或者用debug查看组件完整结构
select.debug();

部分UI组件库会对原生组件做封装，selectedValue可能存在_forwardedProps或者其他子属性中，通过debug可以快速定位。

内容的提问来源于stack exchange，提问作者bojackhorseman99