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

【问题标题】：React Testing Library : check if multiple elements have hrefReact 测试库：检查多个元素是否有 href
【发布时间】：2021-04-20 09:29:11
【问题描述】：

我想检查<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？

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

【问题讨论】：

标签： testing jestjs react-testing-library

【解决方案1】：

正如错误所说，.toHaveAttribute 应该在 HTMLElement 上调用，但您在 listLinks 上调用它，HTMLElement (HTMLElement[]) 的数组。如果您真的想测试每个链接的href 值，您只需在循环中进行断言：

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

恐怕没有像map 这样的实用方法或用于此用例的东西。话虽如此，如果没有条件将每个 to 属性设置为链接（就像您在此处共享的代码），我认为这个测试是没有必要的。您在这里实际测试的是 Gatsby Link 将正确的 href 属性设置为从已传递的 to 道具生成的链接，但这理论上与您无关，Gatsby 已经确保它正常工作。在我看来，您应该测试的是您定义的逻辑：如果open 属性为true，则确保呈现链接。其余的都是为了额外的安全，但可能没有必要。

【讨论】：

绝对！我在循环中苦苦挣扎（它是如此基本，我无法弄清楚为什么我没有找到它）但我测试的最终目标是检查每个 href 是否都有斜杠 /。感谢您的回答。

【解决方案2】：

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

【讨论】：