EU Cookie Consent

To use this Website we are using Cookies and collecting some Data. To be compliant with the EU GDPR we give you to choose if you allow us to use certain Cookies and to collect some Data.

Essential Data

The Essential Data is needed to run the Site you are visiting technically. You can not deactivate them.

Testing

Unit testing JavaScript with Jasmine

Daniel Verner -

Hmm, JavaScript…it is that messy code that runs in the browser and contains a lot of $() function calls, right? NO. At least it shouldn’t be. JavaScript is a full-featured language and all good development practices can be and should be used in JavaScript development including but not limited to object-oriented architecture, design patterns, and automated tests (unit tests, integration tests).

In this article, I’m going to show how to set up Jasmine for unit testing in JavaScript. To be more precise Jasmine is a behavior-driven development framework, not test-driven development, but the essentials and the goal are the same: the more tests you have for your code the better.

Installation
Let’s see how to install and configure Jasmine:
Install with npm:
npm install --save-dev jasmine
Initialize:
node node_modules/jasmine/bin/jasmine init
Set jasmine as your test script in your package.json:
"scripts": { "test": "jasmine" }
Use npm to run the tests:
npm test
If you’d prefer to see the test results in the browser you can install the standalone version of the Jasmine, find the releases page here: https://github.com/jasmine/jasmine/releases.
Download the package, unzip, and add the following to the specs.html:
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-{#.#.#}/jasmine_favicon.png"
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-{#.#.#}/jasmine.css"> 
<script type="text/javascript" src="jasmine/lib/jasmine-{#.#.#}/jasmine.js"></script> 
<script type="text/javascript" src="jasmine/lib/jasmine-{#.#.#}/jasmine-html.js"></script> 
<script type="text/javascript" src="jasmine/lib/jasmine-{#.#.#}/boot.js"></script>
Writing the first test
Our first example test looks like this:
describe("Basic suite", function() {
   it("ensures jasmine is working", function() {
       expect(true).toBe(true);
   });
});
It seems like it doesn’t test anything, but if it runs successfully, it means you’ve configured Jasmine correctly. We can see three main parts of the above test:

  • The describe function groups related test cases into test suites.
  • The it function represents a test case. The description should describe the desired behavior of the functionality to be tested.
  • The expected function contains the assertions for the test.
You can find more examples and detailed explanation on the Jasmine tutorials page here: https://jasmine.github.io/tutorials/your_first_suite

Quite easy, isn’t it? You might think writing tests is boring, time-consuming, and even not necessary. The deadlines are always tight, who has time to write tests? Yes, that is true, but having tests allows you to confidently make changes/refactor your code without breaking the existing functionality, and this can save you a lot of debugging time later.

In the upcoming blog posts, I’ll show some tips and tricks about mocking input data for unit tests (especially for a built-in objects like DateTime or geolocation).

Agree? Disagree? Please let me know in the comments section below.

Tags: bdd · jasmin · testing

Want products news and updates?

Sign up for our newsletter to stay up to date.

We care about the protection of your data. Read our Privacy Policy.

Impressions from our Team

  • Another day another #mandarinacakeshop 🎂 😀 - #

  • Happy Birthday Ognjen! And marry Christmas to all other 🎄#notacakeshop - #

  • #Office #Garden - #

  • #workhard - #

  • #belgrade #skyline - #

  • #happybirthday Phil :) - #

  • #happybirthday Stefan 🥂 - #

  • #happybirthday Lidija 🍾 - #

  • Say hi 👋 to our newest team member ☕️ - #

  • #bithday #cake 😻 - #

  • #stayathome #homeoffice #42coders - #

  • #stayathome #homeoffice #42coders #starwars :) - #

  • #stayathome #homeoffice #42coders - #

  • We had a really nice time with #laracononline #laravel - #

  • Happy Birthday 🎂 Miloš - #

  • Happy Birthday 🎂Nikola - #

  • #42coders #christmas #dinner what a nice evening :) - #

  • Happy Birthday 🎂 Ognjen - #

  • Wish you all a merry Christmas 🎄🎁 - #

  • #happybirthday Luka! - #

© 2021 42coders All rights reserved.