Не все компоненты, которые вы пишете для своего приложения React, можно разделить на категории с сохранением состояния и без состояния (тупой). В React есть третий расширенный тип компонентов, называемый компонентом более высокого порядка. Компонент более высокого порядка - это функция, которая принимает компонент в качестве аргумента и возвращает другой компонент. Прочтите другую мою статью, чтобы увидеть, как компоненты более высокого порядка используются в реальном мире.

Создание HOC с тестами

Мы будем использовать Enzyme и Jest, но эти концепции применимы к любой тестовой библиотеке.

Один из общих HOC, который я пишу для каждого своего проекта, называется withConditional . Его цель - визуализировать компонент тогда и только тогда, когда условие выполнено, иначе просто вернуть null.

import React from 'react';
const withConditional = Component =>
  function withConditionalComponent({ condition, ...props }) {
    if (condition) {
      return <Component {...props} />;
    }
    return null;
};
export default withConditional;

Как видите, когда condition, переданный в HOC, оценивается как true, он возвращает компонент, в противном случае он возвращает null .

Итак, как можно провести модульное тестирование HOC? На удивление мало статей, посвященных модульному тестированию этих компонентов, и мне было трудно найти правильный способ. Недавно решение щелкнуло!

Решение

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

withConditional используется следующим образом

const ConditionalComponent = withConditional(MyComponent);
class HelloWorld extends React.Component {
  render() {
    return (<ConditionalComponent condition={3 > 4} />);
  }
}

Итак, мы должны использовать ту же концепцию для их модульного тестирования.

Здесь важно учитывать, что компонент должен быть протестирован для всех состояний. Например, если наш HOC может обрабатывать два разных состояния, в зависимости от переданного ему условия, то мы ДОЛЖНЫ учитывать оба состояния в тестах.

Когда условие выполнено:

it(
  'should render the component only when the condition passes'
  , () => {
  const ConditionalComponent = withConditional(Component);
  const wrapper = shallow(
    <ConditionalComponent condition={true} />
  );
  expect(wrapper.html()).not.toBe(null);
});

Когда условие не выполняется:

it(
  'should return null when the condition fails'
  , () => {
const ConditionalComponent = withConditional(Component);
const wrapper = shallow(
    <ConditionalComponent condition={false} />
  );
expect(wrapper.html()).toBe(null);
});

Получайте удовольствие и проверьте это!