Why use jest over karma for Angular testing?
When I first started angular development I had no idea about test-driven development until a client that I am working with asked me to use TDD. And thankfully the client was a react developer and suggest us to use JEST testing platform instead of angular built-in KARMA test runner. Initially, I was like ‘wait why JEST when we already have KARMA for testing embedded in angular plus JEST is created for ReactJs?’
Then I did some research about the pros and cons of JEST vs KARMA and here is what I’ve found out.
JEST is built on top of Jasmine. Wait what is Jasmine?
According to the Jasmine documentation “Jasmine is a behaviour-driven development framework for testing. with zero dependencies and do not require a DOM”. Some cool features Jasmine provides for testing includes describe, beforeEach, afterEach and it. Plus we can check if a certain behaviour is working as expected using expect, equal and toBe. See Jasmine documentation.
Jasmine also provides mocking. Which helps to isolate your code from the outside API calls and other connections. Which is really the point of Unit testings.
Because Jest is a platform built on top of Jasmine, it delivers all the features Jasmine API provides out of the box, plus the functionalities of KARMA. Another important thing to note is Jest is created by Facebook so they use it to test all of their javaScript libraries and frameworks including React. Therefor If you have a React background you surely know much more about Jest than I do.😁
What is KARMA
Karma is not a framework nor a platform. It is a test runner built by the angularJS team to make TDD seamless in Angular development. Karma runs in its own browser environment which means Karma opens up the browser in order to run the tests. Karma runs the specified test files in the karma.conf.ts in order to run the relevant testings. Checkout Karma repository.
So why jest is better than KARMA.
Jest is 2 to 3 times faster than karma testing
The reason is karma uses a real browser for running the tests and jest uses the favourite command line to run its tests. The tests that took 4–5 minutes on KARMA only takes about 1–2 minutes on jest. This is particularly important when using CI-CD ( Continous Integration/Continous Delivery). Since the tests are faster the execution time of CI-CD will also reduce.
Jest snapshots testing
When first running the test we can add .toMatchSnapshot() to the component. Then Jest creates a snapshot of the component and stores it inside a folder. And then whenever we run the tests it again generates snapshots for all the components and matches it with the previously generated snapshot. This is a great feature because this ensures that our UI does not change unexpectedly. checkout Jest Snapshot documentations.
Better for Continous Integration
If you are using something like Travis-ci for Continous integration you will have to install a browser in the environment in order to run the tests. This sometimes leads to problems plus because Jest runs jsdom for testing the execution time reduces greatly and CI becomes much better.
Fewer configurations
In jest documentation, it says that “One of Jest’s philosophies is to provide an integrated, “zero-configuration” experience.” This is mostly true because out-of-the-box jest works seamlessly with most Javascript and typeScript applications including Angular. If you require more configurations you can sure do using a Jest config file. KARMA, on the other hand, requires far more configurations including webpacks, launcher configurations, and configurations for CI.
Wait so, aren’t there any drawbacks of using Jest?
The only drawbacks in my opinion are,
- Since Jest does not run on a real browser (uses jsdom ) there is a potential risk that jsdom differs from your targetted browser.
- The debugging is less visual than in KARMA.
Other than the above I have not found many drawbacks of using Jest rather than using KARMA. You can find more information about KARMA, Jest and conduct your own research.
Since you are here, I hope you enjoyed the article. By the way, if you want to hire a quality freelancer for any types of assistance with web development just let me know.
Fiverr: https://www.fiverr.com/share/Wk1E0R
email: charith.r@icloud.com
