Protože existuje mnoho způsobů, jak můžete své aplikace otestovat, začneme jen několika velmi základními příklady uvnitř
create-react-app jak se dodává s Jest.
Co je Jest?
Jest je testovací rámec JavaScriptu spravovaný společností Facebook, Inc. navržený a vytvořený Christophem Nakazawou se zaměřením na jednoduchost a podporu velkých webových aplikací.
Za prvé, proč?
Testy se používají k prevenci chyb a špatné logiky ve vaší aplikaci a k zajištění toho, že běží tak, jak má.
Jest testy se často používají jako součást TDD:Test Driven Design a to má výhody jako
- Můžeme provádět změny v našem repo s důvěrou v logiku našeho kódu
- Prosazujte změny s jistotou
- Nasaďte náš kód do produkce vědomě, aby funkce pro koncové uživatele fungovala – může zabránit ztrátě prodeje, únikům dat, výpadkům a prosadit zabezpečení vašich stránek.
Testy jsou také součástí Continuous Deployment/Continuous Integration, což je více automatizovaný proces nastavený s potrubím různých příkazů CLI jako příklad. Měli byste jen vědět, že to existuje a ne jak to udělat; pokud se s Jestem setkáváte poprvé.
Vyzkoušejte náš první test v novém projektu React
Spusťte editor podle vašeho výběru a otevřete nový terminál
Ujistěte se, že je vaše úložiště zcela prázdné, je nainstalováno NPM a zadejte svůj výraz:
npx create-react-app . a nechte to dělat to, co je.
Vývojáři nám to usnadnili, takže náš projekt přichází s předem sestaveným testem.
App.test.js
Toto bude standardní formát, ve kterém bude celý váš test pojmenován v Component.test.js.
Zde najdete fragment kódu, jako je tento:
// @testing-library/react is the integrated Jest test lib that ships with this app
// render - renders the component as part of the specified test
// screen - is an object that part of the DOM test library that contains all queries bound to document.body
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
// We have to render a test as if it would be rendered on our webpage
// render is also the "body" of our test
render(<App />);
// Here we are telling the test that it needs to look for "learn react"
// the "i" is a regular expression that means "ignore upper/lower-case
// note: when using the screen Jest query it needs to come after the body(render)
const linkElement = screen.getByText(/learn react/i);
// Test expects LinkElement to be inside our component
expect(linkElement).toBeInTheDocument();
});
Přidal jsem komentáře, které pomáhají čitelnosti, věnujte čas tomu, abyste si prošli logiku, přejděte ke svému termínu a typu
npm test nebo npm test --coverage --coverage ukazuje nějaké další sci-fi voodoo.
Příklady toho, jak Jest vypadá po spuštění výchozího příkazu:
Naštěstí jsme prošli prvním testem, dobrá práce.
Ale to bylo trochu příliš snadné, ami ne?
Okořenění našeho vlastního testovacího prostředí pomocí reakčního bootstrapu
Pojďme se naučit, jak přidat komponenty Bootstrap do našeho projektu React, když už jsme u toho.
Spusťte ve svém terminálu:
npm install react-bootstrap bootstrap
Poté přidejte import 'bootstrap/dist/css/bootstrap.min.css'; na začátek src/App.js
A máte hotovo!
Pro vlastní test postavíme Navbar a spustíme na něm test.
Vytvořte složku v src s názvem components
Vytvořte 3 soubory uvnitř components – Navbar.js, Navbar.css, Navbar.test.js a propojit šablonu stylů
Uvnitř Navbar.js musíme vytvořit komponentu pro import do App.js:
import Navbar from 'react-bootstrap/Navbar'
import React from 'react'
export default function Navbar() {
return (
<div>
</div>
)
}
Poté přidejte na začátek Navbar.js
import Navbar from 'react-bootstrap/Navbar'
Náš navigační panel:
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
V App.js importujeme Navbar
V našem vlastním testu se seznámíme s Mount .
// What is Mount in jest?
// mount method renders the full DOM including the child components of the parent component that we are running the tests on.
// @testing-library/react is the integrated Jest test lib that ships with this app
import { render, mount } from '@testing-library/react';
import Navbar from './Navbar';
test('mounts the Navbar including children and check to see if Search appears in the Form Field', () => {
/* render(<Navbar />); */
let wrapped = mount(<Navbar />);
// Here we are telling the test that it needs to look for "Search" inside the form field
expect(wrapped.find("input").get(0).props.value).toEqual("Search");
});
Spusťte npm test a níže napište komentář k vašemu výsledku.
Formátování a háky před potvrzením v Reactu
Než se pustíme do horké omáčky, musíme nainstalovat několik balíčků.
Husky to je to, co se používá k vytváření/správě háčků před potvrzením
npx husky install
pak běž
npx husky add .husky/pre-commit "npm test"
To se děje, aby se zajistilo, že Husky běží vedle Jesta. V případě chyb ručně přidejte npm test do souboru před odevzdáním ve složce .husky a odeberte npm test z package.json.
S výkonem Husky nyní můžeme nainstalovat Prettier, což je konvence formátování kódu + formátovač, který nám dává možnost změnit vzhled našeho kódu předtím, než je odevzdán do našeho úložiště.
Spusťte npm i -D prettier eslint-config-prettier
Vytvořte 2 soubory ve složce src:.prettierignore .prettierrc.json
Přidejte následující do .prettierignore
node_modules
build
coverage
.vscode
Tyto složky jsou nyní vyloučeny stejně jako u .gitignore .
Soubor .prettierrc.json kde se děje kouzlo. Zde můžeme změnit nastavení pro naše formátování kódu.
Přidejte následující základní konfiguraci
{
"trailingComma": "es5",
"useTabs": true,
"tabWidth": 4,
"semi": true,
"singleQuote": false
}
Protože jsme již Husky nainstalovali, zbývá se vrátit do terminálu a spustit
npx mrm lint-staged
Tím přidáte potřebnou funkcionalitu, aby mohl Husky používat Prettier.
Test bude nyní Prettified, ale potřebujeme náš háček před závazkem, abychom toho dosáhli.
Chcete-li to provést, spusťte npm i --save-dev cross-env
a proveďte malou změnu v našem testovacím skriptu v package.json
"test": "cross-env CI=true react-scripts test"