Teniendo la siguiente prueba unitaria:
const MY_URL = 'example.com' it('should render MyComponent with url', () => { const { getByTestId } = render(<MyComponent />); const myLink = getByTestId(TestIds.LINK); expect(loggingLink).toContain(MY_URL); });La prueba falla con el siguiente mensaje:
Expected value: "example.com" Received object: <div class="m-3" data-testid="test-link"><a href="example.com">my-link</a></div> Entonces parece que toContain no verifica qué hay dentro de ese objeto. ¿Hay algún método para comprobar que la URL está dentro del objeto?
Puede obtener el elemento de anclaje con la consulta ByRole . Simplemente búsquelo con el link y luego verifique el atributo href :
// I used screen in this case, but you can get getByRole from render. const anchorElement = screen.getByRole('link'); expect(anchorElement).toBeInTheDocument(); expect(anchorElement).toHaveAttribute('href', 'example.com'); Los elementos de anclaje tienen un rol de link solo cuando el atributo href está presente; de lo contrario, no tienen el rol correspondiente. Puedes consultar más al respecto aquí .
Hay un par de cosas. Primero, toContain es para probar si existe un elemento en una matriz. https://jestjs.io/docs/expect#tocontainitem
En segundo lugar, el objetivo de RTL no es probar propiedades y demás, sino probar lo que los usuarios ven en la pantalla. Así que supongo que la "manera RTL" de hacer esto sería hacer clic en el enlace y ver lo que se muestra. ¡Lo cual es cierto que no siempre es útil en todas las situaciones!
Si está absolutamente seguro de que esta URL necesita una prueba, entonces tiene una escotilla de escape a través de los selectores jsdom subyacentes de jest . Puede consultar un elemento utilizando un querySelector estándar de bog y luego probar la propiedad href directamente.
De hecho, ni siquiera necesita querySelector. Todos los métodos getBy devuelven un objeto jsdom que luego puede probar con getAttribute('href')