使用 es6 + jspm + systemjs + reactJS 进行玩笑测试答案

【问题标题】：jest testing with es6 + jspm + systemjs + reactJS使用 es6 + jspm + systemjs + reactJS 进行玩笑测试
【发布时间】：2015-10-05 09:27:48
【问题描述】：

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

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

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

提前致谢

【问题讨论】：

附言。我正在努力了解如何让它发挥作用，所以如果我做错了什么，请告诉我！
您找到解决方案了吗？
我不再玩笑话了。切换到简单的茉莉花。使用 Jasmine, karma, jspm karma 插件，我可以运行单元测试，当我想模拟依赖项时仍然有些麻烦，但我认为我应该多研究 systemjs 并且我应该设法做到，当我有时间的时候。 ..
这里是：github.com/shidhincr/react-jest-gulp-jspm-seed
@ShawnErquhart，该示例仅在使用 require 时才有效。不幸的是，Jest 目前不支持 ES6 风格 imports 的 mocking

标签： reactjs ecmascript-6 jestjs jspm systemjs

【解决方案1】：

很遗憾，Jest 目前不支持 SystemJS ES6 模块。

查看以下cmets：

所以听起来像是在假设您的模块是根据节点解析算法解析的。

很遗憾，这与 SystemJS 的解析算法不兼容。

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

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

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

-- Comment by @cpojer，Jest 合作者，2016 年 1 月

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

【讨论】：

是的 - cpojer 的评论，你链接有实际上是他和我之间的快速交流的一部分，以使 Jest 和 jspm 工作。我认为随着 jspm/systemjs 采用速度加快，我们将在未来六个月内看到解决方案。
啊，我现在明白了，谢谢@ShawnErquhart。让我们希望你是对的！六个月是你的直觉还是我错过了一些信息？
纯肠道。也许是更好的表达方式：如果夏天还没有标准的（尽管是基本的）jspm/Jest 设置，我会感到惊讶。

【解决方案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() 方法为你生成配置。

【讨论】：