Модульное тестирование связанных компонентов высшего порядка в React / Enzyme - PullRequest
0 голосов
/ 12 сентября 2018

В обычных 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);
});

, в то же время удачно проходя через завернутый выводдля любых обычных пользователей метода.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...