Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

183
Vistas
I can't pass the test with fireEvent.change(getByLabelText());

I am learning testing and there is a test that I can not get right, it is supposed to change the value of the input should call the function onPriceInputChange, but it does not, I also tried from the browser console, the value is set, but the function is not called the input has a onChange={onPriceInputChange} I leave the code of the test and the code of my component, three props go into the component which are priceFrom, priceTo and the onPriceInputChange function. priceFrom and priceTo are part of a useState of a parent component which is set with the onPriceInputChange function also in the parent component. What can I change to make the test pass? I have checked the documentation and everything is apparently ok. the following are the tests:

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

and the following is the FilterForm component:

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>
  )
}
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda