How to set up the simplest scalable 'hello world' mocha-chai test ever

Hello, everyone! I'm sorry it's been such a long time since the last post - while trying to move (again) I've been busy working on a number of projects that are beginning to take off. Today, though, we're going to be spending a few minutes getting a really simple test working on your project using Mocha and Chai.

The goal of this little tutorial is to keep it as simple as possible while giving it the ability to scale with your app. We'll set up a test-helper file that's going to aggregate all of your tests, and then we'll write our first test to get it started working out bugs!

I'll be assuming that you have your own Node.js app ready to test. If you don't, you can jump on into this tutorial and get one together in no time.

Install Mocha and Chai

As always, start by installing the dependencies we're going to need and save them to your dev dependencies in your package.json file:

npm install --save-dev mocha chai  

Create the test-helper

Next, you want to make a directory in your root app file called 'tests' and then create two files named test-helper.js and tests.js inside of it. Your file structure should look like this:

my_app  
   - tests
      - test-helper.js
      - tests.js
   - index.js
   - package.json
   - etc...

Open up your test-helper.js file and we'll start adding some pieces to it. This file is what's going to aggregate all of our tests into one location so that our application can easily grow in complexity over time.

Start by setting the NODE_ENV='test' and then bringing in the required functions:

//set the test environment
process.env.NODE_ENV = 'test';

//imports
global.chai = require('chai');  
global.assert = chai.assert;  
global.expect = chai.expect;

chai.should();  
chai.config.includeStack = true;  

Now let's put together the little helper function that's going to bring in our tests:

//import tests
function importTest(name, path) {  
  describe(name, function() {
    require(path);
  });
};

describe('set up and run the hello world test', () => {  
  importTest('tests', './tests');
});

Here we see our first use of describe from Mocha. Describe allows us to define what the tests are going to be doing in this instance, then it executes the function that will call in our test. Inside our describe function we call the function we created, importTest and pass in the name of our tests file, and it's location. Using this method we can import multiple files of tests to keep everything organized and broken into components.

Write a simple hello world test

Now that we have our helper, let's put together a real simple test. Open up the test.js file we created earlier and let's import the necessary items.

"use strict";

//test login
describe('#hello world', function() {  
  it('should return hello world', function() {
    let test = 'hello world';
    test.should.eql('hello world');
  });
});

With each of our tests we want to start by describing the test, so in the first parameter, you can give your test an easy name to recognize. Then, we can write the test itself. Sorry to disappoint, but writing big and complex tests is a topic for another day.

Lastly, we do need to add a little quality of life script to our package.json file:

...
  "scripts": {
    "dev": "nodemon index.js",
    "test": "mocha tests --timeout 10000"
  }
...

Once this is in we are all set to start running our test!

The importance of testing cannot be understated. In a lot of instances, single/independent developers, and sometimes entire teams, get tunnel vision looking at only features and the end of the sprint they're on. Don't let that happen to your project! Get in there and start your testing - because it's only going to get more difficult as your app get's bigger!

Thanks for reading today's rather short article. I'm looking forward to talking with you guys so please leave your comments below! Give me some tips if you have them, point out my bugs, or ask your own questions. Either way, we'll both get better from the knowledge and experience of others!

David Meents

React.js developer, web designer, and business owner.

Subscribe to David Meents

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus