Тестирование query-параметров

Enzyme предоставляет инструменты для тестирования React-компонентов и их взаимодействия с различными API, включая работу с параметрами запроса (query parameters). Тестирование параметров запроса является важным аспектом, особенно если компонент взаимодействует с URL и различными маршрутами. В этой главе рассматриваются подходы и методики тестирования query-параметров с помощью Enzyme, а также как эффективно проверять обработку изменений в URL.

Роль query-параметров в React-приложении

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

React-приложения часто используют библиотеки маршрутизации, такие как React Router, для обработки URL и query-параметров. При тестировании компонентов, которые зависят от этих параметров, необходимо учитывать взаимодействие с маршрутизатором и его влияние на поведение компонента.

Инструменты для работы с query-параметрами в Enzyme

Enzyme сам по себе не предоставляет функционала для работы с URL или query-параметрами напрямую. Однако, для тестирования взаимодействия с параметрами запроса можно использовать совместно с Enzyme библиотеку React Router и MemoryRouter для имитации маршрутизации в тестах.

Использование MemoryRouter для тестирования URL

MemoryRouter из библиотеки React Router позволяет имитировать навигацию в приложении в контексте тестов, не влияя на реальный браузер. Это важный инструмент для работы с query-параметрами в Enzyme, так как он позволяет вручную задавать URL в тестах и отслеживать изменения.

Пример использования MemoryRouter:

import React from 'react';
import { shallow } from 'enzyme';
import { MemoryRouter, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('MyComponent with query parameters', () => {
  it('should render with query parameters', () => {
    const wrapper = shallow(
      <MemoryRouter initialEntries={['/my-page?search=test']}>
        <Route path="/my-page" component={MyComponent} />
      </MemoryRouter>
    );
    expect(wrapper.find(MyComponent).props().location.search).toBe('?search=test');
  });
});

В этом примере тестируется компонент, который использует параметры запроса, и проверяется, что параметр search присутствует в URL.

Тестирование изменений в query-параметрах

Если компонент изменяет query-параметры во время работы (например, через взаимодействие с формой или другие действия пользователя), важно проверить, как эти изменения отражаются в URL.

Пример теста для отслеживания изменений query-параметра:

import React from 'react';
import { shallow } from 'enzyme';
import { MemoryRouter, Route, Link } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('MyComponent query parameters change', () => {
  it('should update URL when search parameter changes', () => {
    const wrapper = shallow(
      <MemoryRouter initialEntries={['/my-page?search=test']}>
        <Route path="/my-page" component={MyComponent} />
      </MemoryRouter>
    );

    // Имитируем изменение query-параметра
    wrapper.find('button').simulate('click'); // Кнопка, которая изменяет query-параметр

    expect(wrapper.find(MyComponent).props().location.search).toBe('?search=updated');
  });
});

В этом примере компонент изменяет query-параметр, и тест проверяет, что URL обновился с правильным значением.

Работа с параметрами через React Router

В более сложных случаях компоненты могут извлекать параметры из URL с помощью хука useLocation или через props, передаваемые с компонентами маршрута. Для того чтобы протестировать такие компоненты, можно использовать как MemoryRouter, так и дополнительные моки или хуки для замены реальной логики маршрутизации.

Пример использования useLocation:

import React from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const searchQuery = searchParams.get('search');

  return <div>{searchQuery}</div>;
};

export default MyComponent;

Тестирование компонента с использованием useLocation:

import React from 'react';
import { shallow } from 'enzyme';
import { MemoryRouter, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('MyComponent with useLocation', () => {
  it('should read search query from URL', () => {
    const wrapper = shallow(
      <MemoryRouter initialEntries={['/my-page?search=test']}>
        <Route path="/my-page" component={MyComponent} />
      </MemoryRouter>
    );
    
    expect(wrapper.find(MyComponent).dive().text()).toBe('test');
  });
});

Этот тест проверяет, что компонент правильно извлекает и отображает параметр запроса search из URL.

Мокирование объектов Location и History

В некоторых случаях требуется более глубокая настройка для тестирования изменений в URL. Для этого можно использовать моки для объектов location и history, что позволяет эмулировать взаимодействие с URL без использования MemoryRouter.

Пример мокирования location и history:

import React from 'react';
import { shallow } from 'enzyme';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import MyComponent from './MyComponent';

describe('MyComponent with mocked history', () => {
  it('should update URL when search parameter changes', () => {
    const history = createMemoryHistory();
    history.push('/my-page?search=test');

    const wrapper = shallow(
      <Router history={history}>
        <MyComponent />
      </Router>
    );

    // Имитируем изменение URL
    history.push('/my-page?search=updated');

    expect(wrapper.find(MyComponent).props().location.search).toBe('?search=updated');
  });
});

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

Проверка правильности отображения данных

Часто query-параметры используются для фильтрации данных или изменения состояния в компоненте. В таких случаях важно не только проверять URL, но и убеждаться, что данные, отображаемые компонентом, соответствуют параметрам запроса.

Пример тестирования отображения данных в зависимости от query-параметра:

import React from 'react';
import { shallow } from 'enzyme';
import { MemoryRouter, Route } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('MyComponent with data filtering based on query parameters', () => {
  it('should display filtered data based on search query', () => {
    const wrapper = shallow(
      <MemoryRouter initialEntries={['/my-page?search=test']}>
        <Route path="/my-page" component={MyComponent} />
      </MemoryRouter>
    );

    expect(wrapper.find(MyComponent).dive().text()).toContain('Filtered data for: test');
  });
});

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

Итог

Тестирование query-параметров в Enzyme требует использования инструментов для управления маршрутизацией, таких как MemoryRouter или мокирование объектов location и history. Проверка взаимодействия с параметрами запроса важна для обеспечения корректности работы компонентов, особенно если они зависят от URL для фильтрации данных или изменения состояния. Важно учитывать, что тестирование параметров запроса должно охватывать не только корректное отображение значений, но и их влияние на логику приложения и взаимодействие с другими компонентами.

Оглавление