Estoy tratando de probar mi etiqueta de anclaje. Una vez que hago clic en él, quiero ver si window.location.href es lo que espero.
Intenté representar el ancla, hacer clic en él y luego probar window.location.href :
test('should navigate to ... when link is clicked', () => { const { getByText } = render(<a href="https://test.com">Click Me</a>); const link = getByText('Click Me'); fireEvent.click(link); expect(window.location.href).toBe("https://www.test.com/"); }); Espero que pase la prueba, pero en cambio, window.location.href es simplemente "http://localhost/" , lo que significa que no se actualiza por el motivo que sea. Incluso intenté envolver mi expect con await wait , pero tampoco funcionó. No puedo encontrar mucha información sobre cómo probar anclas con react-testing-library . Tal vez haya una mejor manera de probarlos que lo que estoy haciendo. 🤷♂️
Jest usa jsdom para ejecutar su prueba. jsdom está simulando un navegador pero tiene algunas limitaciones. Una de estas limitaciones es el hecho de que no puedes cambiar la ubicación. Si desea probar que su enlace funciona, le sugiero que verifique el atributo href de su <a> :
expect(screen.getByText('Click Me').closest('a')).toHaveAttribute('href', 'https://www.test.com/')Encontré una solución que puede ayudar a otros. El elemento <a> se considera un rol de link por React Testing Library. Esto debería funcionar:
expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.test.com');Simplemente puede usar esto en su lugar:
expect(getByText("Click Me").href).toBe("https://www.test.com/")