How to test anchor's href with react-testing-library

Question

I am trying to test my anchor tag. Once I click it, I want to see if the window.location.href is what I expect.

I've tried to render the anchor, click it, and then test 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/");
});

I am expecting the test to pass, but instead the window.location.href is just "http://localhost/" meaning it is not getting updated for whatever reason. I even tried wrapping my expect with await wait, but that didn't work either. I can't find much information about testing anchors with react-testing-library. Maybe there is even a better way to test them than what I am doing. 🤷‍♂️

Answer 1

I found a solution that may help others. The <a> element is considered a link role by React Testing Library. This should work:

expect(screen.getByRole('link')).toHaveAttribute('href', 'https://www.test.com');

Answer 2

You can simply use this instead:

expect(getByText("Click Me").href).toBe("https://www.test.com/")

Answer 3

If you are using screen which should be the preferred way, by RTL authors:

const linkEl = screen.getByRole('link', { name: 'Click Me' });

expect(linkEl).toHaveAttribute('href', '...')

Similar, without screen (name can be string or RegExp):

const linkEl = getByRole('link', { name: 'Click Me' }); 

Answer 4

simple and easy.

try this

  it('should be a link that have href value to "/login"', () => {
    render(<SigningInLink />);
    const link = screen.getByRole('link', { name: /log in/i });
    expect(link.getAttribute('href')).toBe('/login');
  });

Answer 5

Maybe its overtly engineered in this case. But you can also use data-testid attribute. This guarantees that you are getting the a tag. I think there are benefit to this for more complex components.

test('should navigate to ... when link is clicked', () => {
  const { getByTestId } = render(<a data-testid='link' href="https://test.com">Click Me</a>);

  expect(getByTestId('link')).toHaveAttribute('href', 'https://test.com');
   
});

Answer 6

You may have several links to check on a page. I found these suggestions very useful. What I did to adapt it to checking 5 links on the same page -

1. query the link on the page with the screen() method best practice - it is more reliable
2. assert the link is on the page
3. assign the link to a variable
4. call event on the link
5. ensure the url toHaveAttribute method rather than navigating with the window object - In react with the virtual DOM, if you try and navigate to another page the link directs to http://localhost/link rather than testing the redirect

test('should navigate to url1 when link is clicked', () => {

const componentName = render(<Component/>)

const url1 = getByText("https://www.test.com/")
expect(ur1).toBeInTheDocument()
screen.userEvent.click(url1);
expect(url1).toHaveAttribute('href', 'https://www.test.com/')

});

Answer 7

This is what I use:

const linkToTest = screen.getByRole("link", { name: /link to test/i })
// I used regex here as a value of name property which ignores casing

expect(linkToTest.getAttribute("href")).toMatchInlineSnapshot();

and then run the test, brackets of toMatchInlineSnapshot will be filled with the value that's there in your code.

This has the advantage of not hard coding it, and maintaining this will be easier.

For eg: it will be filled like this:

expect(linkToTest.getAttribute("href")).toMatchInlineSnapshot(`"link/to/somewhere"`);

and next time, suppose you change this link to something else in your codebase, the runner will ask you if you want to update, press u and it will be updated. (Note, that you need to check that this update is correct).

Know more about inline snapshots on Jest Docs

Answer 8

This is what worked for me:

expect(screen.getByText('Click Me').closest('a')?.href).toEqual('https://test.com');

Answer 9

Here is what I did, works for me using testing-library/react

import { render, screen } from '@testing-library/react';
import {HomeFeature} from '../Components/HomeFeature.tsx';

let imp_content = [
    {
        title: "Next.js",
        link: "https://nextjs.org/",
    },
    {
        title: "React",
        link: "https://reactjs.org/",
    },
    {
        title: "Firebase",
        link: "https://firebase.google.com/",
    },
    {
        title: "Tailwind",
        link: "https://tailwindcss.com/",
    },
    {
        title: "TypeScript",
        link: "https://www.typescriptlang.org/",
    },
    {
        title: "Jest.js",
        link: "https://jestjs.io/",
    },
    {
        title: "testing-library/react",
        link: "https://testing-library.com/",
    }
];

imp_content.map((content) => {
    test(`${content.title} contains ${content.link}`, () => {
        render(<HomeFeature />);
        expect(screen.getByText(content.title).closest('a')).toHaveAttribute('href', content.link);
    })
})