Testen Reageren Haken Met het Enzym en Reageren Testen Bibliotheek

0
7

Als je begint om gebruik te maken van Reageren haken in uw applicaties, je wilt er zeker van dat de code die je schrijft is niets minder solide. Er is niets zoals de scheepvaart buggy code. Een manier om er zeker van uw code is een bug-vrij is voor het schrijven van tests. En testen Reageren haken is niet veel verschillend van hoe Reageren toepassingen getest in het algemeen.

In deze tutorial bekijken we hoe dat te doen door gebruik te maken van een to-do applicatie gebouwd met haken. We dekken het schrijven van tests op basis van Ezyme en Reageren Testen Bibliotheek, beide zijn in staat om dat te doen. Als u nieuw bent aan het Enzym, dat we eigenlijk gepost over een tijdje terug zien hoe het kan worden gebruikt met de Grap in Reageren toepassingen. Het is niet een slecht idee om te controleren dat we als we dieper in op het testen van Reageren haken.

Hier is wat we willen testen

Een vrij standaard te-doen-component er ongeveer als volgt uitziet:

importeren Reageren, { useState, useRef } van “reageren”;
const Todo = () => {
const [todos, setTodos] = useState([
{ id: 1, item: “fouten” },
{ id: 2, item: “de prullenbak” }
]);
const todoRef = useRef();
const removeTodo = id’ = > {
setTodos(todos.filter(todo => todo.id !== id));
};
const addTodo = gegevens => {
laat id = todos.lengte + 1;
setTodos([
…todos,
{
id,
item: gegevens
}
]);
};
const handleNewTodo = e => {
e.preventDefault();
const item = todoRef.de huidige;
addTodo(post.waarde);
item.waarde = “”;
};
return (
<div className=”container”>
<div className=”rij”>
<div className=”col-md-6″>
<h2>Toevoegen Todo</h2>
</div>
</div>
<formulier>
<div className=”rij”>
<div className=”col-md-6″>
<input
type=”text”
autoFocus
ref={todoRef}
placeholder=”een taak Invoeren”
className=”form-control”
data-testid=”input”
/>
</div>
</div>
<div className=”rij”>
<div className=”col-md-6″>
knop <
type=”submit”
onClick={handleNewTodo}
className=”btn btn-primaire”
>
Een Taak Toe Te Voegen
</button>
</div>
</div>
</form>
<div className=”rij todo-list”>
<div className=”col-md-6″>
<h3>Lijsten</h3>
{!todos.lengte ? (
<div className=”no-taak”>Geen taak!</div>
) : (
<ul data-testid=”todos”>
{todos.kaart(todo => {
return (
<li key={todo.id}>
<div>
<span>{todo.item}</span>
knop <
className=”btn btn-gevaar”
data-testid=”delete-toets”
onClick={() => removeTodo(todo.id)}
>
X
</button>
</div>
</li>
);
})}
</ul>
)}
</div>
</div>
</div>
);
};
export standaard Todo;

Het testen met het Enzym

We moeten om de pakketten te installeren voordat we kunnen starten met het testen. Tijd om het vuur van de terminal!

npm install –opslaan-dev-enzym enzym-adapter-16

In de src map maken een bestand genaamd setupTests.js. Dit is wat we zullen gebruiken voor het configureren van Enzym-adapter.

importeren Enzym uit “enzym”;
import Adapter van “enzyme-adapter-reageren-16”;
Enzym.configureren({ adapter: nieuwe Adapter() });

Nu kunnen we beginnen met het schrijven van onze tests! We willen testen vier dingen:

  1. Dat het onderdeel renders
  2. Dat de eerste taken weergegeven wanneer het rendert
  3. Dat kunnen we maken een nieuwe en weer drie anderen
  4. Dat kunnen we verwijderen een van de eerste taken en hebben alleen een to-do-links

In uw src directory, maak een map met de naam __tests__ en maak het bestand waar je het schrijven van je Todo onderdeel van de tests in het. We noemen dat bestand Todo.test.js.

Met dat gedaan, kunnen wij importeren de pakketten die wij nodig hebben en maak een beschrijven blok waar wij vullen in onze tests.

importeren Reageren van “reageren”;
importeren { ondiep, mount } van “enzym”;
importeren van Todo “../Todo”;

beschrijven(“Todo”, () => {
// Tests gaat hier met `het` blokken
});
Test 1: De component maakt

Voor deze, zullen we gebruik maken van ondiepe renderen. Ondiepe rendering stelt ons in staat om te controleren of de render methode van de component wordt genoemd — dat is wat we willen om te bevestigen hier want dat is het bewijs dat we nodig hebben dat de component maakt.

het(“maakt”, () => {
ondiep(<Todo />);
});
Test 2: Initiële taken weergegeven

Hier zullen we gebruik maken van de mount methode, die ons in staat stelt om dieper te gaan dan wat ondiepe ons geeft. Op die manier kunnen wij de lengte van de to-do items.

het(“geeft een eerste aanzet om-dos”, () => {
const wrapper = berg(<Todo />);
verwacht(wrapper.vinden(“li”)).toHaveLength(2);
});
Test 3: We maken een nieuwe en weer drie anderen

Laten we eens nadenken over het proces betrokken zijn bij het creëren van een nieuwe to-do lijst:

  1. De gebruiker voert een waarde in het invoerveld.
  2. De gebruiker klikt op de knop verzenden.
  3. Krijgen We een totaal van drie actiepunten, waar de derde is de nieuw gecreëerde.

het(“voegt u een nieuw item”, () => {
const wrapper = berg(<Todo />);
wrapper.vinden(“input”).aanleg().waarde = “Fix falende test”;
verwacht(wrapper.vinden(“input”).aanleg().waarde).toEqual(“Fix falende test”);
wrapper.vinden(‘[type=”submit”]’).simuleren(“klik”);
verwacht(wrapper.vinden(“li”)).toHaveLength(3);
verwacht(
wrapper
.vinden(“li div span”)
.laatste (de)
.tekst()
).toEqual(“Fix falende test”);
});

We monteren de component vervolgens maken we gebruik van zoek() en aanleg() methoden om de waarde van het invoerveld. We stellen vast dat de waarde van de invoer in het veld is ingesteld op “Fix falende testen’ voordat u verder gaat naar het simuleren van een klik op de gebeurtenis, die moet het toevoegen van een nieuw item op de to-do lijst.

Eindelijk We beweren dat we hebben drie items op de lijst en dat het derde item is gelijk aan degene die we gemaakt hebben.

Test 4: We kunnen verwijderen van een van de eerste taken en hebben alleen een to-do-links
het(“verwijdert een item”, () => {
const wrapper = berg(<Todo />);
wrapper
.vinden(“li-toets”)
.eerste (de)
.simuleren(“klik”);
verwacht(wrapper.vinden(“li”)).toHaveLength(1);
verwacht(wrapper.vinden(“li-span”).kaart(item => item.tekst())).toEqual([
“De prullenbak”
]);
});

In dit scenario gaan we terug de to-do met een gesimuleerde klik op de gebeurtenis op het eerste item. Het is de verwachting dat dit gesprek de removeTodo () – methode, die dienen te verwijderen van het item waarop werd geklikt. Dan hebben we het controleren van de nummers van de items die we hebben, en de waarde van de een die wordt geretourneerd.

De broncode voor deze vier tests zijn hier op GitHub voor u om te controleren.

Testen Met reageren-testen-bibliotheek

We schrijven drie tests voor dit:

  1. Dat de initiële te doen renders
  2. Dat we het kunnen toevoegen van een nieuw to-do
  3. Dat we het kunnen verwijderen van een te-doen

Laten we beginnen met het installeren van de packages die we nodig hebben:

npm install –opslaan-dev @test-bibliotheek/de grap-dom @test-bibliotheek/reageren

Vervolgens kunnen wij importeren de pakketten en bestanden:

importeren Reageren van “reageren”;
importeren { renderen, fireEvent } van “@test-bibliotheek/reageer”;
importeren van Todo “../Todo”;
importeren “@test-bibliotheek/de grap-dom/uitbreiden verwachten”;

test(“Todo”, () => {
// Tests gaan hier
}
Test 1: De initiële te doen renders

We schrijven onze testen in een test blok. De eerste test zal er als volgt uitzien:

het(“geeft een eerste aanzet om-dos”, () => {
const { getByTestId } = render(<Todo />);
const todos = getByTestId(“todos”);
verwacht(todos.kinderen.de lengte).toBe(2);
});

Wat gebeurt hier? We maken gebruik van getTestId om terug te keren van het knooppunt van het element waar de gegevens-testid overeenkomt met degene die werd doorgegeven aan de methode. Dat is het <ul> element in dit geval. Dan zijn we te controleren of het heeft een totaal van twee kinderen (van elk kind wordt een <li> element in de ongeordende lijst). Dit zal doorgaan als de eerste taak is gelijk aan twee.

Test 2: kunnen We een nieuwe to-do

We maken ook gebruik van getTestById hier om terug te keren van het knooppunt dat overeenkomt met het argument dat we in het voorbijgaan.

het(“voegt een nieuwe to-do”, () => {
const { getByTestId, getByText } = render(<Todo />);
const input = getByTestId(“input”);
const todos = getByTestId(“todos”);
input.waarde = “Fix falende testen”;
fireEvent.klik op(getByText(“Taak Toevoegen”));
verwacht(todos.kinderen.de lengte).toBe(3);
});

Wij maken gebruik van getByTestId terug te keren van het veld) en het ul element als tevoren. Voor het simuleren van een klik op de gebeurtenis die voegt een nieuw to-do item gebruiken we fireEvent.klik op() en het passeren in de getByText () – methode, die geeft de node waarvan de tekst overeenkomt met het argument dat wij voorbij. Vanuit daar kunnen we dan controleer de lengte van de taken door het controleren van de lengte van de kinderen array.

Test 3: We kunnen verwijderen van een te-doen

Dit ziet er een beetje als wat we deden iets eerder:

het(“wist een to-do”, () => {
const { getAllByTestId, getByTestId } = render(<Todo />);
const todos = getByTestId(“todos”);
const deleteButton = getAllByTestId(“delete-toets”);
const eerste = deleteButton[0];
fireEvent.klik op de(eerste);
verwacht(todos.kinderen.de lengte).toBe(1);
});

We maken gebruik van getAllByTestId om terug te keren in de knooppunten van de knop verwijderen. Omdat we alleen maar willen verwijderen van een item, dat we vuur een klik op de gebeurtenis op het eerste item in de collectie, die dienen te verwijderen van de eerste te doen. Dit moet dan de lengte van todos kinderen gelijk aan één.

Deze tests zijn ook beschikbaar op GitHub.

Pluizende

Er zijn twee lint regels in acht te nemen bij het werken met haken:

Regel 1: Bel haken op het hoogste niveau

…in tegenstelling tot in conditionals, loops of geneste functies.

// Doe dit niet!
als (Math.random() > 0.5) {
const [ongeldig, updateInvalid] = useState(false);
}

Dit gaat in tegen de eerste regel. Volgens de officiële documentatie, Reageren, hangt af van de volgorde waarin de haken zijn geroepen om te associëren staat en de bijbehorende useState noemen. Deze code breekt de orde als de haak zal alleen worden opgeroepen als aan de voorwaarden wordt voldaan.

Dit geldt ook voor useEffect en andere haken. Bekijk de documentatie voor meer informatie.

Regel 2: Bel haken van Reageren functionele componenten

Haken zijn bedoeld om te worden gebruikt in Reageren functionele componenten — niet op Reageren klasse component of een JavaScript-functie.

We hebben in principe bedekt wat niet te doen als het gaat om het pluizen. We kunnen voorkomen dat deze misstappen met een npm-pakket dat specifiek dwingt deze regels.

npm installeren eslint-plugin-reageren-haken –opslaan-dev

Hier is wat we toevoegen aan het pakket zijn configuratie bestand om het te maken zijn ding doen:

{
“plugins”: [
// …
“reageer-haken”
],
“regels”: {
// …
“reageer-haken/regels-van-haken”: “error”,
“reageer-haken/volledig-deps”: “waarschuwen”
}
}

Als je gebruik maakt van het Creëren van Reageren App, dan moet je weten dat het pakket ondersteunt het lint plugin uit de doos van v3.0.0.

Ga heen en schrijf solide Reageren code!

Reageren haken zijn even gevoelig voor fouten als iets anders in uw toepassing en bent u gaat willen ervoor zorgen dat je ze kunt gebruiken. Zoals we net zagen, is er een aantal manieren waarop we kunnen gaan over het. Of u Enzym of U kunt gebruik maken van een enzym of Reageren Testen Bibliotheek te schrijven tests, is helemaal aan u. Één van beide manier, proberen gebruik te maken van pluizen als je gaat, en geen twijfel, je zult blij zijn u deed.