Estoy tratando de escribir pruebas unitarias para confirmar que mis enlaces de navegación funcionan correctamente. Mi archivo MainNavigation.js :
import Link from 'next/link'; const MainNavigation = () => { return ( <header> <div> <Link href='/'>The React Parks</Link> </div> <nav> <ul> <li> <Link href='/all-parks'>All Parks</Link> </li> <li> <Link href='/new-park'>Add a New Park</Link> </li> </ul> </nav> </header> ) }; export default MainNavigation;Mi archivo de prueba:
import '@testing-library/jest-dom' import { fireEvent, render, screen } from '@testing-library/react'; import MainNavigation from './MainNavigation'; describe('MainNavigation', () => { describe('links', () => { jest.mock('next/link', () => ({ children }) => children); it('should redirect to '/' when clicking on "The React Parks" text', () => { render(<MainNavigation />); const parksString = screen.getByText('The React Parks'); fireEvent.click(parksString); expect(parksString.closest('link')).toHaveAttribute('href', 'https://'); }) }); });¿Cómo puedo incluir verificar si la URL coincide con cierta cadena? ¿O tendría sentido hacer algo como asignar una constante para mostrar diferentes páginas y esperar que esa constante coincida con algún texto en las otras páginas? ¿Cómo se haría para probar esta funcionalidad?
No obtuve una respuesta, pero logré lo que quería probando con una instantánea:
describe('Links', () => { const links = [ <Link href='/'>The React Parks</Link>, <Link href='/all-parks'>All Parks</Link>, <<Link href='/new-park'>Add a New Park</Link> ] it('render correctly', () => { const tree = renderer.create(links).toJSON(); expect(tree).toMatchSnapshot(); }); });Resolví esto usando
jest.mock( 'next/link', () => ({ children, ...rest }: { children: ReactElement }) => React.cloneElement(children, { ...rest }), ); De esa manera, la función de push de next/link no falla y el href de next/link se pasa a su componente secundario