React 测试库：检查多个元素是否有 href

Question

我想检查 <ul> 中的所有链接是否都具有 href 属性。

组件（使用 Gatsby 的 <Link>）：

const DropdownMenu = ({ open }) => {
  return (
    <ul className="dropdown-menu">
      {open && (
        <>
          <li>
            <Link to="/link1/">Link 1</Link>
          </li>
          <li>
            <Link to="/link2/">Link 2</Link>
          </li>
          <li>
            <Link to="/link3/">Link 3</Link>
          </li>
        </>
      )}
    </ul>
  )
}

呈现 HTML :

...
        <ul
          class="dropdown-menu"
        >
          <li>
            <a
              href="/link1/"
            >
              Link 1
            </a>
          </li>
          <li>
            <a
              href="/link2/"
            >
              Link 2
            </a>
          </li>
          <li>
            <a
              href="/link3/"
            >
              Link 3
            </a>
          </li>
        </ul>
...

测试：

  test('links have href', () => {
    render(<DropdownMenu open={true}></DropdownMenu>)
    const listLinks = screen.getAllByRole('link')
    expect(listLinks).toHaveAttribute('href')
  })

输出：

received value must be an HTMLElement or an SVGElement.
Received has type:  array
Received has value: [<a href="/link1/">Link 1</a>, <a href="/link2/">Link 2</a> ...]

有没有办法（比如 map 之类的）检查所有元素是否都正确 href ？

我可能在这里使用了错误的方法。

Answer 1

如错误所述，.toHaveAttribute 应在 HTMLElement 上调用，但您在 listLinks 上调用它，它是 HTMLElement 的数组（HTMLElement[]). 如果你真的想测试每个 link 的 href 值，你只需要在循环中进行断言：

listLinks.forEach((link) => {
  expect(link).toHaveAttribute('href', expected);
});

恐怕没有 map 之类的实用方法可用于此用例。话虽这么说，如果没有条件将每个 to 属性设置为 links（就像你在这里分享的代码），我认为这个测试是没有必要的。您在这里实际测试的是 Gatsby Link 将正确的 href 属性设置为已通过的 to 道具生成的 link，但这在理论上是 none 你的业务，Gatsby 已经确保它正常工作。在我看来，你应该测试的是 you 定义的逻辑：如果 open prop 是 true，确保呈现 links。其余的是为了额外的安全，但可能没有必要。

Answer 2

.forEach 在 Jest 中可能会产生误报，请改用 it.each

React 测试库：检查多个元素是否有 href

React Testing Library : check if multiple elements have href

testing

jestjs

react-testing-library