react-native - RNPickerSelect 单元测试(更改值)

Question

我正在使用this用于选择/选项的库，我想对某些事情进行单元测试，例如是否传递了禁用功能，防止它更改值。到目前为止，我尝试过这样的事情:
组件:

import React, {useState, useEffect} from 'react';
import {View} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';

export default function PickerInput(props) {
    const [pickerItems, setPickerItems] = useState([]);
    const [selectedIndex, setSelectedIndex] = useState(0);
    const [placeholder, setPlaceholder] = useState({});
    const [error, setError] = useState(false);
    const [enabled, setEnabled] = useState(true);

    useEffect(() => {
        // loop over options prop and construct the array
        const pickerItemsArray = [];
        if (
            Array.isArray(props.options) &&
            props.options.length &&
            props.selectedIndex >= 0
        ) {
            props.options.map((option, index) => {
                pickerItemsArray.push({
                    label: option,
                    value: index,
                });
            });
        }

        // push the constructed array
        {
            pickerItemsArray.length
                ? setPickerItems(pickerItemsArray)
                : setPickerItems([]);
        }

        // check if placeholder prop has a value and pass it, else pass empty object to prevent the picker from showing a placeholder
        {
            props.placeholder &&
                setPlaceholder({
                    label: props.placeholder,
                    value: null,
                });
        }

        {
            setError(props.error);
        }

        {
            !props.enabled ? setEnabled(false) : setEnabled(true);
        }
    }, []);

    useEffect(() => {
        props.selectedIndex < 0 && setSelectedIndex(-1);

        // check if selectedIndex prop is larger than the options prop and set it to the length of options prop, else pass the selectedIndex prop
        {
            Array.isArray(props.options) &&
            props.options.length - 1 < props.selectedIndex &&
            props.selectedIndex >= 0
                ? setSelectedIndex(props.options.length - 1)
                : setSelectedIndex(props.selectedIndex);
        }
    }, [selectedIndex]);

    const onValueChange = value => {
        if ((value === 0 || value) && props.enabled) {
            setSelectedIndex(value);
            props.onValueChange(pickerItems[value].label);
        } else {
            setSelectedIndex(null);
        }
    };

    return (
        <View
            testID="picker-wrapper">
            <RNPickerSelect
                onValueChange={value => onValueChange(value)}
                items={pickerItems}
                disabled={!enabled}
                placeholder={placeholder}
                value={selectedIndex}
            />
        </View>
    );
}

测试:

...
it('should not make the component change value when enabled is false', () => {
    const props = {
        placeholder: 'Select',
        options: ['testOption', 'testOption2'],
        selectedIndex: 0,
        error: false,
        enabled: false,
    };

    const newSelectedIndex = 1;

    const {queryByTestId} = render(
        <PickerInput {...props} onValueChange={true} />,
    );

    const pickerWrapper = queryByTestId('picker-wrapper');

        pickerWrapper.props.children.props.value = newSelectedIndex

    expect(pickerWrapper.props.children.props.value).toBe(
        props.selectedIndex,
    );
});

我对原生 react 和测试还很陌生，这是实现这一目标的最佳方法吗？难道不应该有一个 fireEvent 来触发更改值的事件吗？我似乎找不到任何东西。非常感谢有人的帮助。

Answer 1

首先，您可以向 RNPickerSelect 组件添加 touchableWrapperProps 属性，以便添加 testID，如下所示:

<RNPickerSelect
  touchableWrapperProps={{testID: 'picker-select'}}
  ...
/>

(从本期找到here)

然后，您可以像这样在测试中触发 onValueChange 事件来更改值。

fireEvent(getTestId('picker-select'), 'onValueChange', '1');