用 es6 + jspm + systemjs + reactJS 开玩笑测试

IT技术 reactjs ecmascript-6 jestjs jspm systemjs
2021-05-25 06:06:02

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

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

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

提前致谢

2个回答

不幸的是,Jest 目前不支持 SystemJS ES6 module。

请参阅以下评论:

所以听起来 jest 假设您的module基于节点解析算法进行解析。

不幸的是,这与 SystemJS 的解析算法不兼容。

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

-- 2015 年 6 月 SystemJS 的创建者Guy Bedford 的评论


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

-- @cpojer 的评论,Jest 合作者,2016 年 1 月


另请参阅以下问题:在 jest 测试用例中需要 systemjs 时抛出无效 URL

本质上,要让 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"]

这不是很实用,因为您不想保留所有依赖项注册表的两个副本,并且在它们更改时必须同步它们...

所以短期更好的答案,你用我的一口,笑话,JSPM插件:)

即使您不使用gulp,您也可以在运行 Jest 之前使用其getJestConfig()方法为您生成配置。