前情提要

聽到門外傳來了些許奇妙的聲響，走到門外看到地板上掉落一張紙。

拿起了那張紙：「怎麼又來了！！上次不是已經成為魔法師了嗎？(╬☉д⊙)」

伴隨著我的碎念聲，耳邊響起了熟悉的鳥叫聲。

好像是我當初學習 JavaScript 魔法入門的引導學姊(綠繡眼型態) - 艾草！

「艾草！你怎麼來了？我當初不是已經學完 JavaScript 魔法入門了嗎？」

「啾啾啾 ~」

「是我認錯了嗎？是普通的鳥喔… 那怎麼不會怕人？」

「哈哈哈 ~ 被騙了吧！我這次回來教你新的防禦魔法了，活到老學到老，魔法師你還差得遠勒 ~~」

「我沒有答應你RRRR ~」

真-前言

抱持著去年既然寫了，今年也要快樂(?)連任的心，開啟了新的一輪鐵人挑戰!
去年寫了 JavaScript 魔法入門，去年中學習了 Vue 框架，而今年很幸運地成功跨入前端工程師的領域，工作上是使用 React 框架，發現前端領域真的跟魔法師一樣需要抱持著持續摸索的心，不斷向前！

而工作上自己在測試的撰寫上屢屢卡關，也常常不得要領，正因此就是要來寫文章鞭策自己學起來啊！！
目前是使用 React 框架做開發，測試時會使用到以下兩種套件：

Jest

Jest 為 JavaScript 測試框架，並且支持諸多框架包含幾大框架： Vue 、 React 、Angular ，Jest 為 Test Runner 可以幫忙找到需要測試的檔案，並去執行對應的測試，判斷該測試是否通過。

而在 React 官方文件上也能看到，官方相當推薦使用 Jest ， Jest 與 React 兼容性很高，且如果使用 Create React App 的情況下，已經幫忙配置好 Jest 了，相當方便！

React Testing Library

React Testing Library 是一套 DOM Testing Library ，能為我們提供 Virtual DOMs ，可以與 Jest 搭配在不透過瀏覽器的情況下模擬使用者的操作行為，例如：點擊按鈕、下拉選單等。

最後，希望我的學習(卡關)之旅能為大家帶來一點幫助！

參考文章

Testing React with Jest and React Testing Library (RTL)
https://jestjs.io/zh-Hans/docs/getting-started
https://testing-library.com/docs/react-testing-library/intro/
https://zh-hans.reactjs.org/docs/testing-environments.html#mocking-a-rendering-surface