Lesson Outline

Jest and Cypress

We've established that we need to write tests before we write code when developing an application if we are adhering to the principles of Test Driven Development. In the case of unit tests, we could just write plain old Javascript to test if our code is doing what we want it to do, but that would be quite messy and hard to manage.

In this lesson, we are going to discuss the frameworks that we will be using to create unit tests and E2E tests throughout this module.

Creating Unit Tests with Jest

We will be using Jest to unit test our application. Jest is a framework for writing tests and if you are at all familiar with Jasmine (another testing framework) you might notice that Jest is quite similar (almost all Jasmine syntax is valid in Jest). The code you will write with Jest is reasonably simple, and is primarily composed of three key functions: describe(), it(), and expect().

Let's take a look at a Jest test suite right away for context.

describe('My Service', () => {
  it('should correctly add numbers', () => {
    const result = myService.myAddNumbersFunction(1, 1);

    expect(result).toBe(2);
  });

  it('should correctly subtract numbers', () => {
    const result = myService.mySubtractNumbersFunction(8, 3);

    expect(result).toBe(5);
  });
});

As you can see, we are using all three of those functions in the tests above: describe, it, and expect.

The describe() function defines a suite of tests. A "suite" is just a group of related tests, and tests are also often referred to as "specs". This is typically where we would perform our Arrange step in the AAA process, meaning we will prepare the testing environment for our tests at this point (we will discuss another special function we can use for this in a moment).

The it() function defines a specific test (or "spec"), and it lives inside of a suite. This function is responsible for defining the purpose of the test (i.e. "it should do this", "it should do that"), and it holds the code for the test. You can add whatever code you like within this it block to perform the actions necessary for the test. This is the Act step of the AAA process.

The expect() defines the expected result of a test and lives inside of a specific test. Once you have finished whatever actions are necessary to perform your test, you use expect to enforce an expectation on something that should have happened in the test. This is the Assert step of the AAA process.

In the example I've used, we have a test suite called My Service. Inside of that suite, we define two tests. The first test defines a test for correctly adding numbers, and it expects that if 1 and 1 are passed into a specific function then the returned result should be 2. The second test is similar, except that it is testing a subtraction function.

I mentioned that we can use another function in Jest to help us arrange our tests. Let's expand our test to include that so it is a little more realistic:

describe('My Service', () => {
  let myService;

  beforeEach(() => {
    myService = new MyService();
  });

  it('should correctly add numbers', () => {
    const result = myService.myAddNumbersFunction(1, 1);

    expect(result).toBe(2);
  });

  it('should correctly subtract numbers', () => {
    const result = myService.mySubtractNumbersFunction(8, 3);

    expect(result).toBe(5);
  });
});

Arranging Unit Tests with beforeEach

The beforeEach function will run whatever we place inside of it before every test that runs. The flow of the test for the above example would be something like this:

1. Assign a new instance of MyService to the myService variable
2. Run the first test
3. Assign a new instance of MyService to the myService variable
4. Run the second test