Метод вложенного компонента ферментного теста

Question

Я пытаюсь использовать Enzyme для тестирования метода компонента.Я знаю, что типичный способ сделать это - использовать метод Enzyme instance().

Дело в том, что это работает только для компонента root, и мой компонент должен быть упакован в два провайдера Context для рендеринга (а именно, реакции-маршрутизатор и клиент apollo).

  const wrapper = mount(
    <ApolloProvider client={client}>
      <MemoryRouter initialEntries={["/login"]}>
        <AuthFormContainer />
      </MemoryRouter>
    </ApolloProvider>
  );

Как в этом случае проверить methodA из AuthFormContainer?

Answer 1

Всегда проверяйте компонент оболочки иначе, чем подключенный компонент.Экспортируйте компонент оболочки и импортируйте в тестовый файл и тестируйте, как вы делаете, но мелко (я предпочитаю)

Answer 2

Для компонентов React вы всегда пишете Модульные тесты .Согласно этому ответу: https://stackoverflow.com/a/652382/2873331:

Модульное тестирование просто проверяет, что отдельные блоки кода (в основном функции) работают так, как ожидается ...

Так что здесь вы должны попробоватьТестировать функциональность AuthFormContainer и не правильно ли реагирует на маршрутизатор и клиент apollo правильно вводит контекст или нет.Ваш тест должен проверить: учитывая context для AuthFormContainer, работают ли его методы экземпляра должным образом или нет.

Чтобы ввести context , вы можете использовать Enzyme's shallow метод.

it('should work as expected', () => {
    const wrapper = shallow(< AuthFormContainer />, {
        context: { ... }, // pass expected context here

    });
    wrapper.instance().method(); //extract the required method by using instance
    ...
  });

Ссылка: http://airbnb.io/enzyme/docs/api/shallow.html

На заметку не стоит использовать mount, если вы на самом деле не хотите тестировать вещи на уровне DOM.mount делает ваши тесты очень медленными.Всегда предпочитайте shallow.

Ссылка: http://airbnb.io/enzyme/docs/api/mount.html

Answer 3

Для модульного тестирования вы не должны беспокоиться о других компонентах.Но если вам нужно, вы можете использовать поверхностный рендеринг.Вот что я сделал:

const wrapper = shallow(
    <ApolloProvider client={client}>
      <MemoryRouter initialEntries={["/login"]}>
        <AuthFormContainer />
      </MemoryRouter>
    </ApolloProvider>
);

Получите дерево компонентов для AuthFormContainer, используя:

const authFormControllerTree = wrapper.find(MemoryRouter).shallow().find(AuthFormContainer).shallow()

Теперь, чтобы проверить methodA в AuthFormContainer, вы можетепросто сделайте:

authFormControllerTree.instance().methodA();

Answer 4

Попробуйте find(ApolloProvider).dive() - и console.log, чтобы увидеть дерево внутри.