Не все компоненты, которые вы пишете для своего приложения 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); });
Получайте удовольствие и проверьте это!