Метод вложенного компонента ферментного теста
Я пытаюсь использовать Enzyme для проверки метода компонента. Я знаю, что типичный способ сделать это - использовать метод Enzyme instance().
Дело в том, что это работает только для компонента root, и мой компонент должен быть оберткой в двух провайдерах контекста для рендеринга (а именно, response-router и apollo client).
const wrapper = mount(
<ApolloProvider client = {client}>
<MemoryRouter initialEntries = {["/login"]}>
<AuthFormContainer />
</MemoryRouter>
</ApolloProvider>
);
Как я могу проверить methodA из AuthFormContainer в этом случае?
@ShubhamKhatri Не могли бы вы рассказать, как это сделать?
@ShubhamKhatri Я думаю, нам нужно протестировать ApolloProvider, если этот компонент создан командой apollo, потому что он уже был протестирован. ThéoChampion, если это ваш пользовательский компонент, протестируйте его отдельно
@ShubhamKhatri Да, но мой компонент должен быть обернут apolloProvider, чтобы иметь возможность рендеринга (authFormContainer - потребитель)
@ ThéoChampion, я хотел сказать, что если вы хотите протестировать функцию в AuthFormContainer, вам нужно написать тестовые примеры для этого компонента вместо того, чтобы писать его для компонента, который отображает ApolloProvider
@ShubhamKhatri Написание тестов для AuthFormContainer - вот что я пытаюсь сделать здесь
Можете ли вы показать, как выглядит ваш AuthFormContainer и как вы написали тесты
Ответы 4
Попробуйте find(ApolloProvider).dive() - и console.info его, чтобы увидеть дерево внутри.
если я это сделаю, я получу TypeError: wrapper.find(...).dive is not a function, хоть какое-то представление о том, что происходит?
кто ты обертка?
ты найдешь wrapper.find(ApolloProvider)?
Да, это вернет мне ReactWrapper { length: 1 }
взгляните на этот airbnb.io/enzyme/docs/api/ShallowWrapper/dive.html, возможно, вы что-то упустили.
Метод dive можно использовать только с мелким рендерингом, который у меня не работает, так как я обязан обернуть свой компонент в провайдеры контекстов.
В одном случае используйте неглубокое и одноразовое крепление. Два отдельных теста.
если я делаю const wrapper = shallow(<AuthFormContainer />);, то console.info(wrapper.instance()) вернет null, есть идеи, что не так?
попробуйте const wrapper = shallow( <ApolloProvider client = {client}> <MemoryRouter initialEntries = {["/login"]}> <AuthFormContainer /> </MemoryRouter> </ApolloProvider> );
Это вернет мне экземпляр ApolloProvider ReactComponent
насчет реквизита find(ApolloProvider).props()
Да, это вернет мне реквизит ApolloProvider
Стоит ли копаться в детских реквизитах ApolloProvider, чтобы нырять? Кажется немного взломанным
TypeError: wrapper.find (...). Dive не является функцией. Если это ошибка, которую вы получаете, то это может быть связано с тем, что вы используете mount вместо shallow.
Для компонентов React вы всегда пишете Единичные тесты. Согласно этому ответу: https://stackoverflow.com/a/652382/2873331:
Unit testing simply verifies that individual units of code (mostly functions) work as expected...
Итак, здесь вы должны попробовать проверить функциональность AuthFormContainer, а не то, правильно ли реагирующий маршрутизатор и клиент apollo вводят контекст. Ваш тестовый пример должен проверять: учитывая, что context - AuthFormContainer, работают ли его методы экземпляра должным образом или нет.
Чтобы ввести контекст, вы можете использовать метод Enzyme мелкий.
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.
При модульном тестировании вам не следует беспокоиться о других компонентах. Но при необходимости можно использовать неглубокий рендеринг. Вот что я сделал:
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();
Всегда тестируйте компонент оболочки иначе, чем подключенный компонент. Экспорт компонента оболочки и импорт в тестовый файл и тестирование, как вы делаете, но неглубоко (я предпочитаю)
вам следует написать отдельный тестовый пример для AuthFormContainer