如何使用react-testing-library测试主播的href

时间:2019-09-06 18:40:39

标签: reactjs jestjs anchor href react-testing-library

我正在尝试测试我的锚标签。单击它后,我想看看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测试锚的更多信息。也许有比我正在做的更好的方法来测试它们。 ?‍♂️

5 个答案:

答案 0 :(得分:13)

我找到了一个可以帮助他人的解决方案。 <a> 元素被 React 测试库视为 link 角色。这应该有效:

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

答案 1 :(得分:12)

您可以简单地使用它:

void randomizeQueues(String flag) {
    double num = (flag.equals("enforce")) ? 0.99 : Math.random();
    if (num > 0.5)
        floorsMap.values().forEach(Floor::randomizeDestinations);
}

答案 2 :(得分:5)

Jest使用jsdom进行测试。 jsdom正在模拟浏览器,但有一些限制。这些限制之一是您无法更改位置的事实。如果您想测试链接是否有效,建议您检查href的{​​{1}}属性:

<a>

答案 3 :(得分:1)

如果您使用 screen 这应该是首选方式,由 RTL 作者:

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

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

类似,没有屏幕(名称可以是字符串或正则表达式):

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

答案 4 :(得分:0)

在这种情况下,它可能是经过精心设计的。但是您也可以使用 data-testid 属性。这可以保证您获得 a 标签。我认为这对于更复杂的组件有好处。

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