用 es6 + jspm + systemjs + reactJS 开玩笑测试 [英] jest testing with es6 + jspm + systemjs + reactJS

问题描述

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

I'm trying to figure out how to make my unit tests in my reactJS ES6 application. My application is already using es6 module system, transpiled with jspm/babel to systemJs.

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

I found babel-jest as preprocessor but even with it, I can't run my tests because jest can't find SystemJs. ("System is not defined" error is shown in the console)

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

In the browser, as explained in jspm documentation, SystemJs is loaded globally. I guess I should load SystemJs inside my preprocessor, but How can I make systemJs available for loading additional modules in my tests?

提前致谢

推荐答案

本质上，为了让 Jest 与运行在 JSPM/SystemJS 上的应用程序完美配合，您需要教"它有关它在配置中保存的所有映射.js 文件(或者你调用 System.config())

in essence to get Jest to play nice with an app running on JSPM/SystemJS you need to "teach" it about all the mapping it holds in the config.js file (or however you call System.config())

长答案是您需要为每个使用 JSPM 安装的依赖项创建一个条目，如下所示:

the long answer is that you need to create an entry for each dependency you have installed with JSPM like this:

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

对于您拥有的每个别名，您至少需要一个条目:

for each alias you have, you need at least one entry:

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

您还需要在 nodeNameMapper 中有这些映射:

you also need to have these mappings in your nodeNameMapper:

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

最后，你需要有这个 moduleDirectories 配置:

and finally, you need to have this moduleDirectories config:

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

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

this isnt really practical because you dont want to keep two copies of all your dependencies registry and have to sync them when they change...

所以简短和更好的答案，你使用我的gulp-jest-jspm 插件 :)

so the short and better answer, you use my gulp-jest-jspm plugin :)

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

even if you dont use gulp, you can use its getJestConfig() method to generate the config for you before you run Jest.

这篇关于用 es6 + jspm + systemjs + reactJS 开玩笑测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！