Lesson Monday

There are many JavaScript testing frameworks. Some of the most popular include Jest, Jasmine and Mocha. These libraries have many similarities, and after learning one, you can quickly learn others. We use Jest because it is the testing framework of choice for React. It's also a popular testing framework for JavaScript in general.

We'll continue building out our shape tracker application. Here's the project so far:


Example GitHub Repo for Shape Tracker

At this point, our application has a fully functioning environment along with user interface logic. However, there's hardly any business logic other than a constructor and a Triangle.prototype.checkType that returns "I can't answer that yet!". Now we're ready to use Jest and TDD to build out our business logic.

Installation and Setup

First, we'll need to add Jest to our project:

npm install [email protected] --save-dev

Once again, we are pinning the version so it will play nicely with our configuration. This is a development dependency because testing is part of the development process.

Next, we need to update our npm script for tests in our package.json manifest:

"scripts": {
    "build": "webpack --mode development",
    "start": "npm run build; webpack-dev-server --open --mode development",
    "lint": "eslint src/*.js",
    "test": "jest"
}

At this point, we'll get an error if we run $ npm run test. That's because we haven't added any tests yet.

Next, let's add a directory called __tests__ to the root directory of our project. It is common convention to add __ at the beginning and end of __tests__ with Jest. We will store all our test files in this directory. For now, we just need one: triangle.test.js. We follow another common naming convention here, which looks like this:

<!-- This is pseudocode. -->

nameOfFileToBeTested.test.js

In other words, the test file name should match the name of the file that has code we are testing - the difference in the file naming structure is that we add .test to the name as well.

Now if we run our tests, Jest will automatically look in triangle.test.js:

 FAIL  __tests__/triangle.test.js
  ‚óŹ Test suite failed to run

    Your test suite must contain at least one test.

      at node_modules/@jest/core/build/TestScheduler.js:242:24
      at asyncGeneratorStep (node_modules/@jest/core/build/TestScheduler.js:131:24)
      at _next (node_modules/@jest/core/build/TestScheduler.js:151:9)
      at node_modules/@jest/core/build/TestScheduler.js:156:7
      at node_modules/@jest/core/build/TestScheduler.js:148:12
      at onResult (node_modules/@jest/core/build/TestScheduler.js:271:25)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.195s

As you might guess, this is a bad fail because we aren't testing anything yet. Jest states the following: "Your test suite must contain at least one test."

Note that we can also run jest directly in the terminal to run our tests, but only if we install Jest globally with the following command: npm install jest --global. Since we will use npm test to run our tests, it's not necessary to do this.

We are almost ready to start writing our tests. However, before we do, we'll need to set up another tool called Babel. We'll do that in the next lesson.

Lesson 26 of 48
Last updated more than 3 months ago.