Тестирование деструктурированного контекста потребителя

Question

Я пытаюсь протестировать компонент, используя Jest + Enzyme, чтобы убедиться, что компонент визуализирован как дочерний элемент моего потребителя.Аналогичный тест работает, когда я делаю это:

    <FormContextConsumer>
      {({ ...props }) => (
        <Footer
          ...
        />
      )}
    </FormContextConsumer>

макетировать контекст следующим образом:

jest.mock("../../context/FormContext", () => ({
  FormContextConsumer: props => props.children()
}));

и тестировать его так:

it(`should render a 'Footer' component inside the 'FormContextConsumer'`, () => {
  expect(
    shallowTestComponent()
      .find(FormContextConsumer)
      .dive()
      .find(Footer).length
  ).toBe(1);
});

но когдаЯ деструктурирую контекстные подпорки так:

    <FormContextConsumer>
      {({ handleSubmit, handleReset }) => (
        <Drawer
          ...
        >
          {children}
        </BaseEntityDrawer>
      )}
    </FormContextConsumer>

и протестирую с этим:

  it(`should always render 'Drawer' inside 'FormContextConsumer'`, () => {
    expect(
      shallowTestComponent()
        .find(FormContextConsumer)
        .dive()
        .find(Drawer).length
    ).toBe(1);
  });

Я получаю эту ошибку:

TypeError: Cannot destructure property `handleSubmit` of 'undefined' or 'null'.

Я предполагаю, чтосвязано с тем, как я издеваюсь над модулем, но мне не ясно, как адаптировать его к этому случаю.Как я могу подойти к этому?

Answer 1

Я смог выяснить это благодаря ответу Стивенвила здесь: https://stackoverflow.com/a/51152120/5858391

Я изменил свой смоделированный контекст на:

jest.mock("../../../forms/context/FormContext", () => {
  const handleSubmit = jest.fn();
  const handleReset = jest.fn();

  return {
    FormContextConsumer: props => props.children({ handleSubmit, handleReset })
  };
});

и мои тесты работают!