J'ai un composant comme ça:
<Parent>
<Child/>
</Parent>
et <Child/>
composant ont une méthode foo
. Je veux tester la méthode foo
mais je ne sais pas comment y accéder. J'ai essayé:
mount(<Parent><Child/></Parent>).props().children.foo
ou
mount(<Parent><Child/></Parent>).children().foo
mais les deux sont undefined
. Je ne peux pas utiliser .instance()
car ce n'est pas root. Je ne peux pas monter <Child/>
uniquement parce que le <Parent>
ajoute quelque chose (context.router
de react-routeur) sur context
et j'en ai besoin quand init <Child/>
. Une idée avec ça?
J'envisagerais de rédiger des tests uniquement pour votre classe parent, puis un fichier de test séparé pour tester uniquement votre enfant.
Une fois que vous avez monté votre composant en utilisant:
const component = mount(<Child>);
vous avez alors accès à ses méthodes en utilisant:
component.instance().methodname
Vous pouvez ensuite faire des choses comme écrasez le avec jest.fn () et effectuez un test approprié.
Je préfère une monture peu profonde à une monture complète en enzyme.
En conjonction avec proxyquire pour résoudre le composant enfant (que vous souhaitez tester)
wrapper.find('Child1').props().propName
Et le tester.
Ou j'utilise peu profonde
mount wrapper.dive()
Je pense que votre problème est très différent de la façon de tester les composants enfants.
Ma première question est la suivante: pourquoi vérifiez-vous si un composant enfant a une méthode spécifique dans les tests de composant du parent?
IMHO vous devez avoir un test spécifique pour ce composant et ensuite, dans ce test, vous vérifiez si la méthode existe.
Juste pour ne pas partir sans la réponse, avez-vous essayé .find(Child).instance().foo
?
Je pouvais avoir un aperçu de la fonction enfant comme ci-dessous, je cherchais le premier enfant à appeler la fonction -
const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()
J'ai eu un problème similaire en essayant de simuler une fonction sur un composant interne d'un MemoryRouter:
cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId } appointment={ availability } /></MemoryRouter>);
J'ai fini par pouvoir me moquer de la fonction comme ceci:
const mockFn = jest.fn();
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;
Cela a fonctionné pour moi:
mount(<Parent><Child/></Parent>).find(Child).instance().foo
J'ai rencontré un problème similaire et j'ai parcouru l'API mount
en me connectant. Dans mon cas d'utilisation, mon composant enfant (CommonStoresReactions) est encapsulé avec mobx inject
.
const jsx = (
<Provider {...stores}>
<CommonStoresReactions>
<div />
</CommonStoresReactions>
</Provider>
)
const wrapper = mount(jsx)
Je veux tester la méthode clearStores
dans CommonStoresReactions
. L'extrait ci-dessous a fonctionné pour moi.
wrapper
.find(CommonStoresReactions)
.instance()
.wrappedInstance.clearStores()