DEV Community

Make your Angular tests 1000% better by switching from Karma to Jest

Dylan Watson on December 05, 2019

Note: A more recent article might provide better results. Check out this one first It sounds sensationalist but it's true. One of the projects I...

Read full post

Ildar Sharafeev • Dec 23 '22

Great article! I would also suggest to use --findRelatedTests option in your pre-commit hook: dev.to/srshifu/under-the-hood-how-...

vbourdeix • Feb 12 '20

Hello, I do not doubt about the benefits, but I have one question when I read at the results. If this is so fast why is it not the default test runner packaged with Angular ? Are there any hidden tradeoffs when using jest instead of Karma ?

Dylan Watson • Feb 12 '20

Hmm definitely a fair question. I'd say that the tradeoffs I've noticed relate to the fact that you are not running in a real browser (it uses jsdom).
This means that:

there is a risk that jsdom differs from your targeted browser
Debugging is much less visual, though there are tools to nicely print out the html.

From my perspective, despite this, the trade-off has been worth it so far for my team.

Gábor Soós • Mar 3 '20

Web Components support
no import/export support

although these things have been around a while, for example Web Components support in jsdom

Catalin Ciubotaru • Sep 5 '20

Awesome post! Thanks for that!
Helped me a lot come with a strategy on migrating to Jest.
I have an Angular application with a bit more than 3000 tests so that's gonna be interesting.
One small remark, in the jest.config.js file this is the correct value for setupFilesAfterEnv:

  setupFilesAfterEnv: ['<rootDir>/node_modules/jest-preset-angular/build/setup-jest.js'],

Also, if you have aliases, I also had to declare them here like this:

  moduleNameMapper: {
    '^@env(.*)$': '<rootDir>/environments$1',
    '^@core(.*)$': '<rootDir>/src/app/core$1',
    'business-logic': '<rootDir>/projects/business-logic/src',
    '^testing(.*)$': '<rootDir>/src/testing$1'
  }

Dylan Watson • Sep 16 '20

Nice! Yep you can reference that setup-jest directly.
If you need to have further customization, you can create your own setup.ts and import that into it.

Steven Brown • Dec 7 '19

Nice one! Well explained and would be a massive time saver for anyone else in the same situation!

Checking your maths... you start at 100% and the final speed is 1000% which makes it 900% faster, right? But still pretty fast. I guess. 😜

Dylan Watson • Dec 7 '19

Bahaha right you are!

L.E. Nichols • Jan 28 '20

Dylan,

You're awesome. I just used your guide to switch from Karma to Jest. I used Jest for the first time in another Angular project and loved how easy it was to create and manage tests. I couldn't wait to swap our karma tests out for it. I just updated angular in one of our projects then used this guide to switch over. Very clear and concise. Thanks a bunch!

Dylan Watson • Jan 29 '20

You're welcome! Glad it could be of use!

Nikolai Orekhov • May 31 '20

What am i doing wrong? :-) Angular 9 app + 400 tests approx, 8 core CPU.
Karma runs in ~1m 20sec
Jest runs in ~40sec.

That makes Jest two times faster but:

It runs multiple node instances and takes all my CPU power. Literally I can't run anything else. The reason i think it's forced to compile multiple times because of many node instances.
I can't run some of my tests in Jest because they depend on WebRTC and i can hardly mock it. There's a small number of failed tests in Jest that i need to review as well.

That doesn't look like an ultimate solution for everybody.

Dylan Watson • Jun 4 '20 • Edited

Hmm yep I think thats definitely fair. Due to the fact that Jest runs jsdom and not a real browser, there is definitely some things it won't be able to test properly, I suppose WebRTC is one of them.

I have seen some issues in the jest github repo recently about jest slowing down in recent versions.. perhaps its related?

If you are having issues with speed you could try running sequentially: jestjs.io/docs/en/troubleshooting#...

Gustavo Borges Michel • Oct 3 '20 • Edited

Hi Dylan, thank you for this guide. I used a while ago back when we were using Angular 9 and it made such a big difference on execution time for our tests. I have however updated to Angular 10 and updated Jest dependencies alongside and have found an odd behaviour: when you do not provide a stub for a service used in the component, the test hangs indefinitely. I have raised an issue with jest-preset-angular but I was wondering if you have seen this behaviour before:

Link for the repository with the issue: github.com/gustavobmichel/angular-...
Link for the issue on jest-preset-angular: github.com/thymikee/jest-preset-an...

Thanks in advance.

EDIT:

It turns out it has to do with the Jest 26, and I believe some version after 26.0.1, because when I performed the migration, my package-lock was stamped with 26.0.1 dependant versions and if you install Jest ^26.0.1 now, you end up with 26.4+. I created this other branch with the Jest version on 25 and the problem no longer happens.

github.com/gustavobmichel/angular-...

Dylan Watson • Aug 21 '21 • Edited

Sorry only just saw this but good to hear it sounds like you've figured out your issue. Speaking of jest versions, jest 27 is out now and seems to be ever so slightly faster (though I haven't run my tests enough to be sure how much faster yet!)

Daniel Kucal • Aug 5 '21

What about using JSDOM (like jest does) to run tests on karma and jasmine? Will it still go slower than jest?

Dylan Watson • Aug 8 '21

I've never tried but I'd love to hear if you try it!
That could certainly makes this whole process simpler if it has similar results!

David Jellesma • Aug 20 '21

This was incredibly helpful. Having many thousands of tests, we needed a way to gradually migrate to Jest, and this gave us what we need to get started.

Dylan Watson • Aug 21 '21

Excellent to hear! Glad it was useful. Did you find any quirks/differences that would be worth updating the article with?