# Jest 與 React Testing Library 的差異

- 回顧
- [Jest](https://hackmd.io/1WM0cbYxQ5CC6uZo-D416w#Jest)
- [React Testing Library](https://hackmd.io/1WM0cbYxQ5CC6uZo-D416w#React-Testing-Library)
- [總結](https://hackmd.io/1WM0cbYxQ5CC6uZo-D416w#%E7%B8%BD%E7%B5%90)

---
回顧：
#### Jest
- 一款 **JavaScript 測試框架**，並且支持諸多框架包含：Vue, React, Angular
- 幫忙找到需要測試的檔案，並執行對應測試，判斷該測試是否通過
- React 官方推薦使用 Jest，因 Jest 與 React 兼容性高
- 若使用 Creat React App 的情況下，已經幫忙配置好 Jest 。

當有撰寫到 .test.js 時，去執行 npm run test 時，他會找到那些檔案，並去運行檔案內的測試，並幫我們判斷測試是否通過，產生結果如下圖：


使用到全域的 tset 方法，該方法可帶三個參數：

1. 針對測試的描述
2. 測試函式
3. timeout (可選)

test('針對測試的描述', () => {
  // 測試函式
},0);

而 Jest 會協助我們判斷測試的過程中是否有拋出錯誤，以以上測試為例，如果我們並沒有在裡面撰寫任何程式碼，就不會拋出錯誤，所以該測試會通過。

而當直接在程式碼拋出錯誤時，該測試會失敗。

test('針對測試的描述', () => {
  throw new Error();
},0);


在撰寫測試時很常會使用到 Jest 的 expect(value) 方法，並搭配 Jest 提供的 matcher 匹配器，來”斷言”某值。

- 幫我們捕捉要測試的檔案
- 運行測試，並判斷測試是否通過
- 擁有多個方法，例如： expect 函式跟多個 matcher 匹配器

---
#### React Testing Library

React Testing Library 內有很多的方法，可以幫助捕捉 DOM ，也能更容易測試 React 元件。

且 React Testing Library 希望我們能更關注在用戶的使用操作上，所以提供了非常多在模擬使用者查詢 DOM 節點的方法。

除此之外也提供了很方便渲染 React 元件的 `render`、`screen`、`getBy` 功能。

但 React Testing Library 本身無法幫我們運行測試，跟測試是否有通過，這些事情都是仰賴 Jest 的幫忙，所以兩者其實有著各自的分工。

---
#### 總結

Jest 能運行測試結果，React Testing Library 能幫助捕捉 DOM。

看完以上的介紹，希望讓你可以了解 Jest 跟 React Testing Library 分別有著不同的作用， Jest 能幫你運行測試且擁有很多好用的方法，而 React Testing Library 能幫助你更容易捕捉 DOM ，所以在撰寫測試時搭配一起使用，能更順利的寫好測試。