用es6 + jspm + systemjs + reactJS開玩笑

Question

我試圖找出如何在我的reactJS ES6應用程序中進行單元測試。 我的應用程序已經在使用es6模塊系統，並通過jspm / babel轉換為systemJs。

我發現babel-jest作為預處理器，但是即使有了它，我也無法運行測試，因為jest無法找到SystemJ。 （控制台中顯示“未定義系統”錯誤）

如jspm文檔中所述，在瀏覽器中，SystemJs是全局加載的。 我想應該在預處理器中加載SystemJ，但是如何使systemJ可用於加載測試中的其他模塊？

提前致謝

Answer 1

不幸的是，Jest目前不支持SystemJS ES6模塊。

請參閱以下注釋：

因此，聽起來好像開玩笑地假設您的模塊基於節點解析算法進行解析。

不幸的是，這與SystemJS的解析算法不兼容。

如果在jest中有一種方法可以通過API設置“自定義解析器”算法，那么我們可以將jspm插入到jest中，但是我不確定目前是否可行。

-SystemJS創始人Guy Bedford的評論，2015年6月

---

除非它是社區的貢獻，否則不太可能獲得[SystemJS]的官方支持。

-Jest合作者@cpojer的評論 ，2016年1月

---

另請參閱以下問題： 在簡單的測試案例中要求使用systemjs時，將拋出無效的URL

Answer 2

從本質上講，要使Jest與運行在JSPM / SystemJS上的應用程序搭配使用，您需要“教”它有關config.js文件中包含的所有映射的信息（或者您調用System.config（））

長答案是，您需要為使用JSPM安裝的每個依賴項創建一個條目，如下所示：

//jest configuration 
moduleNameMapper: {     
   ...
   "^redux$": "redux@3.6.0",
   ...
}

對於您擁有的每個別名，您至少需要一個條目：

moduleNameMapper: {     
        ...
        "^common\\/(.*)": "<rootDir>/src/common/$1", //for a dir alias
       "^actions$": "<rootDir>/src/actions/index", //for a file alias
       ...
}

您還需要在nodeNameMapper中具有以下映射：

moduleNameMapper: {     
    ...
         "^npm:(.*)": "<rootDir>/jspm_packages/npm/$1",
            "^github:(.*)": "<rootDir>/jspm_packages/github/$1",
    ...
}

最后，您需要具有以下moduleDirectories配置：

moduleDirectories: ["node_modules", "jspm_packages/npm", "jspm_packages/github"]

這真的不切實際，因為您不想保留所有依賴項注冊表的兩個副本，並且在更改時必須同步它們...

所以簡短而更好的答案是，您使用我的gulp-jest-jspm插件:)

即使您不使用gulp ，也可以在運行Jest之前使用其getJestConfig（）方法為您生成配置。