用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（）方法为您生成配置。