檢查對象是否包含 React 測試庫中的鏈接

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

您可以使用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');

錨元素只有在存在 href 屬性時才具有link角色，否則沒有相應的角色。 你可以在這里查看更多信息。

Answer 2

有幾件事。 首先， toContain用於測試元素是否存在於數組中。 https://jestjs.io/docs/expect#tocontainitem

其次，RTL 的重點不是測試屬性等，而是測試用戶在屏幕上看到的內容。 所以我想這樣做的“RTL方式”是單擊鏈接並查看顯示的內容。 誠然，這並不總是在每種情況下都有幫助！

如果您絕對確定此 url 需要圍繞它進行測試，那么您確實有一個通過底層jest jsdom 選擇器的逃生艙口。 您可以使用沼澤標准querySelector查詢元素，然后直接測試href屬性。

事實上，您甚至不需要 querySelector。 getBy方法都返回一個 jsdom 對象，然后您可以使用getAttribute('href')對其進行測試