Angular 9 Testing: Why We Chose Jasmine Over Jest and Mocha
There are many test frameworks available for testing JavaScript applications. Among them, Jest, Jasmine, and Mocha are the most popular frameworks.
When it comes to the Angular world, Jasmine is the recommended testing framework. Angular CLI comes by default with Jasmine and Karma as the test runner. It generates test files at component creation, collects unit tests, runs karma, and displays results on a web page.
However, you can also configure Jest and Mocha to test Angular Components. This article will explain why we chose Jasmine as our test framework over Jest and Mocha.
But before that why should we use a test framework in the first place?
Why Testing ?— Because Manual Testing won’t cut it
At the beginning of any web application, it could be easy to test everything manually. But gradually web applications become more complex and larger, the manual testing becomes more challenging and time-consuming.
The solution is to introduce Testing. Testing helps us to maintain good quality in the application while saving time on manual testing.
So we decided to use a Test framework. Now we needed to pick a suitable test framework.
Which Framework Suits us Better? — Simplicity, Support, Ease of Adoption
Jasmine, Mocha, and Jest are among the most popular JavaScript testing frameworks. All these testing frameworks are mature and it came down to our preferences and project requirements to choose the best one for us.
The main concerns for us were simplicity, support, documentation, and ease of adoption. Here are our findings of the above characteristics for these test frameworks.
Jasmine — The Default Choice of Angular
Jasmine is a Behavior-Driven Development(BDD) framework that provides a clean, obvious Syntax for writing test cases by making the process easy. It has a great community as well as impressive documentation that enables a smooth learning curve.
Karma is the default test runner for Angular. It includes the option to test the code on several browsers and even devices to ensure the smooth operation of the code on the supported platforms.
Drawbacks
- Low performance
- Unfriendly error logs
- Snapshot library integration is difficult
Snapshot library is used for Visual regression testing, which can be done by capturing screenshots. It works by recording a screenshot of the rendered component and later comparing it with components rendered in the future.
Jest — A Very Fast Testing Library!
Jest provides you with multiple layers on top of Jasmine and it is a very fast testing library that runs tests in parallel. It comes with minimum configuration setup, out of box mocking, and assertion support.
Drawbacks
- Snapshot testing with Jest is not so feasible for larger snapshots files
- Does not support testing on multiple browsers or devices
- The initial set up with Angular takes time due to the lack of good documentation
- Receives numerous error messages for the same error
Mocha — Highly Flexible Framework
Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple. Mocha tests run serially, allowing for flexible and accurate reporting while mapping uncaught exceptions to the correct test cases.
Mocha is a very flexible framework that gives the freedom to choose assertion, mocking libraries based on our requirements, and provides configurable test reporters.
Drawbacks
- It takes time to find good documentation
- Time-consuming configuration process due to decision makings on assertion and mock libraries
These test frameworks support component testing, which made them eligible to become the test framework of our angular application.
Tip: Share your reusable components between projects using Bit (Github). Bit makes it simple to share, document, and organize independent components from any project.
Use it to maximize code reuse, collaborate on independent components, and build apps that scale.
Bit supports Node, TypeScript, React, Vue, Angular, and more.
Comparison between Jasmin, Jest, and Mocha
However, we did further research into these frameworks. Here are our findings in a tabular format.
Finally, We Chose Jasmine for Angular Component Testing
It was a difficult task to pick the most suitable framework for our project. In the end, we decided to go with Jasmine considering its default integration with Angular.
For the rest of this article, I’ll explain how we used Jasmine with Angular?
How did we use Jasmine with Angular?
Let’s look at an example code written for testing a basic component with Jasmine.
The following count component has a button that shows a label with a count. When the button is clicked, it emits an event to the parent component for page refresh.
count.component.ts
count.component.html
Now let’s take a look at the test class written for the above component.
count.component.spec.ts
Find the full source code at https://github.com/spiyushani/jasmine-demo
I will briefly go through the functions used in the example. You can find more about angular testing at https://angular.io/guide/testing.
describe(description: string, function) — Test suite which defines a title/description and takes specs as arguments.
beforeEach(function, timeout?: number) — Runs the function passed as an argument before running each spec.
fixture — Test environment/utility for a test.
it(expectation: string, function, timeout?: number) — Defines a single spec with required expectation and a function with logic and assertions.
expect(function), expect(actual) — Creates an expectation for a spec taking a spy function or an object or a list as a parameter. Normally expect function is used alongside a matcher function like toBeTruthy(), toBe(), toEqual() which returns a boolean when combined.
Tip: Try to avoid using TestBed if you’re not doing template testing. That will help to increase performance because TestBed is heavy and complex and therefore it takes time to set up and process.
Angular Ivy Version 9 — Testing Improvements
Angular Ivy version 9 comes with significant improvements such as AOT (Ahead of Time) compilation and Component harness. How does it affect testing?
AOT — Improving Testing Performance
AOT brings two major testing improvements, as listed below.
1. Performance improvements
Angular older versions are known for low testing performance compared to other frameworks. Earlier, when using “TestBed” Angular recompiled all the components between each test case, which was a major performance issue. Now “TestBed” caches the compiled declarations by speeding up the testing process.
2. Minimizing the gap between testing and prod environment
Ivy enables AOT compilation forA testing by making it closer to what’s served in prod. That enables fast and more stable tests.
Component Harness — Testing as a User
Component Harness is a page object framework for components shared between unit tests and e2e tests. It facilitates testing as a user, closer to the actual usage of a web application by hiding the implementation details. Angular material supports component harness from version 9.
Conclusion
We were looking for a better test framework for our angular application. After considering things, we narrowed down our search to Jasmine and Jest.
Finally, we leaned towards Jasmine due to the following reasons
- The default Jasmine support in Angular
- Good documentation and community that enables a smooth learning curve.
- Angular 9 has improved testing performance with its new features like AOT and Component Harness
- Jasmine tests run on a real browser, unlike Jest, which helps mitigates some of the risks.
- Migrating from Jasmine to Jest would be easier if required in the future.
I hope that this will be helpful for you to choose a testing framework for Angular. Thanks for reading, and if you have any questions, let me know in the comment section below. 😊
