您如何使用 jest 和 react-testing-library 测试锚元素的不存在？

Question

我的 react 组件根据规则呈现链接。

当 h4 元素中有链接时，标记会被渲染。

<h4><a href="">foo</a></h4>
<p>blah blah <a href="">bar</a> blah blah</p>

这是我编写测试以验证链接是否存在的方式。

  const props = {
    heading: 'foo',
    headingLink: '//www.bar.com',
  }

  test('render the heading text with link', () => {
    const { getByText } = render(<Component {...props} />)
    getByText(props.heading)
    expect(getByText(props.heading).getAttribute('href')).toBe(props.headingLink)
  })

如何测试锚元素未呈现/在 h4 中不存在？

<h4>foo</h4>
<p>blah blah <a href="">bar</a> blah blah</p>

Answer 1

我会在锚标记中添加data-testid 属性并使用queryBy* 查询并断言值为null。

Queries

来自What queries should I use?

测试 ID

getByTestId: 用户看不到（或听到）这些，所以这只是 推荐用于无法按角色或文本进行匹配的情况或它 没有意义（例如，文本是动态的）。

在您的情况下，锚标记是动态的。

给定<h4><a data-testid="test" href="">foo</a></h4> 或<h4>foo</h4>。

测试用例：

const { queryByTestId } = render(<Component {...props} />);

expect(queryByTestId('test')).toBe(null);

更新

还有Manual Queries 使用container 和querySelector DOM API。它可能看起来像这样。*

给定<h4><a href="">foo</a></h4> 或<h4>foo</h4>。

测试用例：

const { container } = render(<Component {...props} />);

expect(container.querySelector('h4 > a')).toBe(null);

* 我从未进行过这样的测试，但根据文档，这应该非常接近您可能正在寻找的内容。