webentwicklung-frage-antwort-db.com.de

Wie teste ich die Methode der Kindkomponenten mit Enzyme?

Ich habe eine solche Komponente:

<Parent>
  <Child/>
</Parent>

und <Child/> Komponente haben eine Methode foo. Ich möchte die foo-Methode testen, weiß aber nicht, wie ich darauf zugreifen kann. Ich habe es versucht:

mount(<Parent><Child/></Parent>).props().children.foo

oder

mount(<Parent><Child/></Parent>).children().foo

aber beide sind undefined. Ich kann .instance() nicht verwenden, da es nicht root ist. Ich kann <Child/> nur deshalb nicht mounten, weil <Parent> etwas (context.router von reactrouter) auf context hinzufügt und ich brauche sie bei init <Child/>. Irgendeine Idee dazu?

21
Fomahaut

Ich würde das Schreiben von Tests nur für Ihre übergeordnete Klasse in Betracht ziehen und dann eine separate Testdatei, um nur Ihr Kind zu testen.

Nachdem Sie Ihre Komponente montiert haben, verwenden Sie:

const component = mount(<Child>); 

sie haben dann Zugriff auf ihre Methoden mit:

component.instance().methodname

Sie können dann Sachen machen, indem Sie es mit jest.fn () überschreiben und entsprechend testen.

3
rnmalone

Ich bevorzuge die flache Montierung gegenüber der vollen Montierung von Enzym.

In Verbindung mit proxyquire zur Auflösung der untergeordneten Komponente (die Sie testen möchten) .__ 

wrapper.find('Child1').props().propName

Und teste es.

Oder ich benutze flach 

mount wrapper.dive()
1
Pawan Gangwani

Ich denke, Ihr Problem unterscheidet sich deutlich davon, wie Sie untergeordnete Komponenten testen.

Meine erste Frage lautet: Warum prüfen Sie, ob eine untergeordnete Komponente eine bestimmte Methode in den Komponententests der übergeordneten Komponente hat?

IMHO müssen Sie einen für diese Komponente spezifischen Test haben und dann in diesem Test prüfen, ob die Methode vorhanden ist.

Nur um die Antwort nicht zu verlassen, haben Sie .find(Child).instance().foo versucht?

1
Arthur Almeida

Ich war in der Lage, die Kindfunktion wie die folgende in den Griff zu bekommen, ich suchte nach dem ersten Kind, das die Funktion aufruft - 

const component = shallow(<Component />);
component.find(Child).first().getNode().props.someChildFunction()
0
andy mccullough

Ich hatte ein ähnliches Problem, als ich versuchte, eine Funktion einer inneren Komponente in einem MemoryRouter zu simulieren:

cont wrapper = mount(<MemoryRouter><AvailabilityButtonWithRouter.WrappedComponent vetId={ vetId  } appointment={ availability } /></MemoryRouter>);     

Am Ende konnte ich die Funktion so simulieren:

const mockFn = jest.fn();    
wrapper.children(0).children(0).instance().reloadCurrentPage = mockFn;
0
pmaher

Das hat für mich funktioniert:

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

Ich war mit einem ähnlichen Problem konfrontiert und habe beim Protokollieren die mount-API durchlaufen. In meinem Anwendungsfall wird meine untergeordnete Komponente (CommonStoresReactions) mit mobx inject umschlossen. 

const jsx = (
    <Provider {...stores}>
      <CommonStoresReactions>
        <div />
      </CommonStoresReactions>
    </Provider>
)
const wrapper = mount(jsx)

Ich möchte die clearStores-Methode in CommonStoresReactions testen. Unten arbeitete der Ausschnitt für mich.

wrapper
      .find(CommonStoresReactions)
      .instance()
      .wrappedInstance.clearStores()
0
Anesh