如何使用 jest 和 react-testing-library 測試元素是否存在？

Question

我有一個組件庫，我正在為使用 Jest 和 react-testing-library 編寫單元測試。 基於某些道具或事件，我想驗證某些元素沒有被渲染。

如果在expect觸發之前未找到導致測試失敗的元素，則getByText 、 getByTestId等會在react-testing-library中拋出錯誤。

你如何使用 react-testing-library 測試 jest 中不存在的東西？

Answer 1

來自DOM Testing-library Docs - Appearance and Disappearance

斷言元素不存在

標准getBy方法在找不到元素時會拋出錯誤，因此如果您想斷言某個元素不存在於 DOM 中，則可以改用queryBy API：

 const submitButton = screen.queryByText('submit') expect(submitButton).toBeNull() // it doesn't exist

queryAll APIs 版本返回匹配節點的數組。 數組的長度對於在 DOM 中添加或刪除元素后的斷言很有用。

 const submitButtons = screen.queryAllByText('submit') expect(submitButtons).toHaveLength(2) // expect 2 elements

not.toBeInTheDocument

jest-dom實用程序庫提供了.toBeInTheDocument()匹配器，可用於斷言某個元素是否在文檔正文中。 這比斷言查詢結果為null更有意義。

 import '@testing-library/jest-dom/extend-expect' // use `queryBy` to avoid throwing an error with `getBy` const submitButton = screen.queryByText('submit') expect(submitButton).not.toBeInTheDocument()

Answer 2

使用queryBy / queryAllBy 。

如您所說，如果未找到任何內容， getBy*和getAllBy*拋出錯誤。

但是，等效方法queryBy*和queryAllBy*反而返回null或[] ：

查詢方式

queryBy*查詢返回查詢的第一個匹配節點，如果沒有元素匹配，則返回null 。 這對於斷言不存在的元素很有用。 如果找到多個匹配項（使用 queryAllBy 代替），則會拋出此問題。

queryAllBy queryAllBy*查詢返回查詢的所有匹配節點的數組，如果沒有元素匹配，則返回空數組 ( [] )。

https://testing-library.com/docs/dom-testing-library/api-queries#queryby

因此，對於您提到的特定兩個，您應該使用queryByText和queryByTestId ，但這些適用於所有查詢，而不僅僅是這兩個。

Answer 3

您必須使用 queryByTestId 而不是 getByTestId。

這是一個代碼示例，我想在其中測試具有“car” id 的組件是否不存在。

 describe('And there is no car', () => {
  it('Should not display car mark', () => {
    const props = {
      ...defaultProps,
      base: null,
    }
    const { queryByTestId } = render(
      <IntlProvider locale="fr" messages={fr}>
        <CarContainer{...props} />
      </IntlProvider>,
    );
    expect(queryByTestId(/car/)).toBeNull();
  });
});

Answer 4

getBy* 在找不到元素時拋出錯誤，因此您可以檢查它

expect(() => getByText('your text')).toThrow('Unable to find an element');

Answer 5

希望這會有所幫助

此表顯示了 function 錯誤的原因/時間

哪些函數是異步的

function 的退貨單是什么

Answer 6

您可以使用 react-native-testing-library "getAllByType" 然后檢查組件是否為空。 優點是不用設置TestID，也應該和第三方組件一起工作

 it('should contain Customer component', () => {
    const component = render(<Details/>);
    const customerComponent = component.getAllByType(Customer);
    expect(customerComponent).not.toBeNull();
  });

Answer 7

另一種解決方案：您也可以使用try/catch塊

expect.assertions(1)
try {
    // if the element is found, the following expect will fail the test
    expect(getByTestId('your-test-id')).not.toBeVisible();
} catch (error) {
    // otherwise, the expect will throw, and the following expect will pass the test
    expect(true).toBeTruthy();
}

Answer 8

我最近寫了一個方法來檢查 cucumber 項目的元素可見性。

希望它有用。

public async checknotVisibility(page:Page,location:string) :Promise<void> 
{
    const element = await page.waitForSelector(location);
    expect(element).not.toBe(location); 
}

Answer 9

// check if modal can be open
const openModalBtn = await screen.findByTestId("open-modal-btn");
fireEvent.click(openModalBtn);

expect(
  await screen.findByTestId(`title-modal`)
).toBeInTheDocument();


// check if modal can be close
const closeModalBtn = await screen.findByTestId(
  "close-modal-btn"
);
fireEvent.click(closeModalBtn);

const sleep = (ms: number) => {
  return new Promise((resolve) => setTimeout(resolve, ms));
};

await sleep(500);
expect(screen.queryByTestId("title-modal")).toBeNull();

Answer 10

const submitButton = screen.queryByText('submit')
expect(submitButton).toBeNull() // it doesn't exist

expect(submitButton).not.toBeNull() // it exist

Answer 11

為我工作（如果你想使用 getByTestId）：

expect(() => getByTestId('time-label')).toThrow()

Answer 12

不想埋頭，所以這是正確的解決方案✅

waitFor(() => queryByTestId(/car/) === null)

到目前為止，這里的所有答案都存在問題......

不要使用getByTestId ，那將不得不等待超時，因為它期望元素最終會在那里。 然后它會拋出，你必須抓住它，這是一個可讀性較差的測試。 最后，您可能會遇到一個 RACE CONDITION，其中在元素消失之前評估 getByTestId 並且我們的測試將失敗。

如果頁面發生變化並且元素尚未消失，則僅使用不帶queryByTestId的waitFor是一個問題。 比賽條件

deleteCarButton.click();
expect(queryByTestId(/car/)).toBeNull(); //

如果在單擊處理程序和渲染完成之前對 expect() 進行求值，我們就會遇到麻煩。

Answer 13

queryByRole的默認行為是只查找一個元素。 如果不是，它會拋出一個錯誤。 所以如果你發現一個錯誤，這意味着當前查詢找到 0 個元素

expect(
   ()=>screen.getByRole('button')
).toThrow()

getByRole返回 'null'，如果它沒有找到 anthing

 expect(screen.queryByRole('button')).toEqual((null))

findByRole異步運行，因此它返回Promise 。 如果它沒有找到元素，它會拒絕 promise。如果你正在使用它，你需要運行async回調

test("testing", async () => {
  let nonExist = false;
  try {
    await screen.findByRole("button");
  } catch (error) {
    nonExist = true;
  }
  expect(nonExist).toEqual(true);
});