在 React 测试库中检查对象是否包含 link

Question

进行以下单元测试：

  const MY_URL = 'example.com'
  it('should render MyComponent with url', () => {
    const { getByTestId } = render(<MyComponent />);
    const myLink = getByTestId(TestIds.LINK);
    expect(loggingLink).toContain(MY_URL);
  });

测试失败并显示以下消息：

 Expected value:  "example.com"
 Received object: <div class="m-3" data-testid="test-link"><a href="example.com">my-link</a></div>

所以 toContain 似乎没有检查该对象内部的内容。有没有一种方法可以检查 URL 是否在对象内部？

Answer 1

有几件事。首先，toContain 用于测试数组中是否存在元素。 https://jestjs.io/docs/expect#tocontainitem

其次，RTL 的重点不是测试属性等，而是测试用户在屏幕上看到的内容。所以我想这样做的“RTL 方式”是单击 link 并查看显示的内容。不可否认，这并不总是对所有情况都有帮助！

如果您绝对确定此 url 需要围绕它进行测试，那么您确实有一个通过底层 jest jsdom selectors 的逃生舱口。您可以使用沼泽标准 querySelector 查询元素，然后直接测试 href 属性。

事实上，您甚至不需要 querySelector。 getBy 方法都是 return 一个 jsdom 对象，然后您可以使用 getAttribute('href')

对其进行测试

Answer 2

您可以通过ByRole查询获取锚元素。只需使用 link 搜索它，然后检查属性 href:

// I used screen in this case, but you can get getByRole from render.
const anchorElement = screen.getByRole('link');

expect(anchorElement).toBeInTheDocument();

expect(anchorElement).toHaveAttribute('href', 'example.com');

锚元素有link的作用只有当href属性存在时，否则没有相应的作用。您可以查看更多相关信息 here.

在 React 测试库中检查对象是否包含 link

Check if object contains a link in React Testing Library

javascript

unit-testing

reactjs

jestjs

react-testing-library