Моки и props

Cypress предоставляет мощный инструментарий для работы с тестированием веб-приложений на JavaScript, включая возможность контроля поведения внешних API и компонентов через моки и передачу данных через props. Эти механизмы критически важны для создания изолированных, надёжных и воспроизводимых тестов.

Моки в Cypress

Моки позволяют подменять реальные сетевые запросы или функции заглушками, чтобы тесты не зависели от внешних систем. В Cypress это реализуется через команду cy.intercept().

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
cy.visit('/users');
cy.wait('@getUsers');

Ключевые моменты:

  • cy.intercept() может подменять запросы полностью, возвращая заранее подготовленные данные (fixtures), либо модифицировать ответы реального сервера.
  • Атрибут .as() позволяет давать мокам имена для удобного ожидания через cy.wait().
  • Моки можно комбинировать с спайами (spy), чтобы проверять, какие данные были отправлены на сервер.

Пример с проверкой отправки формы:

cy.intercept('POST', '/api/login', (req) => {
  expect(req.body).to.have.property('username', 'admin');
  req.reply({ statusCode: 200, body: { token: '123' } });
}).as('loginRequest');

cy.get('form').submit();
cy.wait('@loginRequest');

Преимущества использования моков:

  • Исключается зависимость тестов от реального API.
  • Можно моделировать ошибки и разные состояния сети.
  • Улучшается стабильность и скорость тестов.

Props и их использование в компонентах

В приложениях на React, Vue или других фреймворках, props — это способ передачи данных в компоненты. В тестах важно контролировать значения props для проверки поведения компонента в разных сценариях.

Cypress поддерживает интеграцию с компонентными тестами через cy.mount() (Cypress Component Testing) или через работу с DOM-элементами на странице.

Пример для React:

import UserCard from '../. ./src/components/UserCard';

cy.mount(<UserCard name="Alice" age={30} />);

cy.get('.user-name').should('contain.text', 'Alice');
cy.get('.user-age').should('contain.text', '30');

Особенности работы с props:

  • Props позволяют тестировать компонент в изоляции, передавая ему любые данные, включая мокированные объекты.
  • Можно использовать комбинацию с моками, чтобы компонент получил поддельный ответ API, а не реальные данные.
  • Проверка props упрощает написание юнит-тестов, где не требуется загружать всю страницу.

Комбинация моков и props

В сложных тестах часто используется сочетание моков и props. Например, компонент может загружать данные через API, но тест должен контролировать эти данные через моки, а сам компонент получать их через props.

Пример:

cy.intercept('GET', '/api/posts', { fixture: 'posts.json' }).as('getPosts');

cy.mount(<PostsList userId={1} />);

cy.wait('@getPosts');

cy.get('.post-item').should('have.length', 5);
cy.get('.post-item:first').should('contain.text', 'Первый пост');

В этом примере:

  • cy.intercept подменяет вызов API и возвращает фикстуру.
  • PostsList получает userId через props.
  • Cypress проверяет правильное отображение элементов на основе мокированных данных.

Рекомендации по организации моков и props

  • Использовать fixtures для хранения часто используемых данных. Это делает тесты чистыми и лёгкими для поддержки.
  • Декларировать моки и спаи в beforeEach, чтобы они применялись ко всем тестам, но оставались изолированными.
  • Проверять как успешные сценарии, так и ошибки сервера, чтобы тесты покрывали различные состояния приложения.
  • Комбинировать мокирование сетевых запросов с проверкой props для компонентных тестов, что обеспечивает максимальную предсказуемость результатов.

Практические приёмы

  1. Замена API на локальные данные Использовать cy.intercept() с fixture для симуляции сложных объектов, например:

    cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');

  2. Динамическое изменение props Можно монтировать компонент несколько раз с разными props, чтобы проверить различные состояния:

    cy.mount(<Button label="Сохранить" disabled={true} />);
cy.get('button').should('be.disabled');

  3. Проверка взаимодействия с внешним API через спай Spy позволяет убедиться, что компонент отправляет правильные данные:

    cy.intercept('POST', '/api/submit').as('submitForm');
cy.get('form').submit();
cy.wait('@submitForm').its('requestBody').should('have.property', 'email');

Использование моков и props в Cypress формирует изолированное и надёжное тестовое окружение, которое позволяет моделировать любые состояния приложения, контролировать данные и проверять компоненты без зависимости от внешних факторов. Такой подход ускоряет тестирование и повышает качество JavaScript-приложений.

Оглавление