記錄前端單元測試和e2e測試踩過的坑【持續更新】

方案

• 單元測試：jest
• react組件測試：enzyme
• e2e測試： puppeteer

問題

1. 安裝 puppeteer 須要設置 chromium 國內鏡像
   github.com/cnpm/cnpmjs…
2. jest 和 puppeteer 結合使用的時候如何保持以前的 JSDOM 環境還能使用
   當設置 jest.config.js 爲以下配置以後以前的 JSDOM 環境就沒有了，取而代之的是 nodejs 執行環境，若是想要 e2e 測試和 單元測試共存的話，個人方案是設置了兩個 jest 配置文件，一個用於配置單元測試，一個用於配置 e2e 測試。

   module.exports = {
     preset: 'jest-puppeteer',
     testMatch: ["**/__tests__/**/*.e2e.[jt]s?(x)"],
   } 
   複製代碼

3. 如何在啓動 devserver 以後啓動 e2e 測試 個人 e2e 測試須要依賴本地啓動一個 devserver，因此我須要等本地 server 啓動以後再測試，找了半天終於在 github 上找到一個庫 start-server-and-test 專門解決這個問題。
4. 如何在 puppeteer 裏面是用 DOM 操做 其實這個不算是個坑，只不過新人對 puppeteer 可能不熟悉，其實 puppeteer 是提供了一套 api 專門去作 DOM 的操做的。
   pptr.dev/#?product=P… stackoverflow.com/questions/5…
5. 如何依次執行單元測試和 e2e 測試
   能夠試試這個庫 npm-run-all 它能夠控制你的多個 npm script 任務並行或是串行執行。