Тестирование в Angular с Jest: настройка и запуск тестов

Зачем нужны тесты в Angular

Тестирование - это важная часть разработки приложений. Оно позволяет убедиться, что код работает правильно и не содержит ошибок.

Проверяя разные части приложения - компоненты, сервисы, маршруты - с помощью тестов, мы можем:

• Найти и исправить баги на ранних этапах
• Убедиться, что новый код не сломал старый функционал
• Рефакторить код без страха что-то сломать
• Быстро проверить работает ли приложение после изменений

Короче, тесты делают разработку надежнее и позволяют экономить время!

Знакомимся с Jest

Для тестирования в Angular часто используют библиотеку Jest. Она умеет:

• Запускать тесты очень быстро
• Имитировать работу браузера и DOM
• Генерировать тестовые данные
• Показывать подробные результаты

Короче, с Jest тесты писать и запускать одно удовольствие!

Установка Jest

Чтобы начать писать тесты, нужно установить Jest.

Это легко сделать через команду:

npm install --save-dev jest jest-preset-angular @types/jest

Также нужно добавить настройки Jest в файл jest.config.js:

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts']  
};

Вот и всё! Jest готов к работе.

Пишем первый тест

Давай напишем простой тест для компонента.

Создадим файл app.component.spec.ts рядом с компонентом:

import { AppComponent } from './app.component';

describe('AppComponent', () => {

  it('should create', () => {
    expect(AppComponent).toBeTruthy();
  });
  
});

Здесь мы проверяем, что компонент создаётся без ошибок.

Теперь запускаем тест через npm test. Jest выполнит тест и покажет результат - в нашем случае успешный.

Тестируем сервисы

Дальше давай напишем тест для сервиса.

Например, проверим метод getUsers() в сервисе UserService:

// Подставляем моки 
jest.mock('./user.model'); 

describe('UserService', () => {

  it('should return expected users', () => {
    const service = new UserService();
    
    // Проверяем возвращаемое значение
    expect(service.getUsers()).toEqual([{ 
      id: 1,
      name: 'John' 
    }]);
  });

});

Таким образом можно протестировать любой сервис и его методы!

Тестируем формы

При тестировании форм важно проверить их взаимодействие с DOM.

Например, для компонента с формой можно написать:

let fixture; 
let inputEl;

beforeEach(() => {
  // Создаём фикстуру
  fixture = TestBed.createComponent(SignupFormComponent);
  
  // Получаем ссылку на поле ввода
  inputEl = fixture.debugElement.query(By.css('input')); 
});

it('should update model on input', () => {
  // Вводим текст
  inputEl.triggerEventHandler('input', {target: {value: 'test'}});
  
  // Проверяем модель
  expect(fixture.componentInstance.model.name).toEqual('test');
});

Таким образом можно тестировать любые формы!

Тестируем маршрутизацию

Маршрутизацию тоже важно протестировать.

Для этого используем специальные методы маршрутизатора:

let router: Router;
beforeEach(() => {
  router = TestBed.get(Router); // получаем роутер
  
  // Настраиваем маршруты
  TestBed.configureTestingModule({
    imports: [
      RouterTestingModule.withRoutes([
        { path: 'users', component: UsersComponent }  
      ])
    ]
  });
});

it('should navigate to users page', () => {
  // Переходим по маршруту
  router.navigate(['users']); 
  
  // Проверяем URL
  expect(router.url).toEqual('/users'); 
});

Запускаем тесты автоматически

Чтобы тесты запускались автоматически при изменениях в коде, можно использовать watch mode:

npm run test — --watch

Теперь после каждого сохранения Jest перезапустит тесты. Удобно при разработке!

Также можно настроить запуск тестов на CI серверах при каждом коммите.

Итог

В общем, тестирование - это крутая штука, которая делает разработку надёжнее и быстрее. С помощью Jest тесты для Angular писать и запускать достаточно удобно.