Question

我正在试图弄清楚如何在reactJS ES6应用程序中进行单元测试。我的应用程序已经在使用es6模块系统，用jspm / babel转换为systemJs。

我发现babel-jest是预处理器，但即便使用它，我也无法运行我的测试，因为jest无法找到SystemJs。（“系统未定义”错误显示在控制台中）

在浏览器中，如jspm文档中所述，SystemJs是全局加载的。我想我应该在我的预处理器中加载SystemJs，但是如何在我的测试中使systemJs可用于加载其他模块？

提前致谢

Answer 1

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

请参阅以下评论：

因此，听起来好像假设您的模块基于节点分辨率算法解析。

不幸的是，这与SystemJS的分辨率算法不兼容。

如果有一种方法可以通过API设置“自定义解析器”算法，那么我们可以将jspm插入jest，但我不确定这是否可能。

- Comment by Guy Bedford，SystemJS的创建者，2015年6月

除非是社区贡献，否则不太可能有[SystemJS]的官方支持。

- Comment by @cpojer，Jest Collaborator，2016年1月

另请参阅以下问题：Invalid URL is thrown when requiring systemjs in jest test cases

Answer 2

本质上是让Jest与在JSPM / SystemJS上运行的应用程序玩得很好，你需要＆＃34;教授＆＃34;它关于它在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（）方法为您生成配置。

使用es6 + jspm + systemjs + reactJS进行测试

2 个答案: