web-dev-qa-db-fra.com

Comment tester la méthode du composant enfant avec Enzyme?

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?

javascriptreactjsreact-routerenzyme
21
Fomahaut

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é.

3
rnmalone

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()
1
Pawan Gangwani

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?

1
Arthur Almeida

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()
0
andy mccullough

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;
0
pmaher

Cela a fonctionné pour moi:

mount(<Parent><Child/></Parent>).find(Child).instance().foo
0
jackocnr

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()
0
Anesh