Wie man React-Komponenten-Methoden mit Spaß und Enzym verspottet

Lesezeit: 3 Minuten

Benutzeravatar von Miha Šušteršič
Miha Šušteršič

Ich habe eine Reaktionskomponente (dies ist vereinfacht, um das Problem zu demonstrieren):

class MyComponent extends Component {
    handleNameInput = (value) => {
        this.searchDish(value);
    };

    searchDish = (value) => {
      //Do something
    }

    render() {
        return(<div></div>)
    }
}

Das will ich jetzt testen handleNameInput() Anrufe searchDish mit dem angegebenen Wert.

Dazu möchte ich eine erstellen Scherz-Mock-Funktion die die Komponentenmethode ersetzt.

Hier mein bisheriger Testfall:

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.searchDish = jest.fn();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.searchDish).toBeCalledWith('BoB');
})

Aber alles, was ich in der Konsole bekomme, ist SyntaxError:

Syntax-Fehler

  at XMLHttpRequest.open (node_modules/jsdom/lib/jsdom/living/xmlhttprequest.js:458:15)
  at run_xhr (node_modules/browser-request/index.js:215:7)
  at request (node_modules/browser-request/index.js:179:10)
  at DishAdmin._this.searchDish (src/main/react/components/DishAdmin.js:155:68)
  at DishAdmin._this.handleNameInput (src/main/react/components/DishAdmin.js:94:45)
  at Object.<anonymous> (src/main/react/tests/DishAdmin.test.js:122:24)

Meine Frage ist also, wie ich Komponentenmethoden mit Enzymen richtig verspotte?

  • Was ist der Syntaxfehler?

    – David Newton

    24. Januar 2017 um 14:16 Uhr

  • Zur Frage hinzugefügt 🙂

    – Miha Šušteršič

    24. Januar 2017 um 14:17 Uhr

  • Ohne genau zu wissen, was die Quelle ist, ist es unmöglich zu helfen – ich sehe keine Syntaxfehler in dem von Ihnen geposteten Code.

    – David Newton

    24. Januar 2017 um 15:10 Uhr

  • der Syntaxfehler kommt von wrapper.searchDish = jest.fn(); Nach dem Ändern dieser Zeile erscheint der Fehler nicht mehr, daher vermute ich, dass die Mock-Funktion nicht richtig zugewiesen wird. Aber ich weiß nicht, was der richtige Weg ist und ob dieser überhaupt verfügbar ist. Daher die Frage

    – Miha Šušteršič

    24. Januar 2017 um 15:26 Uhr

  • Ich verstehe nicht, warum eine Funktion namens searchDish wird hier angerufen. Im Beispiel gibt es keine Methode mit diesem Namen. Wie kamen wir von searchValue() zu searchDish()?

    – Flugass

    28. März 2018 um 14:20 Uhr

Benutzeravatar von Miha Šušteršič
Miha Šušteršič

Die Methode kann auf diese Weise verspottet werden:

it('handleNameInput', () => {
   let wrapper = shallow(<MyComponent/>);
   wrapper.instance().searchDish = jest.fn();
   wrapper.update();
   wrapper.instance().handleNameInput('BoB');
   expect(wrapper.instance().searchDish).toBeCalledWith('BoB');
})

Sie müssen auch .update auf dem Wrapper der getesteten Komponente aufrufen, um die Scheinfunktion ordnungsgemäß zu registrieren.

Der Syntaxfehler kam von der falschen Zuweisung (Sie müssen die Methode der Instanz zuweisen). Meine anderen Probleme kamen daher, dass ich nicht anrief .update() nachdem er die Methode verspottet hat.

  • Bei mir wirft es und Fehler mit expect(wrapper.searchDish) – keine Scheinfunktion oder Spion. Nur wenn ich umschalte expect(wrapper.instance().searchDish) es funktioniert richtig.

    – Nik Sumeiko

    15. August 2017 um 16:25 Uhr


  • @NikSumeiko, auch wenn ich den gleichen Fehler bekam, habe ich die Scheinfunktion in einer Variablen gespeichert und überprüft toBeCalledWith auf diesem: const searchDishMock = jest.fn(); ... expect(searchDishMock).toBeCalledWith('BoB');

    – Yusufali2205

    14. September 2017 um 21:14 Uhr


  • Wenn wrapper.update(); geht nicht, kannst du auch versuchen wrapper.instance().forceUpdate();

    – Sir.Nathan Stassen

    1. März 2018 um 23:48 Uhr

  • @mojave es funktioniert, wenn Sie manuell anrufen componentDidMount über wrapper.instance().componentDidMount()

    – Däne Jordan

    31. Dezember 2018 um 23:24 Uhr


  • HINWEIS: Bei React 16 und höher gibt instance() null für zustandslose funktionale Komponenten zurück. Dokumente

    – Filipe Madureira

    19. Oktober 2019 um 16:47 Uhr


Alehs Benutzeravatar
Aleh

Muss ersetzt werden wrapper.update(); mit wrapper.instance().forceUpdate();

@ Mihas Antwort funktionierte mit einer kleinen Änderung:

it('handleNameInput', () => {
  let wrapper = shallow(<MyComponent/>);
  const searchDishMock = jest.fn();
  wrapper.instance().searchDish = searchDishMock;
  wrapper.update();
  wrapper.instance().handleNameInput('BoB');
  expect(searchDishMock).toBeCalledWith('BoB');
})

  • Funktioniert das noch? Ich verwende React 16 und Enzym 3.3.0, aber der Test besteht nicht. Neben dem Enzym Dokument scheint das nicht zu suggerieren update kann die Mock-Funktion registrieren.

    – Jaobin

    6. Juli 2018 um 3:23 Uhr

  • Das brauchst du nicht wrapper.update() um die Tests zu bestehen.

    – Jaobin

    11. Juli 2018 um 3:58 Uhr

  • Weiß jemand, wie man das mit React Test Library macht?

    – Ognjen Mišić

    13. Oktober 2021 um 7:57 Uhr

1403750cookie-checkWie man React-Komponenten-Methoden mit Spaß und Enzym verspottet

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

Privacy policy