В обычных connect
ed компонентах React, чтобы упростить модульное тестирование, я видел схему export
с базовым компонентом, а export default
с подключенным компонентом .Он хорошо работает для простых тестов, которые обрабатывают фактическую функциональность компонента, не запутываясь в хранилищах избыточности и насмешках маршрутизатора.
Я ищу аналог для компонентов более высокого порядка.Например, учитывая тривиальный компонент высшего порядка:
export default function exampleHoc(Wrapped) {
const ExampleHoc = props => (
<Wrapped {...props.reduxStore} hoc={true} />
);
return connect(
state => ({
reduxStore: state.example.reduxStore,
}))(ExampleHoc);
}
Я хотел бы проверить, что props.hoc === true
в модульном тесте, без необходимости подключения других компонентов высшего порядка, которые <ExampleHoc>
Мой лучший дизайн - проходить по флагу:
export default function exampleHoc(Wrapped, exportUnconnectedForTest) {
const ExampleHoc = props => (
<Wrapped {...props.reduxStore} hoc={true} />
);
if (exportUnconnectedForTest) {
return ExampleHoc;
}
return connect(
state => ({
reduxStore: state.example.reduxStore,
}))(ExampleHoc);
}
Это облегчает тестирование
const DummyComponent = () => <div />;
const Sut = exampleHoc(DummyComponent, true);
...
test('props value should be passed', () => {
const sut = shallow(<Sut />);
const childProps = sut.find(DummyComponent).props();
expect(sut.childProps.hoc).to.equal(true);
});
, в то же время удачно проходя через завернутый выводдля любых обычных пользователей метода.
Это работает, но мне кажется неуклюжим.Существует ли лучший / устоявшийся шаблон для доставки развернутой внутренней части компонента более высокого порядка?