常見問題

我應該使用哪個 get 方法？

請參閱我應該使用哪個查詢

我可以使用這個函式庫編寫單元測試嗎？

絕對可以！您可以使用此函式庫編寫單元測試、整合測試和端對端測試。

在編寫測試時，請記住

您的測試越像使用者使用軟體的方式，它們就越能給您信心。- 2018 年 2 月 17 日

如果我的應用程式已本地化，而我無法在測試中存取文字怎麼辦？

這很常見。我們給您的第一個建議是嘗試在您的測試中使用預設文字。這會讓一切都變得容易得多（不僅僅是使用此工具）。如果無法做到這一點，那麼您最好還是使用 data-testid (無論如何這也不算壞)。

我真的不喜歡 data-testids，但其他查詢都不合理。我一定要使用 data-testid 嗎？

絕對不是。話雖如此，人們不喜歡 data-testid 屬性的一個常見原因是他們擔心將其發佈到生產環境。我建議您可能需要一些簡單的 E2E 測試，偶爾在生產環境中執行，以確保事情順利運作。在這種情況下，data-testid 屬性會非常有用。即使您不在生產環境中執行這些測試，您可能也想在您即將發佈到生產環境的相同程式碼上執行一些 E2E 測試。在這種情況下，data-testid 屬性也會很有價值。

總而言之，如果您真的不想發佈 data-testid 屬性，那麼您可以使用這個簡單的 babel 外掛來移除它們。

如果您根本不想使用它們，那麼您可以簡單地使用常規的 DOM 方法和屬性來查詢容器中的元素。

const firstLiInDiv = container.querySelector('div li')
const allLisInDiv = container.querySelectorAll('div li')
const rootElement = container.firstChild

如果我正在迭代一個項目列表，而我想要在上面放置 data-testid="item" 屬性。我該如何區分它們？

您可以使用在選擇器中包含 :nth-child 來讓您的選擇器只選擇您想要的那個。

const thirdLiInUl = container.querySelector('ul > li:nth-child(3)')

或者您可以使用 getAllByRole 來查詢 listitem 角色並存取相關的索引

const items = [
  /* your items */
]
const {container} = render(/* however you render this stuff */)
const thirdItem = getAllByRole(container, 'listitem')[2]

救命啊！我無法存取元件方法或元件實例！

這是有意的。

我們希望您專注於測試元件的輸出和功能，因為使用者觀察到這些輸出和功能，並避免擔心元件的實作細節。

我們相信這會產生更少脆弱且更有意義的測試程式碼。

請參考此測試函式庫的指導原則以獲取更多資訊。