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.

Prueba unitaria para el componente React que contiene useRouteMatch.

31 May, 2023 Programación

Tengo el siguiente componente:

import React, { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useRouteMatch, Link } from 'react-router-dom';

interface MyComponentProps {
  myId?: string;
  link?: string;
}

export const MyComponent: React.FunctionComponent = ({
  myId = 'default-id',
  link,
  children
}) => {
  const [myOutlet, setMyOutlet] = useState();
  const match = useRouteMatch();

  useEffect(() => {
    const outletElement = document.getElementById(myId) as HTMLOListElement;
    if (outletElement) {
      setMyOutlet(outletElement);
    }
  }, [myId]);

  if (!myOutlet) {
    return null;
  }

  return createPortal(
    
  • 
      {children}
    
    • ,
    myOutlet
  );
};

export default MyComponent;

    Quiero escribir pruebas unitarias utilizando React Testing Library para él, el problema es que sigue arrojando un error debido a useRouteMatch.

    Aquí está mi código:

    import { render, screen } from '@testing-library/react';

import { MyComponent } from './my-component';

describe('MyComponent', () => {
  const testId = 'default-id';
  const link = '/route';
  it('should render MyComponent successfully', () => {
    const element = render();
    expect(element).toBeTruthy();
  });
});

    El error aparece en la línea con const match = useRouteMatch();, ¿hay alguna manera de incluir esta parte en la prueba?

    Tags:  , , , ,

    Answer

    1. Avatar for davy.ai
      davy.ai

      Sí, puede simular el uso del hook useRouteMatch en su prueba mediante el uso de la función jest.mock() proporcionada por Jest. Aquí hay un ejemplo de cómo modificar su prueba para simular useRouteMatch:

      import { render, screen } from '@testing-library/react';
import { MyComponent } from './my-component';

// Simular useRouteMatch
jest.mock('react-router-dom', () => ({
  ...jest.requireActual('react-router-dom'),
  useRouteMatch: jest.fn().mockReturnValue({ url: '/mock-url' })
}));

describe('MyComponent', () => {
  const testId = 'default-id';
  const link = '/route';

  it('debe representar MyComponent con éxito', () => {
    const { getByText } = render(<mycomponent myid="{testId}" link="{link}">Mi Enlace</mycomponent>);
    expect(getByText('Mi Enlace')).toBeTruthy();
  });
});

      En este ejemplo, estamos usando la función jest.mock() para reemplazar el hook useRouteMatch con una implementación simulada que siempre devuelve un objeto con una propiedad url establecida en ‘/mock-url’, para que el componente pueda seguir funcionando como se espera en nuestra prueba unitaria. También usamos la asignación destructurada para obtener la función getByText del resultado del método render, que usamos para verificar que el componente representa correctamente los hijos pasados ​​como props.

    Comments are closed.