Estoy aprendiendo a probar y hay una prueba que no puedo hacer bien, se supone que cambia el valor de la entrada, debería llamar a la función onPriceInputChange, pero no lo hace, también probé desde la consola del navegador, el valor está establecido, pero la función no se llama, la entrada tiene un onChange={onPriceInputChange} Dejo el código de la prueba y el código de mi componente, tres accesorios entran en el componente que son priceFrom, priceTo y la función onPriceInputChange. priceFrom y priceTo son parte de un useState de un componente principal que se establece con la función onPriceInputChange también en el componente principal. ¿Qué puedo cambiar para que pase la prueba? Revisé la documentación y aparentemente todo está bien. las siguientes son las pruebas:

 describe('FilterForm component', () => { it('should invoke the onPriceInputChange callback after "price from" input value changed', () => { // given const onPriceInputChange = jest.fn(); const { getByLabelText } = render(<FilterForm priceFrom='' onPriceInputChange={onPriceInputChange} />); // when fireEvent.change(getByLabelText('Price From:'), { target: { name: 'priceFrom', value: 123 }}); // then expect(onPriceInputChange).toHaveBeenCalledWith('priceFrom', 123); }); it('should invoke the onPriceInputChange callback after "price to" input value changed', () => { // given const onPriceInputChange = jest.fn(); const { getByLabelText } = render(<FilterForm priceFrom='' onPriceInputChange={onPriceInputChange} />); // when fireEvent.change(getByLabelText('Price To:'), { target: { name: 'priceTo', value: 456 }}); // then expect(onPriceInputChange).toHaveBeenCalledWith('priceTo', 456); });

y el siguiente es el componente FilterForm:

 export const FilterForm = (props) => { const onPriceInputChange = (e) => { props.onPriceInputChange(e.target.name,e.target.value) } return ( <div> <label htmlFor="priceFrom">Price From:</label> <input type="number" id="priceFrom" name="priceFrom" value={parseInt(props.priceFrom)} placeholder="Price from..." onChange={onPriceInputChange}/> <label htmlFor="priceTo">Price To:</label> <input type="number" id="priceTo" name="priceTo" value={parseInt(props.priceTo)} placeholder="Price to..." onChange={onPriceInputChange}/> </div> ) }