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.

Cómo simular un selector de uso con shallowequal en Jest

25 Jul, 2023 Programación

Tengo este componente:

const Testcomponent = (props:any) => {    const {
    name,
    age   } = useSelector(
    (state: any) => ({
      name: state.user.name,
      age: state.user.age
    }),
    shallowEqual   );
return (<div>{name}-{age}</div>)
}

Intenté probarlo,
import * as redux from 'react-redux'

const useSelectorState =  {
    state:{
        user:{
            name:"test",
            age:11
        }}}

const spy = jest.spyOn(redux, 'useSelector')
spy.mockImplementation(cb => cb(useSelectorState))

Esto no está cubriendo el useSelector en el informe de cobertura.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para probar correctamente el componente Testcomponent, debes simular la renderización del componente y verificar si muestra correctamente los valores de nombre y edad obtenidos del gancho useSelector.

    Aquí hay un ejemplo de un caso de prueba utilizando react-testing-library:

    import React from 'react';
import { render } from '@testing-library/react';
import { useSelector } from 'react-redux';
import Testcomponent from '../Testcomponent';

// Simular el gancho useSelector
jest.mock('react-redux', () => ({
  useSelector: jest.fn()
}));

describe('Testcomponent', () => {
  it('renderiza los valores de nombre y edad obtenidos de useSelector', () => {
    // Configurar el valor de retorno simulado del gancho useSelector
    useSelector.mockReturnValue({
      name: 'test',
      age: 11
    });

    // Renderizar el componente
    const { getByText } = render(<testcomponent></testcomponent>);

    // Verificar si muestra correctamente los valores de nombre y edad
    expect(getByText('test-11')).toBeInTheDocument();
  });
});

    Este caso de prueba configura un gancho useSelector simulado que devuelve un objeto de estado fijo con los valores de nombre y edad. Luego, renderiza el componente Testcomponent y verifica si muestra correctamente los valores de nombre y edad buscando el texto renderizado utilizando la función getByText de react-testing-library.

    Si la línea de useSelector no está cubierta en el informe de cobertura, puede ser porque se está simulando en el caso de prueba y, por lo tanto, no se ejecuta realmente. Sin embargo, el caso de prueba sigue cubriendo la funcionalidad del componente que utiliza el gancho useSelector.

Comments are closed.