Testa Reagera Krokar Med Enzym och Reagera Test Bibliotek

0
8

När du börjar att använda sig av Reagera krokar i dina program, kommer du vill vara säker på att den kod du skriver är inget annat än stabil. Det finns inget som frakt buggig kod. Ett sätt att vara säker på att din kod är felfri är att skriva tester. Och testa att Reagera krokar är inte mycket annorlunda från hur Reagerar program är testade i allmänhet.

I denna handledning kommer vi att titta på hur man göra det genom att använda sig av en att-göra-applikation byggd med krokar. Vi kommer att täcka skriva av tester med Ezyme och Reagera Test Bibliotek, som båda har möjlighet att göra just det. Om du är ny till Enzymet, vi skrev faktiskt om det här för ett litet tag tillbaka och visar hur den kan användas med Skämt i att Reagera program. Det är inte en dålig idé att kontrollera att vi gräva i tester Reagerar krokar.

Här är vad vi vill testa

En ganska standard att-göra-komponent ser ut ungefär så här:

importera Reagera, { useState, useRef } från “reagera”;
const Todo = () => {
const [todos, setTodos] = useState([
{ id: 1, punkt: “Rätta fel” },
{ id: 2, artikel: “Ta ut soporna” }
]);
const todoRef = useRef();
const removeTodo = id => {
setTodos(todos.filter(todo => todo.id !== id));
};
const addTodo = data => {
låt id = todos.längd + 1;
setTodos([
…todos,
{
id,
artikelnummer: data
}
]);
};
const handleNewTodo = e => {
e.preventDefault();
const objekt = todoRef.nuvarande;
addTodo(objekt.value);
punkt.värde = “”;
};
avkastning (
<div className=”container”>
<div className=”row”>
<div className=”col-md-6″>
<h2>Lägg till Todo</h2>
</div>
</div>
<form>
<div className=”row”>
<div className=”col-md-6″>
<ingång
type=”text”
autofokus
ref={todoRef}
platshållare=”Ange en uppgift”
className=”form-kontroll”
data-testid=”ingång”
/>
</div>
</div>
<div className=”row”>
<div className=”col-md-6″>
<knappen
type=”submit”
onClick={handleNewTodo}
className=”btn btn-primär”
>
Lägg Till Uppgift
</button>
</div>
</div>
</form>
<div className=”raden todo-list”>
<div className=”col-md-6″>
<h3>Listor</h3>
{!todos.längd ? (
<div className=”ingen uppgift”>Ingen uppgift!</div>
) : (
<ul-data-testid=”todos”>
{todos.karta(todo => {
avkastning (
<li key={todo.id}>
<div>
<span>{todo.objekt}</span>
<knappen
className=”btn btn-fara”
data-testid=”delete-knappen”
onClick={() => removeTodo(todo.id)}
>
X
</button>
</div>
</li>
);
})}
</ul>
)}
</div>
</div>
</div>
);
};
export standard Todo;

Testa med Enzym

Vi behöver för att installera paket innan vi kan börja testa. Dags att skjuta upp terminalen!

npm install-spara-dev enzym enzym-adapter-16

Inuti src katalog, skapa en fil som heter setupTests.js. Detta är vad vi ska använda för att konfigurera Enzym adapter.

importera Enzym från “enzym”;
import Adapter från “enzym-adapter-reagera-16”;
Enzym.konfigurera({ adapter: ny Adapter() });

Nu kan vi börja skriva våra tester! Vi vill testa fyra saker:

  1. Att komponenten gör
  2. Att den första att-dos får visas när det gör
  3. Att vi kan skapa en ny att göra-och få tillbaka tre andra
  4. Att vi kan ta bort ett av de första att-dos och bara ha en att-göra-vänster

I ditt src-katalog, skapa en mapp som heter __tester__ och skapa filen där du ska skriva din Todo-komponenten tester i det. Låt oss kalla det-fil Todo.test.js.

Med det gjort, vi kan importera paket vi behöver och skapa ett beskriva blocket där vi ska fylla i våra tester.

importera Reagerar från “reagera”;
import { grunt, mount } från “enzym”;
import-Todo från “../Todo”;

beskriv(“Todo”, () => {
// Tester kommer att gå här med hjälp av `det` block
});
Test 1: komponenten gör

För detta, vi kommer att göra bruk av grunda göra. Grunda rendering gör det möjligt för oss att kontrollera om render-metoden för den komponent som blir kallad för — det är vad vi vill att bekräfta här eftersom det är ett bevis på att vi behöver komponenten gör.

det(“gör”, () => {
grunt(<Todo />);
});
Test 2: Inledande uppgifter får visas

Här är där vi kommer att göra bruk av mount metod, som tillåter oss att gå djupare än vad grunt ger oss. På det sättet kan vi kontrollera hur lång att-göra-poster.

det(“visar första att-dos”, () => {
const wrapper = mount(<Todo />);
förvänta dig(omslag.hitta(“li”)).toHaveLength(2);
});
Test 3: kan Vi skapa en ny att göra-och få tillbaka tre andra

Låt oss tänka på processen inblandade i att skapa en ny att-göra:

  1. Användaren matar in ett värde i textfältet.
  2. Användaren klickar på knappen skicka.
  3. Vi får en summa av tre att-göra-poster, där den tredje är den nyligen skapade en.

det(“lägger till en ny punkt”, () => {
const wrapper = mount(<Todo />);
omslaget.hitta(“input”).exempel().värde = “Fix misslyckas test”;
förvänta dig(omslag.hitta(“input”).exempel().värde).toEqual(“Fix misslyckas test”);
omslaget.hitta(‘[type=”submit”]’).simulera(“klicka på”);
förvänta dig(omslag.hitta(“li”)).toHaveLength(3);
räkna med(
omslag
.hitta(“li div span”)
.sista()
.text()
).toEqual(“Fix misslyckas test”);
});

Vi mount komponent då vi använder oss av find() och dom() metoder för att ange värdet för inmatningsfältet. Vi hävdar att värdet av input-fältet är satt till “Fix misslyckas test” innan du går vidare för att simulera en click-händelse, som bör lägga till ett nytt objekt i att göra-listan.

Vi slutligen hävda att vi har tre punkter på listan och att den tredje posten är lika stor som den som vi skapade.

Test 4: kan Vi ta bort en av de första att-dos och bara ha en att-göra-vänster
det(“tar bort ett objekt”, () => {
const wrapper = mount(<Todo />);
omslag
.hitta(“li-knappen”)
.första()
.simulera(“klicka på”);
förvänta dig(omslag.hitta(“li”)).toHaveLength(1);
förvänta dig(omslag.hitta(“li span”).karta(artikel => post.sms: a())).toEqual([
“Ta ut soporna”
]);
});

I det här fallet returnerar vi att göra med en simulerad klicka på händelsen på det första objektet. Det förväntas att detta kommer att kalla den removeTodo () – metod, som bör ta bort objekt som du klickade på. Vi är sedan att kontrollera antalet objekt som vi har, och värdet av det som blir returneras.

Källkoden för dessa fyra tester som är här på GitHub för dig att kolla in.

Testa Med att reagera-testing-bibliotek

Vi ska skriva tre tester för detta:

  1. Att den första att-göra-gör
  2. Att vi kan lägga till en ny att göra-
  3. Att vi kan ta bort en att-göra –

Låt oss börja med att installera de paket som vi behöver:

npm install-spara-dev @test-bibliotek/jest-dom – @test-bibliotek/reagera

Nästa, vi kan importera paket och filer:

importera Reagerar från “reagera”;
import { göra, fireEvent } från “@test-bibliotek/reagera”;
import-Todo från “../Todo”;
importera “@test-bibliotek/jest-dom/utöka-räkna”;

test(“Todo”, () => {
// Tester gå här
}
Test 1: De första att-göra-gör

Vi ska skriva våra tester i ett test block. Det första testet kommer att se ut så här:

det(“visar första att-dos”, () => {
const { getByTestId } = render(<Todo />);
const todos = getByTestId(“todos”);
förvänta dig(todos.barn.längden).toBe(2);
});

Vad är det som händer här? Vi är att använda sig av getTestId för att återgå till den nod i den del där data-testid matchar den som var som skickas till metoden. Det är <ul> – elementet i detta fall. Då vi är att kontrollera att den har ett sammanlagt två barn (för varje barn som en <li> – element inuti oordnad lista). Detta kommer att passera som det första att göra är lika med två.

Test 2: Vi kan lägga till en ny att göra-

Vi också göra användning av getTestById här för att återgå till den nod som matchar de argument vi passerar.

det(“lägger till en ny att-göra” -, () = > {
const { getByTestId, getByText } = render(<Todo />);
const input = getByTestId(“input”);
const todos = getByTestId(“todos”);
ingång.värde = “Fix misslyckas studier”.
fireEvent.klicka på(getByText(“Lägg till Aktivitet”));
förvänta dig(todos.barn.längden).toBe(3);
});

Vi använder getByTestId att återvända inmatningsfältet och ul-element som vi gjorde innan. För att simulera en click-händelse som lägger till en ny att göra-post, vi använder fireEvent.klicka på() och passerar i getByText () – metod som returnerar nod vars text matchar de argument vi passerade. Därifrån kan vi sedan in för att se längden på to-dos genom att kontrollera längden på barn array.

Test 3: så kan Vi ta bort en att-göra –

Detta kommer att se ut lite som vad vi gjorde lite tidigare:

det(“som raderar en att-göra” -, () = > {
const { getAllByTestId, getByTestId } = render(<Todo />);
const todos = getByTestId(“todos”);
const deleteButton = getAllByTestId(“delete-knappen”);
const första = deleteButton[0];
fireEvent.klicka på(första);
förvänta dig(todos.barn.längden).toBe(1);
});

Vi är att använda sig av getAllByTestId att returnera noder på knappen ta bort. Eftersom vi bara vill ta bort ett objekt, för att vi eldar i en click-händelse på det första objektet i samlingen, som ska ta bort det första att göra. Detta ska då göra längden av todos barn är lika med ett.

Dessa tester är också tillgänglig på GitHub.

Fibersläpp

Det finns två ludd regler att följa när du arbetar med krokar:

Regel 1: Ring krokar på den översta nivån

…i motsats till insidan villkorssatser, slingor eller kapslade funktioner.

// Inte göra det!
om (Matte.random() > 0.5) {
const [ogiltig, updateInvalid] = useState(false);
}

Detta strider mot den första regeln. Enligt den officiella dokumentationen, Reagerar beror på i vilken ordning krokar är kallade att associera stat och motsvarande useState samtal. Denna kod bryter den ordning som kroken ska endast användas om villkoren är uppfyllda.

Detta gäller även useEffect och andra krokar. Kolla in dokumentationen för mer information.

Regel 2: Ring krokar från att Reagera funktionella komponenter

Krokarna är avsedda att användas för att Reagera funktionella komponenter som inte Reagerar klass komponent eller en JavaScript-funktion.

Vi har i princip omfattas vad man inte ska göra när det kommer till fibersläpp. Vi kan undvika dessa felsteg med en npm paket som specifikt upprätthåller dessa regler.

npm install eslint-plugin-reagera-krokar-spara-dev

Här är vad vi lägger till paketet konfigurationsfil för att göra det göra sin sak:

{
“plugins”: [
// …
“reagera-krokar”
],
“regler”: {
// …
“reagera-krokar/regler-i-krokar”: “error”,
“reagera-krokar/uttömmande-deps”: “varna”
}
}

Om du utnyttjar Skapa Reagera App, så ska du veta att paketet stöder ludd plugin ur lådan som i v3.0.0.

Gå ut och skriva fast Reagera kod!

Reagera krokar är lika benägna att fel som allt annat i din ansökan och du kommer att vilja se till att du använder dem väl. Som vi just såg, det finns ett par olika sätt vi kan gå om det. Om du använder ett Enzym eller Du kan antingen använda sig av ett enzym eller Reagera Test Bibliotek för att skriva tester är helt upp till dig. Antingen sätt, försök att använda sig av fibersläpp som du går, och ingen tvekan om att du kommer vara glad att du gjorde.