Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Unit Testing in JavaScript
  • Introduction
  • Setup
  • Syntax
  • Exercises
  • React and ExpressJS testing
  1. 4: Capstone

4.1: Testing

Learning Objectives

  1. Programmatic software testing is a crucial feature of software development that all tech companies practice

  2. Programmatic testing allows us to quickly verify we did not break existing features when building new ones

  3. Programmatic testing involves writing code to test our code

  4. There are 3 general categories of programmatic tests: unit tests, integration tests and end-to-end tests

Introduction

Every mature software product has software tests to verify intended functionality. Without software tests, every time we write a new feature we might not know whether we broke an existing one. This lack of clarity can cause stress, especially when existing features are crucial to user experiences. Engineers working on early-stage products often omit writing tests because their product requirements change often, but once product requirements start to stabilise and mature, testing is necessary to maintain engineer sanity.

Software tests are code written using 1 or more test frameworks that programatically verify that functions, groups of functions, or entire features produce expected output when provided with specific input. Engineers typically merge these tests to repos at the same time they merge the tested feature, guaranteeing tests for every feature in the product. Some engineers prefer to write tests before writing the feature (aka test-driven development), and others prefer to write tests after or while writing the feature (more common).

There are 3 most common categories of software tests: unit tests, integration tests and end-to-end tests. Unit tests typically test individual functions, especially ones with non-trivial logic such as calculations. Integration tests typically test groups of functions, for example a function that triggers functionality in multiple helper functions. End-to-end tests typically test entire features by using frameworks to simulate user actions, and verifying that those actions cause the desired database and UI changes in the app. Unit tests are the simplest and most common form of testing, and engineers often omit end-to-end testing until their product matures.

There is no such thing as perfect testing, but hopefully with mindful testing we can eliminate bugs that would otherwise have happened unnoticed without tests.

Unit Testing in JavaScript

Introduction

For illustration purposes we will demonstrate unit testing in JavaScript. For Bootcamp projects and take-home interview assignments, it should be sufficient to write unit tests on our functions like this one.

Setup

Before we wrote tests, we created a module to test. In this case, we have created a basic utils module in utils.js that exports an add function that adds 2 numbers. Trivial, but you can imagine more complex functions such as those we implemented for games like Blackjack.

utils.js
const add = (a, b) => {
  return a + b;
};

module.exports = {
  add,
};

Next we set up our test framework.

  1. We installed Mocha and Chai libraries as development dependencies. Development dependencies are only used during development and do not need to be included in the final app package shipped to users, helping make the app package smaller.

    npm i --save-dev mocha chai

  2. We added a script in package.json that allows us to run tests by running npm test.

    "test": "mocha"

  3. We added the Mocha env setting to .eslintrc.js for ESLint to support Mocha syntax.

    mocha: true,

  4. We created a folder test in the root of the repo to store our test files. By default Mocha looks for a folder called test to find tests.

    mkdir test

At this point we created our test file and wrote our tests in it. We will dissect the test code below.

test/utils.js
const { expect } = require("chai");
const { add } = require("../utils.js");

describe("Utils", () => {
  describe("Add", () => {
    it("Adds 2 of the same number", () => {
      const result = add(1, 1);
      expect(result).to.equal(2);
    });

    it("Adds 2 different numbers", () => {
      const result = add(1, 2);
      expect(result).to.equal(3);
    });

    it("Adds a positive and a negative number", () => {
      const result = add(1, -1);
      expect(result).to.equal(0);
    });

    it("Adds 2 negative numbers", () => {
      const result = add(-1, -1);
      expect(result).to.equal(-2);
    });
  });
});

Now if we run npm test from our repo in the command line we should get the following output.

unit-test-bootcamp % npm test

> unit-test-bootcamp@1.0.0 test
> mocha

  Utils
    Add
      ✔ Adds 2 of the same number
      ✔ Adds 2 different numbers
      ✔ Adds a positive and a negative number
      ✔ Adds 2 negative numbers

  4 passing (4ms)

unit-test-bootcamp % 

Syntax

expect

At the top of our test file test/utils.js we imported the expect module from Chai. expect is an "assertion" syntax that helps us "assert" that our code meets expectations.

Observe in each of the it blocks (we explain it below) how we use expect to verify expected values using a pseudo-English syntax.

describe

describe is a syntax for grouping and categorising tests. Notice each describe block accepts a string followed by a function, where the string is the description of the group of tests contained within the function.

We can nest describe blocks within each other to group different types of tests. For example, each function that we test can be in its own nested describe block. In our case, our add function has its own nested describe block, and we could add another nested describe block for subtract function tests if we ever added a subtract function to utils.

Notice Mocha logs the description for each describe block in the console when running tests.

it

it declares an individual test. Like describe, it accepts a string followed by a function, where the string is the test description and the function is the test logic. Mocha engineers chose it as the function name so that test descriptions could read more like plain English, e.g. it("Adds 2 of the same number", () => { ... });

If you put an x infront of any it or describe your test will be skipped.

Exercises

  1. Run the tests in Rocket's repo and review output

  2. Break a test on purpose to see what a failing test looks like, e.g. by changing the expected result

  3. Add a multiply function to utils and write tests for it

React and ExpressJS testing

Previous4: CapstoneNext4.1.1: Frontend React Testing

and are common test frameworks used together to test JavaScript backends. Mocha is the framework that enables us to run tests. It provides functions in which we can write tests, and a test runner script we can use to run all of a subset of our tests. Chai is an "assertion framework" that allows us to verify values in our code match what we expect, values such as the return value of the function we are testing. Jest is a more common test framework used for frontends that has the same functionality as Mocha and Chai combined.

Fork and clone Rocket's to follow along. We have implemented a simple unit test example using Rocket's Express app template.

provides a list of assertions we can perform with expect.

If you would like to explore testing in your React frontend or ExpressJs backend please read sections and .

🏞️
Mocha
Chai
unit-test-bootcamp repo
Chai's API reference
4.1.1
4.1.2