如何用反应测试库测试锚杆的锚固度?

我想试试我的锚标签。一旦我点击它，我想看看是否 window.location.href是我所期望的。

我尝试渲染锚点，单击它，然后测试 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/");
});

我希望测试能够通过，但是 window.location.href 只是 "http://localhost/"，这意味着由于某种原因它没有得到更新。我甚至尝试用 await wait包装我的期望，但这也没有工作。我找不到太多关于用 react-testing-library测试锚的信息。也许还有比我现在做的更好的测试方法。公鸡

109808 次浏览
小开
最佳答案

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/')
小开

You can simply use this instead: 

expect(getByText("Click Me").href).toBe("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');
小开

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');
   

});
小开

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' });
小开

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');
});
小开

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/')


});
小开

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

小开

This is what worked for me:


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

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);
})
})

提交答案