jest testing with es6 + jspm + systemjs + reactJS

Question

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.

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)

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?

Thanks in advance

PS. I'm trying to understand how to make it work, so if I am doing domething wrong, please, tell me what! — nemenos, Oct 05 '15 at 09:38
I'm not using jest anymore. Switched over to simple jasmine. With Jasmine, karma, jspm karma plugin, I can run unit tests, I still have some troubles when I want to mock dependencies, but I think I should study systemjs a little more and I should manage to do it, when I have time... — nemenos, Jan 03 '16 at 20:13
There's this: https://github.com/shidhincr/react-jest-gulp-jspm-seed — Shawn Erquhart, Jan 12 '16 at 04:41
@ShawnErquhart, that example only works because [`require`](https://github.com/shidhincr/react-jest-gulp-jspm-seed/blob/master/scripts/testComponent.js#L3) is being used. Unfortunately, Jest doesn't support the mocking of ES6 style `import`s at the moment — Heinrich Filter, Jan 25 '16 at 12:32

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

Unfortunately, Jest does not support SystemJS ES6 modules at the moment.

See the following comments:

So it sounds like jest assumes that your modules resolve based on the Node resolution algorithm.

Unfortunately this isn't compatible with SystemJS's resolution algorithm.

If there was a way in jest to set a "custom resolver" algorithm through an API then we could plug jspm into jest, but I'm not sure if this is currently possible.

-- Comment by Guy Bedford, creator of SystemJS, Jun 2015

It is unlikely there'll be official support for [SystemJS] unless it is a community contribution.

-- Comment by @cpojer, Jest Collaborator, Jan 2016

Also see the following issue: Invalid URL is thrown when requiring systemjs in jest test cases

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 25 '16 at 12:33

Heinrich Filter

5,760
1
33
34

Yeah - cpojer's comment that you linked there was actually a part of a quick exchange between he and I in my quest to make Jest and jspm work. I think we'll see a solution in the next six months as jspm/systemjs adoption picks up pace. – Shawn Erquhart Jan 25 '16 at 17:01
Ah I see now, thanks @ShawnErquhart. Let's hope you're right! Is the six months your gut feeling or did I miss some information? – Heinrich Filter Jan 26 '16 at 07:53
Pure gut. Maybe a better way to phrase it: I'd be surprised if there wasn't a standard, albeit basic, jspm/Jest setup available by summer. – Shawn Erquhart Jan 26 '16 at 13:26

score 0 · Answer 2 · answered Dec 20 '16 at 19:29

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())

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

you also need to have these mappings in your nodeNameMapper:

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

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

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

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

jest testing with es6 + jspm + systemjs + reactJS

2 Answers2

Linked