es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Probando una función de retorno en una función que se activa al hacer clic en un botón utilizando jest.

Probando una función de retorno en una función que se activa al hacer clic en un botón utilizando jest.

30 May, 2023 Programación

Tengo un componente hijo de React que tiene un botón:

export function Banner({argumentSetter}){
function handleOnClick(){
  argumentSetter(argument.READ);
}
return(
<div>
  <button onclick="{handleOnClick}">
    <icon name="delete" type="filled">
      Discard
    </icon>
  </button>
</div>
)
}

Y tengo mi argumentSetter en mi componente padre definido como sigue:

const [argument,setArgument] = useState<argument>(argument.EDIT);
argumentSetter = useCallBack((val)=>{
setArgument(val);
},[argument]);

return(
  <div>
    <banner argumentsetter="{argumentSetter}/">
  </banner></div>
)

Cómo conseguir una cobertura de prueba del 100% utilizando jest.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr una cobertura de prueba del 100% para este componente secundario React usando Jest, debes escribir pruebas para los siguientes escenarios:

    1. Probar que el componente se renderiza sin errores.
    2. Probar que se renderize el elemento del botón.
    3. Probar que la función handleOnClick se llama cuando se hace clic en el botón.
    4. Probar que la función argumentSetter se llama con el argumento.READ cuando se hace clic en el botón.

    Aquí tienes un ejemplo de cómo puedes escribir las pruebas:

    import { render, fireEvent } from '@testing-library/react';
import { Banner } from './Banner';

describe('Banner component', () => {
  it('se renderiza sin fallos', () => {
    render(<banner></banner>);
  });

  it('renderiza un elemento de botón', () => {
    const { getByRole } = render(<banner></banner>);
    const buttonElement = getByRole('button');
    expect(buttonElement).toBeInTheDocument();
  });

  it('llama la función handleOnClick cuando se hace clic en el botón', () => {
    const mockHandleOnClick = jest.fn();
    const { getByRole } = render(<banner handleonclick="{mockHandleOnClick}"></banner>);
    const buttonElement = getByRole('button');
    fireEvent.click(buttonElement);
    expect(mockHandleOnClick).toHaveBeenCalled();
  });

  it('llama la función argumentSetter con argumento.READ cuando se hace clic en el botón', () => {
    const mockArgumentSetter = jest.fn();
    const { getByRole } = render(<banner argumentsetter="{mockArgumentSetter}"></banner>);
    const buttonElement = getByRole('button');
    fireEvent.click(buttonElement);
    expect(mockArgumentSetter).toHaveBeenCalledWith(argument.READ);
  });
});

    En la primera prueba, simplemente renderizamos el componente para asegurarnos de que no haya fallos. En la segunda prueba, comprobamos que se renderize el elemento del botón. En la tercera prueba, usamos mock.fn() de Jest para crear una función mock para la propiedad handleOnClick, y luego simulamos un evento de clic en el elemento del botón para asegurarnos de que se llama la función. En la cuarta prueba, creamos una función mock para la propiedad argumentSetter y luego simulamos un evento de clic en el elemento del botón, asegurándonos de que se llama la función con argument.READ como su argumento.

    Al ejecutar estas pruebas con Jest, puedes asegurarte de que tu componente Banner tenga una cobertura de prueba del 100%.

Comments are closed.