JavaScript TDD using Jest

Suvodeep
5 min readAug 25, 2020

Overview: Test Driven Development(TDD) = Test First Development(TFD) + refactoring

https://bit.ly/3j9IKoV

Let us first start with the basic concepts.

TFD -In the context of Extreme Programming(XP), to fall in line with the agile software development guidelines and to follow the best practices, our goal should be specification not validation. Simply put we need to think through the design or requirements before getting down to write actual code. Taking this point into account TDD is a programming technique.

Simply put, the steps into TDD are as follows:

  1. Add a quick test — Basically just enough code to fail.
  2. Run the test — It should fail.
  3. Write functional code so as to pass the test.
  4. Finally, run the test to check whether it has passed.
  5. Re-factor until tests PASS to continue with further development.

So, as you can see TDD incorporates TFD and refactoring.

The idea behind TDD is instead of writing functional code first and then the testing code if at all, you first write the test code before the functional code. For a programmer taking the TDD approach, refuses to write any functional code unless there is a corresponding test that defines that particular functionality, is present and that FAILS because the particular function defining that feature/functionality is not yet present. Once the test is in place, only then shall we write our functional code to ensure the test passes. This is similar to PAIR PROGRAMMING, an agile software development technique, in which the pair helps you to stay on track.

It seems to add work but in the long run it helps you to do more efficient development and prevent future errors. If you look at the big picture, it will lessen your work load not add to it !

To make things clear, let's do it in practice.

I will be using Jest, a JavaScript testing framework and vs code as my editor.

Step 1: Setting up the environment.

You need Node.js installed to use the npm package installer. In your vscode terminal enter the following commands:

>npm init -y (This will stay with the defaults and create a package.json file)

>npm i -D jest (This will install JEST as a Dependency)

Once the installation is complete we need to go to the package.json file and under scripts, we change the value of “test” to “jest”.

fig 1. package.json

Now we create 2 files -
1. app.js
2. app.test.js

Step 2: We start with the app.test.js

In this example, I will be working with an array of names.
Our goal which may contain one or more related tests, based on an idea of what our function should do, will be contained in the describe() method:

  1. Remove names starting with ‘S’.
  2. Should not remove other names
  3. Should mind the Case.

Based on the above-mentioned criteria we start to write our test cases using matchers. Always keep the documentation handy & refer to it as required !!

fig 2. app.test.js

So finally we will check, actual output = expected output based on tests ??

Step 3: Run the test. > npm test

fig 3. npm test

You should see all 3 tests failing as shown in fig 3.

Step 4: Now write the functional code to make the tests pass!

fig 4. functional code

Step 5: Now run the tests again using- > npm test

fig 5. npm test

We see 1 test passed, 2 failed as shown in fig 5.

Step 6: We write code to pass the tests as follows-

fig 6. add toLowerCase()
fig 7. Run all test suites.

Now we see that all the tests have passed. That concludes out TFD approach.

Until this point, we have been following the Test First Development(TFD) but as we see there is scope for a leaner and cleaner code and this is where TDD comes to play.
At this point, if we modify the code because we may have a better solution to a new idea, we know that if we break something the tests will fail. This is exactly what TDD helps us with. We need to refactor our functional code to make our tests pass as well as get a cleaner code that meets the objectives.
If you recollect, at the beginning of this blog I mentioned :
TDD = TFD + refactoring.
Hence, we are going to refactor our functional code so as to finish the final* step in TDD.

***Note: Final as long as refactoring is not required. Keep refactoring and testing as long tests pass and we have the best possible solution with clean code fulfilling our objective/s.

Step 7: Refactoring our functional code:

fig 8. Refactoring to make changes

Running the tests after refactoring doesn’t give us the expected output since all the tests have failed.

So now we need to check out code to refactor it in such a way that our tests pass again!

fig 9. refactored code with passing tests

Now if we run our tests, they pass. Hence, we can already see the power of TDD. We don’t need to manually test our function because we have already written tests that do exactly that, before everything else. The more robust we make each of the test cases, the more efficient our code will be. We reduced the size of our function and we know it works because all our tests have passed.

So, this is Test Driven Development and the process of refactoring with our tests which produces more reliable code. Happy development !

References:

  1. https://tinyurl.com/y98wgy6l
  2. https://tinyurl.com/yyfjdaca
  3. https://tinyurl.com/yypf2xx5

--

--