# Jest DOM

@testing-library/jest-dom 套件庫，提供很多針對 Jest 測試網頁上 **DOM 元素狀態**的匹配器。

來看看 Jest DOM 能做什麼吧！

---
#### 常用方法：

- `toBeDisabled()`：判斷**是否被禁用**
- 以按鈕舉例：

        <button type="button" disabled>click</button>

        // 透過 getByRole 選取 button 後判斷是否被禁用
        expect(getByRole('button')).toBeDisabled()

- `toBeInTheDocument()`：幫助判斷頁面上**是否存在該元素**。
- 假使頁面上有 Hello World!! 就可以透過此方式去斷言是否存在：

        expect(getByText('Hello World!!')).toBeInTheDocument();

- `toBeEnabled` ：判斷**是否未被禁用**
- 也可直接在 `toBeDisabled()`前加上 `not` 去判斷。

        // 判斷未被禁用

        // 1 使用 toBeEnabled
        expect(getByRole('button')).toBeEnabled()

        // 2 使用 toBeDisabled 搭配 not
        expect(getByRole('button')).not.toBeDisabled()

- `toHaveStyle()`：確認元素**是否擁有 style 設定值**，可傳入 css 字串或物件，需要與帶入的值完全匹配才能通過。

<aside>
👉 只有 Inline style 可以測， className 內設定的 css 樣式需要另外安裝套件才能測試。
</aside>

--

與**表單**相關：

- `toBeChecked`
- 檢查 input type 為 `checkbox` 或 `radio` 時是否有屬性 `checked`
- 自行設定 `role` 為 `checkbox` 或 `radio` 或 `switch` ，且擁有 `aria-checked` 為 `true`

- `toBeRequired()` ：判斷**是否必填**，判斷當表單元素是否有 `required` 或 `aria-required="true"`。

- `toBeValid` ：判斷**用戶輸入後的值是否有效**，當 `aria-invalid`
 為 `false`或未設置值時，該值為有效，文件中有特別提到在使用時 [checkValidity()](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation) 也必須為 true。
- `toBeInvalid`：
- 判斷表單輸入的值是否為無效，當 `aria-invalid="true"`時該值為無效，且 [checkValidity()](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Constraint_validation) 為 false。
- 可以使用 not 搭配 toBeValid 來判斷無效的值外也可改為透過 `toBeInvalid()`
- `toHaveErrorMessage`：
- 當有設定錯誤訊息 `aria-errormessage`且表單值為無效時 `aria-invalid="true"`可透過 `toHaveErrorMessage()`進行測試，該測試是區分大小寫的，如果不想區分大小寫，可以使用正則表達式。

---
參考文章

https://github.com/testing-library/jest-dom
https://testing-library.com/docs/queries/about/