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. 🤷♂️
Jest uses jsdom to run its test. jsdom is simulating a browser but it has some limitations. One of these limitations is the fact that you can't change the location. If you want to test that your link works I suggest to check the href attribute of your <a>:
expect(screen.getByText('Click Me').closest('a')).toHaveAttribute('href', 'https://www.test.com/')
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');
You can simply use this instead:
expect(getByText("Click Me").href).toBe("https://www.test.com/")