Тестирование серверного рендеринга

Серверный рендеринг (SSR) в веб-приложениях позволяет генерировать HTML-контент на сервере, что улучшает время загрузки страницы и SEO-оптимизацию. В Marko SSR является важной частью фреймворка, позволяя генерировать и отправлять HTML на клиент, прежде чем браузер начнёт загружать JavaScript. Тестирование серверного рендеринга в Marko — важный этап разработки, который гарантирует, что рендеринг происходит корректно, независимо от условий.

Подготовка к тестированию серверного рендеринга

Перед тем как начать тестирование серверного рендеринга, важно настроить окружение, в котором будет выполняться тест. Это обычно включает в себя установку необходимых пакетов для тестирования и настройку фреймворков, таких как Mocha или Jest. Помимо этого, может потребоваться настройка инструмента для мокирования HTTP-запросов и серверных ресурсов, например, nock.

Чтобы проверить серверный рендеринг в Marko, необходимо имитировать серверный запрос и тестировать его рендеринг на сервере. Для этого используется API Marko, которое позволяет рендерить компоненты в строку HTML. Один из способов — использовать marko.renderToString() или его асинхронный аналог marko.renderToStream().

const marko = require("marko");
const template = require("./templates/myTemplate.marko");

const renderedHTML = template.renderSync({ name: 'Marko' });
console.log(renderedHTML);

Этот код рендерит компонент в строку HTML. Для тестирования нужно проверить, что сгенерированный HTML содержит все необходимые элементы и данные.

Проверка правильности рендеринга

Тестирование правильности рендеринга — это проверка того, что компонент был правильно преобразован в HTML. Для этого можно написать тест, который будет проверять, что рендеринг компонента на сервере приводит к ожидаемому результату.

const assert = require('assert');

describe('Тестирование рендеринга компонента', () => {
  it('Должен правильно рендерить компонент', () => {
    const renderedHTML = template.renderSync({ name: 'Marko' });
    assert(renderedHTML.includes('<h1>Hello, Marko!</h1>'));
  });
});

Такой тест проверяет, что результат рендеринга компонента содержит строку <h1>Hello, Marko!</h1>. Подобные тесты полезны для проверки, что серверный рендеринг генерирует правильную структуру данных.

Тестирование асинхронного рендеринга

Для асинхронных операций (например, загрузка данных с сервера перед рендерингом) Marko предлагает механизм для асинхронного рендеринга. В таких случаях необходимо использовать async/await для корректной синхронизации данных перед рендерингом.

const assert = require('assert');

describe('Тестирование асинхронного рендеринга', () => {
  it('Должен рендерить компонент после загрузки данных', async () => {
    const renderedHTML = await template.renderToString({ name: 'Marko', data: asyncData });
    assert(renderedHTML.includes('<h1>Hello, Marko!</h1>'));
  });
});

Здесь asyncData представляет собой асинхронный источник данных, который должен быть подгружен перед рендерингом. Проверка будет заключаться в том, что компоненты корректно используют эти данные и результат рендеринга будет верным.

Тестирование взаимодействия с состоянием

Важно также тестировать, как серверный рендеринг работает с состоянием приложения. В Marko можно передавать данные в шаблон через пропсы. Эти данные могут изменяться в ходе работы приложения, и важно проверить, что рендеринг всегда учитывает текущее состояние.

Пример:

const assert = require('assert');

describe('Тестирование рендеринга с состоянием', () => {
  it('Должен рендерить компоненты с правильным состоянием', () => {
    const props = { user: { name: 'Marko' }, loggedIn: true };
    const renderedHTML = template.renderSync(props);
    assert(renderedHTML.includes('<div>Welcome, Marko!</div>'));
  });
});

В данном тесте проверяется, что компонент корректно рендерит данные из переданных пропсов, например, отображая приветствие с именем пользователя.

Тестирование ошибок рендеринга

Немаловажной частью тестирования является проверка ошибок, которые могут возникнуть в процессе рендеринга. Ошибки могут быть связаны с отсутствием необходимых данных, некорректной логикой или неправильно настроенными шаблонами.

const assert = require('assert');

describe('Тестирование ошибок рендеринга', () => {
  it('Должен генерировать ошибку при отсутствии обязательных данных', () => {
    assert.throws(() => {
      template.renderSync({}); // Пропущены необходимые данные
    }, /Error: Expected 'name' prop/);
  });
});

Этот тест проверяет, что в случае отсутствия обязательного пропса будет выброшена ошибка, информирующая о проблеме. Тесты на ошибки важны, чтобы гарантировать, что приложение не будет работать с некорректными или неполными данными.

Тестирование серверного рендеринга с моками

Для изоляции тестов от внешних сервисов или сложных операций полезно использовать моки. Моки позволяют заменить реальные зависимости фальшивыми объектами, которые имитируют их поведение. В случае с Marko это может быть полезно для тестирования рендеринга при взаимодействии с API.

Пример использования nock для мокирования HTTP-запроса:

const nock = require('nock');
const assert = require('assert');

describe('Тестирование с моками', () => {
  it('Должен рендерить компонент с мокированными данными', async () => {
    nock('https://api.example.com')
      .get('/user')
      .reply(200, { name: 'Marko' });

    const renderedHTML = await template.renderToString();
    assert(renderedHTML.includes('<h1>Hello, Marko!</h1>'));
  });
});

Здесь используется библиотека nock для того, чтобы имитировать HTTP-запрос и ответ от внешнего сервиса. Это позволяет проверить, что компонент правильно обрабатывает данные, полученные с API, не обращаясь к реальному серверу.

Производительность серверного рендеринга

Тестирование производительности серверного рендеринга важно для приложений, где требуется высокая скорость отклика и низкое время загрузки. Marko предоставляет инструменты для измерения времени рендеринга, что позволяет определить узкие места в производительности.

const performance = require('perf_hooks').performance;

describe('Тестирование производительности рендеринга', () => {
  it('Должен рендерить компонент за приемлемое время', () => {
    const start = performance.now();
    template.renderSync({ name: 'Marko' });
    const end = performance.now();
    const duration = end - start;
    assert(duration < 100); // Ожидаем, что рендеринг займет меньше 100 мс
  });
});

Этот тест проверяет, что время рендеринга не превышает заданного порога, что важно для обеспечения быстрого отклика сервера.

Заключение

Тестирование серверного рендеринга в Marko требует учета множества факторов, включая корректность рендеринга, работу с асинхронными данными, обработку ошибок и производительность. Правильное тестирование помогает избежать проблем в продакшн-среде и гарантирует, что рендеринг всегда будет работать как ожидается, независимо от условий.

Оглавление