Jest Enzyme testet eine React-Komponente, die in der Render-Methode null zurückgibt

Lesezeit: 3 Minuten

Benutzeravatar von klugjo
Klugjo

Ich habe eine Komponente, die unter bestimmten Bedingungen beim Rendern null zurückgibt:

render() {
  if (this.props.isHidden) {
      return null;
  }

  return <div>test</div>;
}

Ich möchte überprüfen, ob die Komponente null ist, wenn isHidden mit Scherz und Enzym wahr ist:

describe('myComp', () => {
    it('should not render if isHidden is true', () => {
        const comp = shallow(<myComp isHidden={true} />);
        expect(comp.children().length).toBe(0);
    });
});

Das funktioniert, aber gibt es eine idiomatischere Art, diesen Test zu schreiben? Das Testen auf Komponenten, die als null gerendert werden, ist ein recht häufiges Szenario.

Benutzeravatar von Benjamin Intal
Benjamin Intal

ShallowWrapper hat ein isEmptyRender() Funktion:

expect(comp.isEmptyRender()).toBe(true)

  • Beste Antwort in meinen Augen.

    – Hinrich

    19. März 2020 um 14:50 Uhr

  • @klugjo – das ist eine bessere Antwort als die akzeptierte Antwort. Können Sie die akzeptierte Antwort ändern?

    – Tom

    27. Mai 2021 um 17:48 Uhr

  • Diese Antwort vermittelt am besten den Inhalt des Tests und testet gleichzeitig das Ergebnis genau.

    – Matt S

    20. Juli 2021 um 6:22 Uhr

Benutzeravatar von Abdennour TOUMI
Abdennour TOUMI

expect(comp.type()).toEqual(null)

Das ist es!

oder:

expect(comp.get(0)).toBeFalsy()

  • Vielleicht ist es ein Artefakt von mount gegen shallowaber das hat bei mir nicht funktioniert, musste ich mir anschauen comp.html() wie von @shoaib-nawaz beschrieben.

    – shawkinaw

    26. Dezember 2018 um 23:08 Uhr


  • expect(comp.get(0)).toBeFalsy() hat funktioniert Für mich. expect(comp.type()).toEqual(null)tat nicht.

    – Skromak

    24. Februar 2019 um 19:58 Uhr

Benutzeravatar von Shoaib Nawaz
Schoaib Nawaz

Entsprechend ShallowWrapper::html Implementierung gibt es null zurück, wenn der Komponenteninstanztyp null ist, als Ergebnis von render.

expect(comp.html()).toBeNull();

  • Dieses Code-Snippet kann zwar das Problem lösen, erklärt aber nicht, warum oder wie es die Frage beantwortet. Bitte Fügen Sie eine Erklärung für Ihren Code hinzu, da dies wirklich dazu beiträgt, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für zukünftige Leser beantworten und diese Personen die Gründe für Ihren Codevorschlag möglicherweise nicht kennen.

    – Lukas Kiebel

    26. September 2018 um 19:26 Uhr

  • mit Chai, expect(comp.html()).to.eq('') hat bei mir funktioniert

    – Hose

    1. Juli 2019 um 13:37 Uhr

  • Das hat bei mir nicht funktioniert, comp.html() gab in meinem Fall eine leere Zeichenfolge zurück.

    – Hinrich

    19. März 2020 um 14:51 Uhr

Wir verwenden Folgendes mit Jest-Enzym

expect(comp).toBeEmptyRender()

Wie in der Lösung von Benjamin Intal erwähnt, habe ich versucht, sie zu verwenden myComponent.isEmptyRender()aber es kehrte unerwartet zurück falsewenngleich myComponent.children().length gab 0 zurück.

Das Problem stellte sich heraus myComponent kam von einem Anruf zu .find() auf einer anderen flach gerenderten Komponente. In dieser Situation ein extra Anruf an .shallow() auf der gefundenen untergeordneten Komponente ist notwendig, um zu erhalten isEmptyRender() richtig arbeiten:

const parentComponent = shallow(<MyParentComponent isMyChildHidden={true} />);
const childComponent = parentComponent.find('MyChildComponent');

expect(childComponent.shallow().isEmptyRender()).toBe(true);

Bezug: https://github.com/enzymejs/enzyme/issues/1278

  • Für mich anrufen seicht() bei nicht vorhandenem untergeordneten Ergebnis: „Methode „flach“ soll auf 1 Knoten ausgeführt werden. Stattdessen wurde 0 gefunden.“ Expect(childComponent.isEmptyRender()).toBe(true) funktioniert einwandfrei. Enzym@^3.11.0 & Jest-Enzym@^7.1.2

    – Pgarr

    9. Dezember 2021 um 10:24 Uhr

  • Für mich anrufen seicht() bei nicht vorhandenem untergeordneten Ergebnis: „Methode „flach“ soll auf 1 Knoten ausgeführt werden. Stattdessen wurde 0 gefunden.“ Expect(childComponent.isEmptyRender()).toBe(true) funktioniert einwandfrei. Enzym@^3.11.0 & Jest-Enzym@^7.1.2

    – Pgarr

    9. Dezember 2021 um 10:24 Uhr

1430820cookie-checkJest Enzyme testet eine React-Komponente, die in der Render-Methode null zurückgibt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy