Testing Angular Applications with Jest and Angular Testing Library

Testing is a crucial part of the development process, as it ensures that our applications are bug-free and work as expected. In this tutorial, we will explore how to test Angular applications using Jest and Angular Testing Library.

What is Jest?

Jest is a JavaScript testing framework that is used to test JavaScript applications, including Angular applications. Jest is fast, easy to use, and provides a great developer experience.

What is Angular Testing Library?

Angular Testing Library is a library that provides utilities to test Angular applications in a way that is more similar to how users interact with the application. It encourages testing of components by the rendered output, rather than the implementation details.

Step 1: Installing Jest and Angular Testing Library

To get started with testing Angular applications using Jest and Angular Testing Library, we first need to install the necessary packages. We can do this by running the following command:

npm install --save-dev jest @types/jest @testing-library/angular

This will install Jest, its types for TypeScript, and Angular Testing Library.

Step 2: Creating Jest Configuration

After installing Jest and Angular Testing Library, we need to create a Jest configuration file. We can create this file in the root of our project with the name jest.config.js.

module.exports = {
  preset: "jest-preset-angular",
  setupFilesAfterEnv: ["<rootDir>/src/setup-jest.ts"],
  moduleNameMapper: {
    "@app/(.*)": "<rootDir>/src/app/$1",
    "@assets/(.*)": "<rootDir>/src/assets/$1",
    "@core/(.*)": "<rootDir>/src/app/core/$1",
    "@env": "<rootDir>/src/environments/environment",
    "@shared/(.*)": "<rootDir>/src/app/shared/$1",
  },
  transformIgnorePatterns: ["node_modules/(?!@ngrx)"],
};

This configuration file sets up Jest to work with Angular and sets up some alias for our application’s folders.

Step 3: Writing Tests with Angular Testing Library

After setting up Jest and Angular Testing Library, we can start writing tests for our Angular components.

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { render } from '@testing-library/angular';

describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
  });

  it('should render the title', () => {
    const { getByText } = render(AppComponent);
    const title = getByText('Welcome to my app!');
    expect(title).toBeInTheDocument();
  });
});

In this example, we are testing the AppComponent and checking if the title of the application is rendered correctly. We use the render method provided by Angular Testing Library to render the component and then use the getByText method to find the title element and check if it is in the document.

Step 4: Running Jest Tests

After writing the tests, we can run them by running the following command:

npm run test

This will run all the tests in our project and provide us with the test results.

Conclusion

In this tutorial, we have explored how to test Angular applications using Jest and Angular Testing Library. We have covered installing Jest and Angular Testing Library, creating Jest configuration, writing tests with Angular Testing Library, and running Jest tests.

By testing our Angular applications using Jest and Angular Testing Library, we can ensure that our applications are bug-free, work as expected, and provide a great user experience. It also helps us to catch any regressions or issues that may arise as we make changes to our application code.

Using Jest and Angular Testing Library can help make our testing process more efficient and effective, as it allows us to write tests that are more closely aligned with how users interact with our application. This can also help us to catch issues that may be missed with traditional testing methods, such as testing based on implementation details.

Overall, Jest and Angular Testing Library are powerful tools that can help us to build more reliable and accessible Angular applications. By incorporating testing into our development process, we can ensure that our applications are of high quality and provide a great user experience for all users.