用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无法找到SystemJ. (控制台中显示未定义系统" 错误)

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...

所以 short 和更好的答案，您使用我的 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屋！