React: TestUtils.renderIntoDocument gibt "null" zurück, wenn eine gültige Funktionskomponente übergeben wurde.

Erstellt am 10. Apr. 2019 · 4Kommentare · Quelle: facebook/react

Möchten Sie eine Funktion anfordern oder einen Fehler melden?
Ich möchte einen Fehler melden.

Wie ist das aktuelle Verhalten?
Derzeit wird eine gültige Funktionskomponente an TestUtils.renderIntoDocument übergeben , die eine Null zurückgibt und keinen Fehler auslöst .

Demo
Dieses Verhalten wurde in einer Sandbox reproduziert: https://codesandbox.io/s/1zpvll4j24

Überprüfen Sie die Konsole, um die TestUtils.renderIntoDocument- Ausgabe der vorbereiteten Beispielkomponenten

Problemumgehungen
Problemumgehung, die sowohl SFC als auch FC erfüllt, besteht darin, die Komponente in einen Container zu verpacken:

const FCCounter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};

TestUtils.renderIntoDocument(
  <div>
    <FCCounter />
  </div>
);

Was ist das erwartete Verhalten?

So rendern Sie eine Funktionskomponente.
Im schlimmsten Fall - Fehler angeben.

Welche Versionen von React sind von diesem Problem betroffen?
Reaktionsversion: 16.8.6

Test Utils Question

Quelle

DeividasBakanas

Alle 4 Kommentare

Funktionskomponenten haben keine instances . Was würden Sie also erwarten?

TestUtils.renderIntoDocument(<FCCounter/>)

zurückgeben?

Können Sie im Großen und Ganzen auch erklären, was Sie versuchen zu tun? Sie könnten forwardRef / useImperativeHandle (https://reactjs.org/docs/hooks-reference.html#useimperativehandle) verwenden, um Zugriff auf interne 'Methoden' zu erhalten, aber ich bin gespannt, was Sie versuchen überhaupt zu testen.

threepointone am 11. Apr. 2019

Nachdem ich TestUtils.renderIntoDocument mit klassischer Komponente aufgerufen habe, bin ich voll aktiviert, um state , props und die Komponente mit setState manipulieren. Was ich also erwartet habe, dass TestUtils.renderIntoDocument zurückkommt, ist ein Objekt, mit dem ich state , props und setState .

Ich versuche Komponenten zu testen, die als Funktionskomponenten implementiert sind. Das Hauptziel besteht darin, den Status der Komponente zu ändern und zu überprüfen, ob der geänderte Status mit dem vom Test erwarteten Status übereinstimmt.

Im Falle eines Tests habe ich die Voraussetzung, dass Komponenten so getestet werden, wie sie sind, und nicht geändert werden sollten, um den Code speziell zu Testzwecken zu enthalten. Das Ändern der Komponente selbst zur Verwendung von forwardRef/useImperativeHandle ist daher keine Option.

DeividasBakanas am 12. Apr. 2019

@DeividasBakanas Funktionskomponenten haben keine Instanzen. Sie könnten die Schaltfläche auslösen, die den Status durch Auslösen eines Ereignisses aktualisiert. Meiner Meinung nach ist dies auch ein besserer Ansatz als der Versuch, die von TestUtils.renderIntoDocument Instanz unbedingt zu aktualisieren (im Fall von Klassenkomponenten).

trueadm am 13. Apr. 2019

👍1

Wie bei @trueadm erwähnt, empfehlen wir nicht, Implementierungsdetails der Komponente selbst zu testen und Requisiten / Ereignisse zu verwenden, um Aktualisierungen auszulösen und Zusicherungen für die Komponentenausgabe vorzunehmen. Ich könnte Bibliotheken wie die React-Testing-Bibliothek https://github.com/kentcdodds/react-testing-library empfehlen, um dies ein bisschen einfacher zu machen. Kent schreibt auch ausführlich über das Thema, würde empfehlen.

Schließen dieses Problems, da es sich eher um eine Verwendungsfrage als um eine Fehler- / Funktionsanforderung handelt.

threepointone am 15. Apr. 2019

👍1

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

React: TestUtils.renderIntoDocument gibt "null" zurück, wenn eine gültige Funktionskomponente übergeben wurde.

Alle 4 Kommentare

Verwandte Themen