Angular Unit Testing Using Jest and Testing Library

[reboottime]

Overview

This article walks through the configuration guide about testing Angular components using Jest and Testing library(Angular version)

Content

• Why using Jest and Testing library do the unit test work for angular app
• Setup Jest and testing library for your angular app
• An example to walk you through how to test an Angular component

[reboottime]

Why using Jest and Testing Library

• The problem: you want to test the use case for your real user and avoid testing implementation detail
• Skill Transition: From a Jest and Testing Library/React user's perspective, I kinda think Angular's preset Unit Testing solution is not friendly and solve above problems very well

[reboottime]

Setup Jest for your angular app

This section works as a cheat sheet to set up jest and testing library as your (angular) unit testing solution.
To understand why we have the following steps, please read the official doc of corresponding packages.

• Remove karma and jasmine related packages from your app (dev) dependencies

• Update the test script used in package.json file as test: jest

• remove the test field in your angular.json file

• setup Jest and testing library for your app

  • install (jest related)packages bellow

   pnpm add -D @testing-library/angular @testing-library/jest-dom @types/jest jest jest-preset-angular

  • Install @testing-library/user-eventm for performing user interaction in test code

  pnpm install --save-dev @testing-library/user-event

  • create jest.setup.ts and fill it with content bellow

   import 'jest-preset-angular/setup-jest';
   import '@testing-library/jest-dom/jest-globals';
   import '@testing-library/jest-dom';

  • create jest.config.js and fill it with content bellow

    module.exports = {
     preset: "jest-preset-angular",
     setupFilesAfterEnv: ["<rootDir>/setup.jest.ts"],
     globalSetup: "jest-preset-angular/global-setup",
     testPathIgnorePatterns: [
       "<rootDir>/node_modules/",
       "<rootDir>/dist/",
       "<rootDir>/e2e/",
       "<rootDir>/src/test.ts",
     ],
   };

[reboottime]

Example

Assume you have a dialog component that can be opened programmatically

• what this dialog is for by showing user with a proper dialog title
• Render order information
• User can close the dialog by clicking the dialog close button.

How you gonna test it?

There are two things we want to get clear

• How to setup the environment to the component we gonna test
• How to define the test cases and the test data

How to setup the environment

Angular component usually has imports and providers, to mock the env how the actual component works, we need to configure corresponding import and providers for it.

Here is an example

import {
  MAT_DIALOG_DATA,
  MatDialogModule,
  MatDialogRef,
} from '@angular/material/dialog';
import { SchemaFieldsDetailComponent } from './schema-fields-detail.component';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { render, screen } from '@testing-library/angular';
import userEvent, { UserEvent } from '@testing-library/user-event';

const imports = [
  MatDialogModule,
  MatTableModule,
  MatPaginatorModule,
  MatSortModule,
  NoopAnimationsModule,
  FontAwesomeModule,
];


await render(OrderDetailDialog, {
      componentProperties: {
        data: mockOrderData,
      },
      imports,
      providers: [
        {
          provide: MAT_DIALOG_DATA,
          useValue: mockOrderData,
        },
        {
          provide: MatDialogRef,
          useValue: mockDialogRef,
        },
      ],
    });

[reboottime]

Design the test cases

From a user's perspective, the most important information is the order data, and the workflow.

So we group test cases using describe and setup testing environment for all test cases using beforeEach

const mockOrderData = {}; // design the mock data

const mockDialogRef = {
  close: jest.fn()
}; // close dialog callback

let user: UserEvent; // for user interaction using user event lib

describe('OrderDetailComponent`, () => {
  beforeEach(async () => {
     await render(OrderDetailDialog, {
      componentProperties: {
        data: mockOrderData,
      },
      imports,
      providers: [
        {
          provide: MAT_DIALOG_DATA,
          useValue: mockOrderData,
        },
        {
          provide: MatDialogRef,
          useValue: mockDialogRef,
        },
      ],
    });
  
  })
})

[reboottime]

Test cases

• test case about checking order content

test('Render order content correctly, () => {
  expect(screen.getByTestId('order-detail-dialog').textContent).    expect(screen.getByRole('table').textContent).toMatchInlineSnapshot(
`inline snapshot content`)
})

In this unit test case, the most important information is the order content; and considering extension on UI changes, so I designed the test cases covers the order content only

• test user can close the dialog

  test('should close the dialog when the close button is clicked', async () => {
    await user.click(
      screen.getByRole('button', {
        name: /Close Order Detail Dialog/i,
      })
    );

    expect(mockDialogRef.close).toHaveBeenCalled();
  });