Eine Anleitung zum Testen von Reaktionen Komponenten

Key Takeaways

• reagierte Komponenten sind aufgrund ihrer Objektzusammensetzung und -beziehungen von Natur aus prüfbar, und sie verlassen sich nicht auf die Vererbung, um wiederverwendbare Komponenten zu erstellen, wodurch das Test erleichtert wird.
• Das flache Renderer -Dienstprogramm in React ermöglicht die isolierte Einheitsprüfung einer einzelnen Komponente, ohne dass ein DOM erforderlich ist, um schnelle, fokussierte Tests zu ermöglichen.
• Die JSX -Syntax in React ermöglicht das Bestehen in verschiedenen JavaScript -Typen wie Booleschen und Rückrufe, was die Prüfung von Komponenten in verschiedenen Zuständen erleichtert.
• Um Komponenten zu testen, die mit anderen Komponenten verflochten sind oder von anderen Komponenten abhängig sind, sollten sich Unit -Tests auf die Ausgabe und die Wechselwirkungen der Komponente konzentrieren und nicht auf ihre Implementierungsdetails.
• Tools wie Scherz und Enzym werden zum Testen von React -Komponenten empfohlen und bieten nützliche Funktionen wie „flaches Rendering“ und Mockfunktionen zum Erstellen realistischer Testszenarien.

reagt ist ein Rahmen, der in der JavaScript -Entwicklergemeinschaft Fortschritte gemacht hat. React verfügt über einen leistungsstarken Kompositionsgerüst zum Entwerfen von Komponenten. React -Komponenten sind Bits mit wiederverwendbarem Code, die Sie in Ihrer Webanwendung betreiben können.

React -Komponenten sind nicht eng von der DOM gekoppelt, aber wie einfach sind sie zu Unit -Tests? Lassen Sie uns in dieser Einstellung untersuchen, was für Unit -Test -React -Komponenten erforderlich ist. Ich werde den Denkprozess für die Prüfung Ihrer Komponenten zeigen.

Denken Sie daran, ich spreche nur von Unit -Tests, die eine besondere Art von Test sind. (Weitere Informationen zu den verschiedenen Arten von Tests empfehlen Ihnen, „JavaScript -Tests: Einheit vs funktional vs Integrationstests“ zu lesen.)

Mit Unit-Tests interessiere ich mich für zwei Dinge: schnelle und sprechende Feedback. Damit kann ich durch Veränderungen mit einem hohen Maß an Vertrauen und Codequalität wiederholt werden. Dies gibt Ihnen ein Maß an Sicherheit, dass Ihre React -Komponenten nicht im Browser tot landen. Wenn Sie in der Lage sind, ein gutes Feedback in einer schnellen Geschwindigkeit zu erhalten

Für die Demo machen wir eine Liste der großen Affen, die über ein Kontrollkästchen filterbar ist. Sie finden die gesamte Codebasis auf GitHub. Aus Gründen der Kürze zeige ich nur die von Interesse sind Code -Muster. In diesem Artikel wird ein Arbeitsniveau mit React -Komponenten angenommen.

Wenn Sie den Demo -Beispielcode herunterladen und ausführen, sehen Sie eine solche Seite:

Testable -Komponenten

schreiben

In React ist ein guter Ansatz, mit einer Hierarchie von Komponenten zu beginnen. Das Prinzip der einzigen Verantwortung fällt beim Aufbau jeder einzelnen Komponente in den Sinn. React -Komponenten verwenden Objektzusammensetzung und Beziehungen.

für die Liste der großen Affen, zum Beispiel habe ich diesen Ansatz:

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

Schauen Sie sich an, wie eine großartige APE -Liste viele großartige APE -Zeilen mit Daten hat. React -Komponenten verwenden dieses Kompositionsdatenmodell und es ist auch prüfbar.

In React -Komponenten vermeiden Sie die Vererbung zum Erstellen wiederverwendbarer Komponenten. Wenn Sie aus einem klassischen, objektorientierten Programmierhintergrund stammen, denken Sie daran. React -Komponenten kennen ihre Kinder nicht im Voraus. Testen von Komponenten, die von einer langen Kette von Vorfahren herabsteigen, kann ein Albtraum sein.

Ich werde Sie die filterableGreatapelist selbst erkunden lassen. Es handelt sich um eine React -Komponente mit zwei getrennten Komponenten, die hier von Interesse sind. Fühlen Sie sich frei, die damit verbundenen Einheitstests zu erkunden.

Um eine Testable GreatapesearchBar zu erstellen, tun Sie dies beispielsweise:

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form>></form></span>
</span><span>        <span><span><input>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></label></span>Only show extant species<span><span></span>></span>
</span><span>      <span><span></span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span></span></span></span>

Diese Komponente verfügt über ein Kontrollkästchen mit einem Etikett und wird ein Klick -Ereignis hochgedreht. Dieser Ansatz ist Ihnen möglicherweise bereits allzu vertraut, was eine sehr gute Sache ist.

Beachten Sie, dass mit React -Testablenkomponenten bei React kostenlos direkt außerhalb der Box kommen. Hier gibt es nichts Besonderes - einen Event -Handler, JSX und eine Render -Methode.

Die nächste React -Komponente in der Hierarchie ist der Greatapelist, und es sieht so aus:

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><greataperow> key<span>={ape.name}</span> ape<span>={ape}</span> /></greataperow></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><greataperow> key<span>={ape.name}</span> ape<span>={ape}</span> /></greataperow></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div>>
<span>        {rows}
</span><span>      <span><span></span></span></span>
</div></span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span></span></span>

Es handelt sich um eine React -Komponente, die die Greataperow -Komponente hat und die Objektzusammensetzung verwendet. Dies ist das leistungsstärkste Kompositionsmodell von React bei der Arbeit. Beachten Sie den Mangel an Vererbung beim Erstellen wiederverwendbarer und dennoch prüfbarer Komponenten.

In der Programmierung ist Objektzusammensetzung ein Entwurfsmuster, das datengesteuerte Elemente ermöglicht. Um es anders zu denken, hat ein Greatapelist viele Greataperow -Objekte. Es ist diese Beziehung zwischen UI -Komponenten, die das Design antreiben. React -Komponenten haben diese Denkweise eingebaut. Diese Art der UI -Elemente ermöglicht es Ihnen, einige nette Unit -Tests zu schreiben.

Hier finden Sie die Flagge this.props.showextantonly, die aus dem Kontrollkästchen stammt. Diese Showextantonly -Eigenschaft wird den Event -Handler in GreatapesearchBar durchgesetzt.

Wie können Sie für Unit -Tests die Reaktionskomponenten für Unit -Tests von anderen Komponenten abhängen? Wie wäre es mit Komponenten, die miteinander verflochten sind? Dies sind großartige Fragen, die Sie berücksichtigen sollten, wenn wir uns bald testen. React -Komponenten können noch Geheimnisse haben, die man freischalten kann.

Schauen wir uns vorerst die Greataperow an, in der die großartigen APE -Daten untergebracht sind:

<span>class GreatApeRow extends Component {
</span>  <span>render() {
</span>    <span>return (
</span>      <span><span><span><div>>
<span>        <span><span><img  alt="Eine Anleitung zum Testen von Reaktionen Komponenten" >
</span></span><span>          <span>className<span>="GreatApeRow-image"</span>
</span></span><span>          <span>src<span>={this.props.ape.image}</span>
</span></span><span>          <span>alt<span>={this.props.ape.name}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><p> className<span>="GreatApeRow-detail"</span>></p></span>
</span><span>          <span><span><b>></b></span>Species:<span><span></span>></span> {this.props.ape.name}
</span><span>        <span><span></span>></span>
</span><span>
</span><span>        <span><span><p> className<span>="GreatApeRow-detail"</span>></p></span>
</span><span>          <span><span><b>></b></span>Age:<span><span></span>></span> {this.props.ape.age}
</span><span>        <span><span></span>></span>
</span><span>      <span><span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Bei React -Komponenten ist es praktisch, jedes UI -Element mit einem Laserfokus auf ein einzelnes Problem zu isolieren. Dies hat wichtige Vorteile, wenn es um Unit -Tests geht. Solange Sie sich an dieses Entwurfsmuster halten, finden Sie es nahtlos, Unit -Tests zu schreiben.

Test Utilities

Lassen Sie uns unsere größte Sorge beim Testen von React -Komponenten zusammenfassen. Wie teste ich eine einzelne Komponente isoliert? Wie sich herausstellt, gibt es ein raffiniertes Dienstprogramm, mit dem Sie dies tun können.

Der flache Renderer in React ermöglicht es Ihnen, eine Komponente eine Ebene tief zu machen. Aus diesem Grund können Sie Fakten darüber geltend machen, was die Render -Methode tut. Bemerkenswert ist, dass kein Dom erforderlich ist.

Mit ES6 verwenden Sie es wie folgt:

FilterableGreatApeList
|_ GreatApeSearchBar
|_ GreatApeList
   |_ GreatApeRow

Damit Unit -Tests schnell ausgeführt werden können, benötigen Sie eine Möglichkeit, Komponenten isoliert zu testen. Auf diese Weise können Sie sich auf ein einzelnes Problem konzentrieren, es testen und zum nächsten Anliegen übergehen. Dies wird ermächtigt, wenn die Lösung wächst und Sie in der Lage sind, nach Belieben wieder aufzunehmen - in der Nähe des Codes zu bleiben, schnelle Änderungen vorzunehmen und die Gewissheit zu erlangen, wird es in einem Browser funktionieren.

Ein Vorteil dieses Ansatzes ist, dass Sie besser über den Code nachdenken. Dies erzeugt die beste Lösung, die sich mit dem vorliegenden Problem befasst. Ich finde es befreiend, wenn Sie nicht an Ablenkungen gekettet sind. Das menschliche Gehirn leistet einen schrecklichen Job beim Umgang mit mehr als einem Problem.

Die einzige Frage ist, wie weit dieses kleine Dienstprogramm uns mit React -Komponenten führen kann?

pass alles zusammen

Schauen Sie sich zum Beispiel die Greatapelist an. Was ist das Hauptanliegen, das Sie lösen möchten? Diese Komponente zeigt Ihnen eine Liste von großartigen Affen basierend auf einem Filter.

Ein wirksamer Unit -Test besteht darin, eine Liste zu bestehen und Fakten darüber zu überprüfen, was diese React -Komponente tut. Wir möchten sicherstellen, dass es die großen Affen basierend auf einer Flagge filtert.

Ein Ansatz besteht darin, dies zu tun:

<span>class GreatApeSearchBar extends Component {
</span>  <span>constructor(props) {
</span>    <span>super(props);
</span>
    <span>this.handleShowExtantOnlyChange = this.handleShowExtantOnlyChange.bind(this);
</span>  <span>}
</span>
  <span>handleShowExtantOnlyChange(e) {
</span>    <span>this.props.onShowExtantOnlyInput(e.target.checked);
</span>  <span>}
</span>
  <span>render() {
</span>    <span>return(
</span>      <span><span><span><form>></form></span>
</span><span>        <span><span><input>
</span></span><span>          <span>id<span>="GreatApeSearchBar-showExtantOnly"</span>
</span></span><span>          <span>type<span>="checkbox"</span>
</span></span><span>          <span>checked<span>={this.props.showExtantOnly}</span>
</span></span><span>          <span>onChange<span>={this.handleShowExtantOnlyChange}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><label> htmlFor<span>="GreatApeSearchBar-showExtantOnly"</span>></label></span>Only show extant species<span><span></span>></span>
</span><span>      <span><span></span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span></span></span></span>

Beachten Sie, dass ich React -Komponenten mit Scherz teste. Weitere Informationen zu diesem finden

In JSX schauen Sie sich showextantonly = {true} an. Mit der JSX -Syntax können Sie einen Status auf Ihre React -Komponenten einstellen. Dies eröffnet viele Möglichkeiten für Einheitstestkomponenten, die einen bestimmten Zustand haben. JSX versteht grundlegende JavaScript -Typen, so

Wie wäre es mit der GreatapesearchBar mit der Liste aus dem Weg? Es hat diesen Event -Handler in der Onchange -Immobilie, die von Interesse sein könnte.

Ein guter Unit -Test ist dies:

Um Ereignisse zu behandeln und zu testen, verwenden Sie die gleiche flache Rendering -Methode. Die GetRenderoutput -Methode ist nützlich, um Rückruffunktionen an Komponenten mit Ereignissen zu binden. Hier erhält die Eigenschaft onShowextantonlyInput die Rückruf -OnChange -Funktion.

<span>class GreatApeList extends Component {
</span>  <span>render() {
</span>    <span>let rows = [];
</span>
    <span>this.props.apes.forEach((ape) => {
</span>      <span>if (!this.props.showExtantOnly) {
</span>        rows<span>.push(<span><span><greataperow> key<span>={ape.name}</span> ape<span>={ape}</span> /></greataperow></span>);
</span>
        <span>return;
</span>      <span>}
</span>
      <span>if (ape.isExtant) {
</span>        rows<span>.push(<span><span><greataperow> key<span>={ape.name}</span> ape<span>={ape}</span> /></greataperow></span>);
</span>      <span>}
</span>    <span>});
</span>
    <span>return (
</span>      <span><span><span><div>>
<span>        {rows}
</span><span>      <span><span></span></span></span>
</div></span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span></span></span>

Was ist mit der Greataperow React -Komponente bei einem trivialeren Unit -Test? Es zeigt großartige APE -Informationen mithilfe von HTML -Tags an. Es stellt sich heraus, dass Sie den flachen Renderer auch verwenden können, um diese Komponente zu testen.

Stellen wir zum Beispiel sicher, dass wir ein Bild rendern:

Bei React -Komponenten dreht sich alles um die Render -Methode. Dies macht es etwas intuitiv, genau zu wissen, was Sie testen müssen. Ein flacher Renderer macht es so, dass Sie sich auf eine einzelne Komponente konzentrieren können, während Sie Rauschen beseitigen.

<span>class GreatApeRow extends Component {
</span>  <span>render() {
</span>    <span>return (
</span>      <span><span><span><div>>
<span>        <span><span><img  alt="Eine Anleitung zum Testen von Reaktionen Komponenten" >
</span></span><span>          <span>className<span>="GreatApeRow-image"</span>
</span></span><span>          <span>src<span>={this.props.ape.image}</span>
</span></span><span>          <span>alt<span>={this.props.ape.name}</span>
</span></span><span>        <span>/></span>
</span><span>
</span><span>        <span><span><p> className<span>="GreatApeRow-detail"</span>></p></span>
</span><span>          <span><span><b>></b></span>Species:<span><span></span>></span> {this.props.ape.name}
</span><span>        <span><span></span>></span>
</span><span>
</span><span>        <span><span><p> className<span>="GreatApeRow-detail"</span>></p></span>
</span><span>          <span><span><b>></b></span>Age:<span><span></span>></span> {this.props.ape.age}
</span><span>        <span><span></span>></span>
</span><span>      <span><span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>    <span>);
</span>  <span>}
</span><span>}
</span>

Schlussfolgerung

Wie gezeigt, sind React -Komponenten sehr prüfbar. Es gibt keine Entschuldigung dafür, auf gute Einheiten -Tests für Ihre Komponenten zu schreiben.

Das Schöne ist, dass JSX in jedem einzelnen Test für Sie arbeitet, nicht gegen Sie. Mit JSX können Sie Booleans, Rückrufe oder was auch immer Sie sonst brauchen. Beachten Sie dies, wenn Sie sich selbst in Einheitstestkomponenten selbst einteilen.

Das Dienstprogramm für flache Renderer -Test bietet Ihnen alles, was Sie für gute Einheitstests benötigen. Es macht nur eine Ebene tief und ermöglicht es Ihnen, isoliert zu testen. Sie befassen sich nicht mit einem willkürlichen Kind in der Hierarchie, die Ihre Unit -Tests durchbrechen.

Mit dem Scherzwerkzeug gefällt mir, wie Ihnen nur die spezifischen Dateien, die Sie ändern, Feedback erhalten. Dies verkürzt die Rückkopplungsschleife und fügt den Laserfokus hinzu. Ich hoffe, Sie sehen, wie wertvoll dies sein kann, wenn Sie einige schwierige Probleme angehen.

häufig gestellte Fragen (FAQs) zum Testen von React -Komponenten

Was sind die Best Practices für das Testen von React -Komponenten? Dies erleichtert es, Probleme zu identifizieren und zu beheben. Es ist auch wichtig, die Ausgabe der Komponente zu testen, nicht die Implementierungsdetails. Dies bedeutet, zu überprüfen, was der Benutzer sieht und mit dem interagiert, nicht wie die Komponente sie erreicht. Verwenden Sie zum Schluss Tools wie Scherz und Enzym, die speziell für das Testen von Reakt -Komponenten ausgelegt sind. Sie bieten nützliche Funktionen wie „flaches Rendern“, die Ihre Tests effizienter und effektiver machen können. Und es ist besonders gut geeignet für das Testen von Reaktionskomponenten. Um Scherz zu verwenden, müssen Sie es zunächst mit NPM oder Garn in Ihrem Projekt installieren. Anschließend können Sie Tests mit der Beschreibung und IT -Funktionen schreiben, die von Scherz bereitgestellt werden. In der IT -Funktion können Sie erwarten, dass bestimmte Bedingungen erfüllt sind. Jest bietet auch eine Mock -Funktion zum Erstellen von Mockfunktionen, die zum Testen nützlich sein können, wie Ihre Komponenten mit anderen Teilen Ihrer Anwendung interagieren. > Enzym ist ein JavaScript -Test -Dienstprogramm für React, das es einfacher macht, Ihre Komponenten zu testen. Es bietet Funktionen, um Komponenten auf unterschiedliche Weise zu rendern, einschließlich „flaches Rendering“, wodurch nur die Komponente selbst ohne ihre untergeordneten Komponenten wiedergegeben werden. Dies kann Ihre Tests schneller und fokussierter machen. Das Enzym bietet auch Funktionen zum Simulieren von Benutzerinteraktionen wie Klicken auf eine Schaltfläche und zur Überprüfung der Ausgabe Ihrer Komponenten.

Wie kann ich Benutzerinteraktionen in meinen React -Komponenten testen? Dies kann mit der von Enzym bereitgestellten Simulationsfunktion erfolgen. Sie können beispielsweise ein Klickereignis auf einer Schaltfläche simulieren und dann überprüfen, ob sich der Status oder die Requisiten der Komponente wie erwartet geändert haben. Es ist auch wichtig zu testen, dass Ihre Komponenten die Benutzereingabe ordnungsgemäß verarbeiten, beispielsweise indem Sie überprüfen, ob ein Formular die richtigen Daten einreicht, wenn der Benutzer sie ausfüllt Sind zugänglich? Sie können auch Tools wie Jest-Achse verwenden, ein Scherz-Plugin zum Testen der Zugänglichkeit, um Ihre Komponenten automatisch auf Probleme mit der gängigen Barrierefreiheit zu überprüfen. Darüber hinaus ist es wichtig, Ihre Komponenten mit Bildschirmlesern und anderen assistiven Technologien zu testen, um sicherzustellen, dass sie wirklich zugänglich sind.

Wie kann ich die Leistung meiner React -Komponenten testen? Ihre React -Komponenten können mit dem React -Profiler durchgeführt werden, einem Werkzeug, das misst, wie oft eine Reaktionsanwendung reduziert und die „Kosten“ des Renders sind. Dies kann Ihnen helfen, Komponenten zu identifizieren, die zu oft rendern oder zu lange dauern, um das Rendern zu erhalten, was Ihre Anwendung verlangsamen kann. Sie können auch Browser -Tools wie das Chrome Devtools -Performance -Panel verwenden, um die Gesamtleistung Ihrer Anwendung zu messen, einschließlich Faktoren wie Netzwerkanforderungen und JavaScript -Ausführungszeit. >

Testen Ihrer React -Komponenten mit unterschiedlichen Requisiten können mit der von Enzym bereitgestellten SetProps -Funktion erfolgen. Auf diese Weise können Sie die Requisiten einer Komponente ändern, nachdem sie wiedergegeben wurde, und dann überprüfen, ob sie richtig reagiert. Sie können beispielsweise testen, dass eine Komponente den richtigen Text zeigt, wenn Sie unterschiedliche Textrequisiten angegeben haben, oder dass sie optionale Requisiten korrekt behandelt. Das Testen Ihrer React -Komponenten in verschiedenen Browsern kann mit einem Werkzeug wie BrowsStack oder Sauce Labs durchgeführt werden. Mit diesen Tools können Sie Ihre Tests in echten Browsern auf echten Geräten ausführen, mit denen Sie Browser-spezifische Fehler fangen können. Es ist auch wichtig, Ihre Komponenten manuell in verschiedenen Browsern zu testen, da automatisierte Tests manchmal visuelle Probleme oder Usability -Probleme verpassen können.

Wie kann ich meine React -Komponenten mit unterschiedlichen Bildschirmgrößen testen? Auf diese Weise können Sie verschiedene Bildschirmgrößen und -auflösungen simulieren und überprüfen, ob Ihre Komponenten sie korrekt aussehen und arbeiten. Sie können auch ein Tool wie BrowsStack oder Sauce Labs verwenden, um Ihre Tests auf realen Geräten mit unterschiedlichen Bildschirmgrößen auszuführen. Komponenten mit unterschiedlichen Benutzerrollen umfassen die Simulation der Aktionen verschiedener Benutzerarten und überprüfen, ob Ihre Komponenten korrekt reagieren. Sie können beispielsweise testen, dass bestimmte Funktionen nur für angemeldete Benutzer zur Verfügung stehen oder dass Administrator Benutzer eine andere Oberfläche als normale Benutzer sehen. Dies kann mit der von Enzym bereitgestellten Simulationsfunktion und durch Einrichten Ihrer Tests für die Verwendung verschiedener Benutzerrollen erfolgen.

Das obige ist der detaillierte Inhalt vonEine Anleitung zum Testen von Reaktionen Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!