Question

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

Answer 1

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

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

Answer 2

您可以简单地使用它：

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

Answer 3

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

<a>

Answer 4

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

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

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

类似，没有屏幕（名称可以是字符串或正则表达式）：

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

Answer 5

在这种情况下，它可能是经过精心设计的。但是您也可以使用 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');
   
});

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

5 个答案: