Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

187
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda