« Previous Tutorial Next Tutorial »

Guys, we need to talk seriously about something: getting tested. No, not you, I mean your code. It needs tests run against it in order to more easily detect bugs, flaws, and other issues. You may have heard of this approach before, whether it’s running unit tests against existing code, or even practicing full Test-Driven Development, or TDD, in which you write your tests first before writing a single line of code.

Five minutes is not enough time to introduce you to a full TDD setup, but it’s a smart approach that can help you save a lot of time in the long run, not to mention encourages you to write better, cleaner code right from the start. James Sinclair, an excellent writer and developer, has a fantastic article that thoroughly details the benefits of TDD, and I recommend taking a look.

We’re going to use Facebook’s Jest testing language to write our tests, because a) it’s built specifically to play well with React and b) it also works well with JavaScript in general. I’ve used others in the past, including Jasmine and Mocha, and they’re fine too. If you have a preferred testing method, you should use what you like and are comfortable with. The syntax won’t be identical to what we’re writing here, but most of them are pretty similar.

First let’s install Jest. In your terminal or command prompt, CD to your musiclist directory and type:

yarn add jest@19.0.2 --dev

You may note we’ve never used --dev before. That’s because so far, every package we’ve added has been something that will be necessary for our app to run on production. However, we won’t be doing any testing on production, because if you’re rolling stuff to production that still needs testing, then you’ve defeated the point of having testing in the first place! By adding --dev, the package gets added to a separate part of package.json, and the dependencies in that section don’t get installed when you do a production build. There are lots of benefits to this, but one of them is obvious: not installing modules means a smaller file size and memory footprint for our application.

All right, we have Jest, which means we can write tests for our JavaScript code, but we’re also going to need to be able to test HTTP responses (basically, is our API actually responding correctly?), so we’ll need something to help with that. We’re going to use a module called SuperTest, which plays well with Jest and most other testing suites, to help out there. Type the following:

yarn add supertest@3.0.0 --dev

OK, cool. We’re going to write a simple API routine that gets all users and returns the result as JSON. Then we’re going to test and make sure it works (actually, in the spirit of TDD, we’ll write the test first, then write the routine to make it pass, just so you can see how that goes). The problem? We don’t have any users! Right now, our database is as bare as Old Mother Hubbard’s cupboard. Let’s finish out this tutorial by getting our first user in there – you! Then in the next tutorial, we’ll write our test and our code.

Make sure MongoDB is running (you can always refer to Five Minute React 6 – Installing MongoDB for help with this step), and then, in a separate terminal or command prompt, type:

mongo

to start up the MongoDB command line client. Now we want to make sure we’re using the right database, so type:

use musiclist

and hit enter. Now we’re going to create a user. Note that here, for the moment, this user has no password. This is obviously a terrible, bad, horrible idea. We will be implementing a full hashing system shortly, and at that time we will be storing an encrypted hash of the user's password. Right now we need some example data to test against, which is the only reason we’re doing it this way.

All right … the first thing we have to do is clear out the old test data we have in the DB from tutorial seven (alas, John Smith and Jane Doe, we must bid you adieu). Easiest way to do this is to type:

db.users.deleteMany({});

And hit enter. Be careful with that command! It will gleefully nuke all of your data in a collection (in this case, the users collection), and it doesn't ask for confirmation. You should get this response:

{ "acknowledged" : true, "deletedCount" : 2 }

Cool, your user collection is now empty. Type the following … Note: please replace YOUR FIRST NAME and YOUR LAST NAME with your actual first and last names. I used “Christopher” and “Buecheler” for mine:

db.users.insert({ "username": "administrator", firstName: "YOUR FIRST NAME", "lastName": "YOUR LAST NAME" });

Hit enter and you should get the following in return:

WriteResult({ "nInserted" : 1 })

But let’s just check and make sure by typing:

db.users.find().pretty()

Which should return our single user object. Yep, here's mine:

{
  "_id" : ObjectId("590b5a89ccdfaa7c64e19746"),
  "username" : "administrator",
  "firstName" : "Christopher",
  "lastName" : "Buecheler"
}

Note that MongoDB auto-generated an ID for us. That'll come in handy! All right, we’ve got everything we need to do a bit of coding and testing. We’re all set for this tutorial. Catch you in the next one!

« Previous Tutorial Next Tutorial »