Learning To Write Your Own Test Cases Part 2 - Using Jest

First of all, credit goes to Flavio Copes for guiding me through the setup, specifically for VSCode. The Official Jest Docs were also very helpful. Both had great examples on how to write your first tests as well!

A Quick Note About Snapshot Testing:

One of Jest's main selling points is being ready out of the box to perform snapshot testing. For those of you who don't know what that is, imagine one of those 'Find the differences in these two pictures' games. Snapshot testing is basically the process of testing your app by comparing those two pictures. If the pictures aren't identical, the test fails. Considering I began this project with the intent of learning to write my own curriculum at some point, I decided featuring snapshot testing was not the best process for me, so I will not be covering it here. If you want to learn more about snapshot testing, check out Kent C Dodds blog post about it.

Getting Started with Jest

Jest is very easy to setup, much less intimidating than the Mocha tutorials and blogs make Mocha seem. The ease of set up has to do with Jest coming ready out of the box and not having to install any additional assertion libraries like Chai that Mocha would require of you.

1. Create new GitHub repo (w/o LICENSE if you want to add your own later)
2. Clone the GitHub repo to your machine
3. npm install --save-dev jest
4. Add .gitignore (important to research what files you will want to ignore!)
5. Add LICENSE (if not created w/ GitHub repo)
6. Add README.md (Always the most crucial part of any project!)
7. Add index.js (where solution will go)
8. Add index.test.js (where tests will be written)
9. Connect your index.js & index.test.js by adding module.exports = {myFunc1, myFunc2, etc} to the index.js
10. Finish connecting your index.js & index.test.js by adding const {myFunc1, myFunc2, etc} = require('./index'); to your index.test.js

Note 1: Jest is not Github dependent, and you can skip that part (as well as the License, Readme, & .gitignore) and start at #3 in a new project if you just want to practice without saving.

Note 2: By step 9+10 you should have some kind of idea of what you want to specifically test, but I will provide a solid starter test for you below.

Writing Basic Test Cases in Jest

And here we are, the part we've been working towards. How to actually write a damn test using Jest! Turns out, the syntax in this part isn't all that different from my experiences reading Mocha tests in Flatiron. So without further ado, here is a VERY simple sample test case for a function called add() below:

describe('add', () => {
        test('add() is a function that returns the sum of 2 arguments', () => {
         expect(add(1, 2)).toBe(3)
    })

So before we clap our hands in triumph here, let us unpack what this means a bit.

Describe: describe() is a function that creates a block to group together several related tests. In the add() function tested above, we only have one test, so it may not seem necessary to use describe(), but the benefit for us will be a neatly organized terminal that separates our add() test block from any others we may make. In my experience describe() is the standard even with single tests.

Test: The test() function takes in 2 arguments. The first is a string to describe in more detail what you expect from the function being described. The second is another function that details the specific conditions of what needs to be done to pass this test.

Expect: expect() will be used in every test you write to test a value. This basic expect() function takes in the argument of the add() function, complete with its own sample arguments and uses toBe() to define the expected value.

Note: While this sample keeps it simple, it is often good practice to have multiple expect() conditions to help keep things going along a more orderly path and less prone to unintended or quirky solutions.

To A Job Well Started!

Ok, NOW you clap your hands in triumph! We've just written our first test using Jest! Now let's list the pro's and con's of Jest that we've witnessed while working on this:

Pros

Jest was built with developer convenience in mind, and it delivers 100%.

1. Jest is both easily accessible and easy to set up. Works very close to 100% straight out the box.
2. Snapshot testing, though not used here, is an added benefit and preferred way of testing for some developers.
3. Test cases are ES6 compatible. You'll see why this is a pro in the next part when I go over Mocha.

Cons

While Jest has cons, it is worth noting for purposes of this project (solo effort, foundational lessons) neither of Jest's biggest weaknesses mattered at all to me, but here they are if they matter to you.

1. Jest, being newer, has fewer libraries, support and isn't as widespread as Mocha. As such it may not be AS suitable for some people or groups, or as capable in certain situations today, but I imagine this will be remedied in the not too distant future (Jest is authored by Facebook after all).

In Conclusion

Jest is an awesome tool for developers of all levels, especially novice-intermediate level developers who don't want to spend as much time making sure they are doing things correctly. It is a HUGE plus if you have never written tests before to just be able to start busting out test cases rather than taking extra steps at install. For the sake of my goals, I am glad my first experience in this particular venture was with Jest.

Thank you for reading Part II! But what will happen when I get my hands on the beast that is Mocha? Part III next week!

If you want to check out the entire code for this project, check out the GitHub repo which includes a solution branch so you can validate these tests work.