Jest | Mock 連 CSS 都管得著？沒錯！就是可以！

哦！相信我其實真的不想發這篇的，在第一次解決的時候就想說要把答案好好的放心底，反正官網就有註明該怎麼做了對吧？但要不是它剛剛又浪費了我快一個小時，然後邊 Google 邊想著「 Oh my god！當時到底是怎麼解決的？」這樣，我才毅然決然地敲出這篇文章，下方也會提到到底是卡在哪。

簡單來說，狀況就是 Jest 不認識 CSS，所以它那些眷屬 SCSS 、 SASS 、 LESS ，也都不認識就對了，但在要 Render 出 Component 來做測試的時候就會出現上圖那個尷尬的錯誤，啊誠如我之前說的「 87 % 的問題都可以從 Google 上找到答案！」，這個也不例外，甚至官網就有說明了：

截圖自：https://jestjs.io/docs/en/webpack

意思大概是，在測試 Component 的時候 CSS 寫了什麼根本一點關係都沒有，因為可以直接確認 className 屬性是否正確，所以如果有 import 任何 CSS 檔案時，就可以把它 Mocks 掉，這樣就不會出錯啦！

看到上方畫面的我，一如往常的裝了 identity-obj-proxy ：

npm install identity-obj-proxy --save -dev

然後跑到 package.json 中加上：

"jest": {
  "moduleNameMapper": {
    "\\.(css|scss|sass|less)$": "identity-obj-proxy"
  }
}

此時信心爆棚的我立馬執行了測試，結果

卻還是爆了！

好吧！那之後的過程，大概就是瘋狂永無止盡的 Google ，就像開頭說的那樣，一直到我在 Stack Overflow 找到了這篇文章，裡面有個 Answer ：

截圖自：https://stackoverflow.com/questions/39418555/syntaxerror-with-jest-and-react-and-importing-css-files

對！就是那個 jest.config.js 我正看著它靜靜的躺在根目錄上，於是秒速打開他後，將上方的 moduleNameMapper 屬性移到它身上！儲存後開始測試。

猜猜怎麼了？

就這麼好了！但官網的做法絕對沒有錯，因為它有標註說是跟著 webpack 一起使用，後來看看我的 jest.config.js 目前好像也沒有存在的必要性，於是就把它從專案中移除，然後再跑一次還是沒出錯。

不負責任猜想可能是如果 jest.config.js 在專案目錄中的話，就會以它的設定為主，不會另外確認其他檔案對 Jest 的設定，所以就暫時先這樣處理了。

如果文章中的做法有問題再麻煩各位留言告訴我！感激不盡 🙇