Question

我有一个“可重用”的React元素，被另一个函数调用。由于其必要的可重用性，其输入在被调用之前没有定义的值。

const TextInput1 = (title, minimum, maximum, val, step) => {
    const [value, setValue] = useState(val.toString());
    const handleChange = event => setValue(event.target.value);
    return (
        <div id={title}  label= "Text1"  style={{backgroundColor: '#c3c3c3', whiteSpace: 'pre-wrap'}}>
            <label className = 'TextInput1'>
                {' '} <input type="number" aria-label = 'Text1' className = 'TextInput1' value={value} min={minimum.toString()} max={maximum.toString()} step={step} onChange={handleChange} />
            </label> <br/><br/>
        </div>
    );
};
export default TextInput1;

我要运行的测试是运行“ fireEvent”以确保handleChange正常工作。我已经尝试过了：

const setup = () =>{
    const utils = render(<TextInput1/>)
    const input = utils.getByLabelText("Text1")
    return{
        input,
        ...utils,
    }
test('Value Updates Correctly', ()=>{
        const {input} = setup()
        const textWrapper = shallow(
            <TextInput1
                title = 'name'
                minimum = '0'
                maximum = '20'
                val = '13'
                step = '1'
            />).props();
        fireEvent.change(textWrapper.id.val,{target:{value:'23'}})
        expect(textWrapper.id.val).toBe('23')
    })

但是返回错误：给定元素没有值设置器

有什么方法可以对此进行单元测试吗？

单元测试按值调用的函数

0 个答案: