React native RNPickerSelect单元测试（更改值）

我正在使用库来选择/选项，并且我想对某些事情进行单元测试，例如，如果有禁用项传递给它，防止它更改值。 到目前为止，我试过这样的方法：
组成部分：

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

import React，{useState，useffect}来自“React”；
从“react native”导入{View}；
从“反应本机选择器选择”导入RNPickerSelect；
导出默认函数PickerInput（props）{
常量[pickerItems，setPickerItems]=useState（[]）；
常量[selectedIndex，setSelectedIndex]=useState（0）；
const[placeholder，setPlaceholder]=useState（{}）；
const[error，setError]=useState（false）；
const[enabled，setEnabled]=useState（true）；
useffect（（）=>{
//循环选项道具并构造阵列
常量pickerItemsArray=[]；
如果(
Array.isArray（props.options）&&
props.options.length&&
props.selectedIndex>=0
) {
props.options.map（（选项，索引）=>{
pickerItemsArray.push({
标签：选项，
值：索引，
});
});
}
//推送构造的数组
{
pickerItemsArray.length
？设置PickerItems（pickerItemsArray）
：setPickerItems（[]）；
}
//检查占位符道具是否有值并传递它，否则传递空对象以防止选择器显示占位符
{
占位符&&
集合占位符({
标签：props.placeholder，
值：null，
});
}
{
设置错误（道具错误）；
}
{
！props.enabled？setEnabled（false）：setEnabled（true）；
}
}, []);
useffect（（）=>{
props.selectedIndex<0&设置selectedIndex（-1）；
//检查selectedIndex道具是否大于options道具，并将其设置为options道具的长度，否则传递selectedIndex道具
{
Array.isArray（props.options）&&
props.options.length-1=0
？设置选定索引（道具选项长度-1）
：setSelectedIndex（道具selectedIndex）；
}
}，[selectedIndex]）；
const onValueChange=value=>{
如果（（值===0 | |值）&&props.enabled）{
设置选定的索引（值）；
props.onValueChange（pickerItems[value].label）；
}否则{
setSelectedIndex（空）；
}
};
返回(
onValueChange（值）}
项目={pickerItems}
已禁用={！已启用}
占位符={占位符}
值={selectedIndex}
/>
);
}

测试：

。。。
它（'启用时不应使组件更改值为false'，（）=>{
常量道具={
占位符：“选择”，
选项：['testOption'，'testOption2']，
已选择索引：0，
错误：false，
启用：false，
};
const newSelectedIndex=1；
const{queryByTestId}=render(
,
);
常量pickerWrapper=queryByTestId（'picker-wrapper'）；
pickerrapper.props.children.props.value=newSelectedIndex
expect（pickerrapper.props.children.props.value）.toBe(
props.selectedIndex，
);
});

我是个新手，不太会做本地测试，这是实现这一点的最好方法吗？是否应该有一个

firefevent

来触发更改值的事件？我好像找不到。我真的很感激别人的帮助

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