`，再把參數的 React element render 到這個 `

` - [RenderResult](https://testing-library.com/docs/react-testing-library/api/#render-result) ## Act ```jsx import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; it("點擊名稱時，會顯示或隱藏 sub rows", () => { // ... // [Act] // - 點擊名稱 userEvent.click(screen.getByText("麵類")); // ... }); ``` - 透過 `@testing-library/dom` 的 `screen` 可以讀到上面說的 `document.body`，並且提供 API 讓我們可以指到裡面的特定元素 - 透過 `@testing-library/user-event`，可以在 `jsdom` 中模擬使用者在瀏覽器的行為 - `user-event@14` 要 React 18，目前我們是用 [`user-event@13`](https://testing-library.com/docs/ecosystem-user-event)，看官網文件和範例要小心版本。 ## Assert ```jsx it("點擊名稱時，會顯示或隱藏 sub rows", () => { // ... // [Assert] // - 確認對應的 sub-rows 出現在畫面中 const resultRows = screen.getAllByRole("row"); expect(screen.getByText("白醬海鮮義大利麵")).toBeInTheDocument(); expect(screen.getByText("番茄肉醬義大利麵")).toBeInTheDocument(); expect(resultRows.length).toBe(6); // ... }); ``` - 同 Act，透過 `@testing-library/dom` 的 `screen` 可以讀到上面說的 `document.body`，並且提供 API 讓我們可以指到裡面的特定元素 - `expect().toBeInTheDocument()` 哪來的？： - setupTest.js: ```javascript import "@testing-library/jest-dom"; ``` - [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) 會執行 Jest 的 `expect.extend(extensions)` 注入擴充方法 ## 怎麼在 screen 上取得要的元素？ - `@testing-library/dom` 的各種 queries API ### queries分類：依搜尋條件 ![](https://tech.mincontent.com/_astro/UANAiNP.m_kRJUj5_Z1gCumv.webp) - 怎麼選要用哪種方法？用跟使用者行為最像的，上面官網的排序就是照作者建議的順序（越上面越優先）： https://testing-library.com/docs/queries/about/#priority - 條件都是給 [TextMatch](https://testing-library.com/docs/queries/about/#textmatch)，只傳單純字串是 exact match ```javascript // Matching a string: screen.getByText("Hello World"); // full string match screen.getByText("llo Worl", { exact: false }); // substring match screen.getByText("hello world", { exact: false }); // ignore case // Matching a regex: screen.getByText(/World/); // substring match screen.getByText(/world/i); // substring match, ignore case screen.getByText(/^hello world$/i); // full string match, ignore case screen.getByText(/Hello W?oRlD/i); // substring match, ignore case, searches for "hello world" or "hello orld" // Matching with a custom function: screen.getByText((content, element) => content.startsWith("Hello")); ``` ### queries分類：依行為 get, query, find ![](https://tech.mincontent.com/_astro/d1SoWmQ.BEBOpZet_24gzcB.webp) - 所以舉例來說，`ByRole` 就會有 `getByRole`, `queryByRole`, `findByRole`, `getAllByRole`, `queryAllByRole`, `findAllByRole` ### withIn - 找在特定元素底下的元素 - Ref: [withIn](https://testing-library.com/docs/dom-testing-library/api-within) ```javascript import { render, screen, within } from "@testing-library/react"; render(); const messages = screen.getByText("messages"); const helloMessage = within(messages).getByText("hello"); ``` ## 更多關於 Arrange ### 可以檢查 render 的結果嗎？ - 用 `const { debug } = render()` 或 `screen.debug()` 看 render 結果: - 會 log 出經過 `prettyDOM` 排版的 `document.body`： ```htmlmixed