Feature request: Support using Jest testing framework

[kuncevic]

This is a proposal/future request

Current Angular CLI testing tools based on karma and jasmine that we all get use to it. But would you consider to support Jest as well https://github.com/facebook/jest ?

Jest testing framework commonly used across React and Nodejs projects. It is supports unit tests, assertions, mocks, coverage, live test reload, JS File mocks and has a lots of features build in to it like 'Snapshot Testing' also is provided zero configuration experience and fully compatible with webpack.

Goal

Just thinking if it might help the Angular community to improve out testing story using Jest and it would of be great it it can be available with Angular CLI.

Any thoughts?

[dancancro]

We recently tried that out in a React project. It seemed pretty cool but we had trouble getting it to work on Windows. Has anyone had better luck?

[delasteve]

@kuncevic, I would suggest seeing if jest works with Angular, first. I know there has been issues in the past for mocha and jasmine users when using async. There had to be a specific patch put in place in the zone.js library.

https://github.com/angular/zone.js/blob/master/lib/mocha/mocha.ts
https://github.com/angular/zone.js/tree/master/lib/jasmine/jasmine.ts

I know @hansl has mentioned he would only like to support one testing framework, jasmine. If you can verify the async issue and/or get the patch in place for jest, I will do my best to get a PR in place that supports jasmine, mocha, and jest.

[mattlewis92]

I looked into this before as jest is really awesome, unfortunately it only runs on node so there isn't a way of getting it to run with karma in the browser. There's an open issue for it here: jestjs/jest#848

Due to the way angular abstracts the DOM it might be possible to get it working, but it would be a big difference from the current test setup.

[beeman]

I have set up a demo project here https://github.com/beeman/angular-cli-jest and the first impression is that it works fine. I did not explore any advanced feature yet though.

[thymikee]

So it's currently possible to use Jest with Angular, and it's pretty forward to add/migrate thanks to jest-preset-angular. I've made a blog post about this very topic, thought you might be interested.

What @beeman proposed is half a solution. Jest also needs to run in Zone.js context, otherwise testing components will fail.

Although it would be great, if we could bake it into the cli and make it an option while bootstrapping somehow.

[beeman]

@thymikee your preset looks great, I'm about to test it.

I don't think Jest will find it's way into the CLI any time soon. It might be a nice thing to look at when the CLI starts supporting custom blueprints.

[deebloo]

This is a great candidate for a blueprint!

[intellix]

This blog post has just appeared which apparently goes over using Jest in CLI 1.0.0: https://www.xfive.co/blog/testing-angular-faster-jest/

Just ran some speed tests on ~400 tests:

Karma: 0m48.999s
Jest: 0m31.385s

Edit: Just tested watch mode and it's brilliant. You can filter by filename or test name via patterns and every time it detects a change, it'll only run the tests from those matched files.

Also, it's able to see what files were last changed via git and only run tests against changed files, so you know within seconds when you've broken a test as opposed to running the whole suite on any change.

ne file of tests: Time: 1.536s, estimated 2s:

[vecernik]

I eagerly tried ng-cli 1.0 default project with xfive.co and jest-preset-angular changes described, also tried https://github.com/beeman/angular-cli-jest and none was working on osx/node7.8. Did I miss anything?

[thymikee]

@vecernik please describe what went wrong on jest-preset-angular issue tracker, we'll see what can be done :)

[Meligy]

I tried Jest with instructions from @thymikee's post (which uses jest-preset-angular), and it worked just fine.

Let me share my findings:

Result Summary

• It works!
• It took some small changes.
• It seemed slower in my case.
• It caught more errors than Webpack/Karma/Jasmine, which I was very grateful for.
• The experience is quite different though that I won't make it the default my team yet.

Required Changes

• I started with all the steps in the post above.

• For some libraries I had to follow this github guidance, which made the jest property in my package.json look like:

  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupJest.ts",
    "transformIgnorePatterns": [
      "^<rootDir>\\node_modules\\(?!ng2-bootstrap|angular2-json2csv|angular2-datatable)."
    ]
  }

  The transformIgnorePatterns is the most interesting here. I used \\ because I'm on Windows, and I used ^<rootDir>\\ to try to speed things, although it didn't make a big difference. There's also "allowJs": true in "compilerOptions" in src/tsconfig.spec.json.

• I also had to change the tests. The post mentions all the changes needed (mostly only changing jasmine. to expect. in a few places).

  But there's another change I had to do, which is removing any expectationFailOutput, which is when you give a custom error message for when a matcher fails to match. Seems Jest does not support that.

Gains

• Jest seems to run tests in more isolation than the current Webpack/Karma/Jasmine combo, which showed me some errors in my tests that somehow didn't show before.

• Jest is reporting which tests are taking too long, the slowness warnings were useful smells to identify not-greatly-written tests.

• The watch mode is very nice, even though it seems to work off git changes not file watching, which can be confusing at first when you see slightly more files than expected, but it's still very useful.

Issues

• As mentioned in Required Changes above, now I cannot use custom error messages in my test matchers (that said, it's true that default matcher errors are very beautiful and obvious, but still).

• At the moment, it seems the jest-preset-angular initialization code needs optimization. It doesn't call polyfills.ts and instead calls its own set, even though it's optimized for Angular CLI (for example, it uses src/tsconfig.spec.json).

  More importantly, it imports the entire rxjs library, which might hide errors when you forget to import some operators.

• It's surprisingly slower than the Webpack/Karma/Jasmine combo!

  For my 196 tests, the Angular CLI v1.0.0 default test runner (with Angular 4) takes ~ 55 seconds, while Jest takes ~100 seconds.

  Update: That conclusion might not be accurate. The time I quoted for each test runner is what the test runner reported. This might for example not include Webpack compilation and browser opening in Karma and might be total time in Jest. If so, then the total time would be the same.
  Thanks @hugoccampos for bringing this to my attention.

• No browser tests debugging apparently (It might be my ignorance here). A bit harder maybe for those starting testing.

  The Angular CLI does a great job at making testing easy for those not used to it.

• When Jest itself fails to run, for example if I put a badly formatted regex for transformIgnorePatterns shown above, or mess up something in my src/tsconfig.spec.json file, the errors it shows are very cryptic and tell you nothing that can lead to the real issue (unlike matching errors in tests, which are very nice).