JavaScript Testing Fundamentals: Hello world unit test with Mocha (in ES6)

Trevor Miller
InstructorTrevor Miller

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

Mocha is a testing framework that provides structure for unit tests. In this lesson, we will be setting up Mocha with npm and npm scripts, writing a "Hello World" unit test, then writing the code to make the test pass (as an example of Test Driven Development (TDD), with the "red-green-refactor" workflow).

[00:00] Mocha is a framework for writing unit tests. To install it, in your command line, run MPM-install Mocha--SaveDev. We can see that we now have Mocha listed in our dev dependencies in our package.JSON.

[00:14] Now that we have Mocha installed, let's write our first unit test. We'll create a test folder inside of our root, and inside of that test folder, we'll create a HelloWorld.JS file.

[00:28] Now that we have this first test file created, I'm going to create some unit tests for some code that we've not yet written. We'll reference the module names of code that we are planning on writing.

[00:39] This is a common practice in testing, where you create a test for something that you know you're going to write, and you tell it exactly what you want your code to do. Then, you make that test fail, then, you go back and create the code to make that test pass.

[00:55] Let's go through that process with this HelloWorld file here. First, we'll write the test, and to do that, we'll use Mocha's "describe" lock. The common pattern is to have your module name here, we'll call that "HelloWorld," and then, we'll pass that a function.

[01:14] Now, inside of this function, we're going to provide another described block, which normally, you would have a test for a property or a method here. We will be creating it later in an init method on the HelloWorld module. And so, the hashtag here is just a common convention to say that the init method belongs to the HelloWorld module.

[01:36] Then, we'll give this described block a function. Inside of that function, we'll create an init block, which is provided by Mocha, and we are going to describe what the init method should do. The init method should return, "Hello World." We'll give that a function, as well.

[01:56] Inside of this ID block, this is where we'll write our assertions. Assertions do not come with Mocha out of the box, we're going to import assert from the built-in assert module that comes with node and MPM. Now, going back to the ID block, let's use that by saying, "Assert."

[02:16] Then, we'll use the equal method, and there's a lot of methods you can use on assert, and we'll get into those later in the series. But this is a really common one, and it's great for starting out. We're going to give it our actual code that we're going to run. We'll be creating the init method on the HelloWorld module later. When we run that, we're going to expect that it will return the string, "Hello World."

[02:42] Now that we've written this test, let's actually run it to make it fail, and then, we'll write the code to make it pass. To run our test, there's a lot of options you can use. You can use goal per grunt, or webpack, but in this case, I'm going to use MPM scripts.

[02:58] Going back to my package.JSON, I've got my scripts object. Inside of that, I'm going to add a new script called, "Test," and for the test script, we're going to have it run the Mocha command, which is provided when we did our MPM install.

[03:16] Mocha, by default, will look inside of this test folder that we've created for any test, and it will run those tests. Inside of our MPM script here, there's a lot of options that we can pass with the Mocha command, and one that we're going to need for this project, because we're using ECMAScript 6, is the Babel transpiler option.

[03:36] I'm using Babel, which is an ECMAScript 6 transpiler, and if you take a look at the documentation, you can see under the Mocha option that we first need to install Babel, which I've done here. You can see, it's in my dev dependencies.

[03:55] The next step is, in our test command, we need to pass this compiler flag and tell it to use the Babel compiler. That's what we're going to do, I'll copy and paste this command here.

[04:09] Now, we're ready to run our test, in our command line, we can use the MPM script, which is going to execute our Mocha test that we just created and run for all the files in our test directory.

[04:22] Let’s run that. Now, we can see that we have zero passing tests and one failing test. Another thing I'd like to point out is that our test is very readable. It's the module name, and then the members of that module, and then the tests themselves. It reads as a sentence, "Hello World, init should return Hello World."

[04:43] This becomes increasingly important as you have more and more tests in your project, it's really easy to see the specific functionality you expect from each piece of each module. We've written a test, our test is failing, now, let's make our test pass by writing the code that's needed.

[04:59] I'm going to create a new folder called, "source," and a scripts folder inside of that, which will contain our ECMAScript 6 code that will compile down to ECMAScript 5. Instead of the scripts folder, let's create a HelloWorld file to match our test. Inside of this, I'm going to create an object called, "Hello World."

[05:25] We will export that object as the default export. Now, let's create our init method. We'll say init, and then, if we go back to our tests, we were expecting that calling init will return the string, "Hello World." I'm going to copy that over, and then we'll just have this method return that string.

[05:48] Now, if we go back to our test, let's import our module. Import HelloWorld from, it looks like we are up one directory, and down into source, scripts, HelloWorld. Now, let's go back to our command line. I'm going to clear this out and run MPM Test again, and now, we have one passing test.