Komponenty k vývoji a testování

[SachCZ]

Vytvořil jsem komponenty, které lze dále vyvíjet a zároveň jsem k nim připravil testy. Dobrovolnosti se meze nekladou, ale moje představa byla:

• @hetsko #23: SubjectPreviev.js, SubjectPreview.test.js, ResultsList.js

• @eskimo-kidnap #21: CreditsSlider.js, CreditsSlider.test.js

• @hypernek #22:ChosenSubjects.js, ChosenSubjects.test.js

Co se testování tyče, tak jsem zvolil Jest, který je k react aplikaci přiřazen automaticky při tvorbě pomocí create-react-app. Při vývoji pak doporučuji kromě npm start otevřít nové okno a v něm pustit npm test. Toto pustí testy vždy, když dojde k relevantní změně kódu a v relatime ukáže výsledek.

Bohužel na testování v Reactu nejsem expert a je to pro mě vše nové. Principiálně je to ale podobné frameworkům, které možná znáte. Nějaký návod na testování v Reactu je zde.

[pakk-minidose]

Je v pořádku, že všechny ty testy prošly, i když to ještě není naimplementované?

Já si původně myslel, že ten test nebude fungovat, dokud nebude fungovat ta komponenta. Co vlastně ten test zkouší?

[SachCZ]

Super, že ti to běží.

Skvělá otázka! Teď je to udělané tak, že jsem tam dal test toho, že se renderuje ten text co jsem tam napsal místo komponenty. V tvém případě "Zde bude slider". Toto je docíleno pomocí

render(<CreditsSlider />);
const linkElement = screen.getByText(/Zde bude slider/i);
expect(linkElement).toBeVisible();

Tj. něco ve smyslu, vyrendruj component a očekávej, že bude vidět text "Zde bude slider". Notace /bla bla/i znamená case insensitive regual expression. Tj. stačí mi, že case insensitive substring je ""Zde bude slider"".

Neboj se file CreditsSlider.test.js upravit jak potřebuješ.

Tohle je samozřejmě test k ničemu, ale je to dobrá kostra, kterou můžeš upravit s pomocí dokumentace Jest, případně testování v Reactu je zde.

[SachCZ]

Zdá se, že všichni zaintersovaní vědí co potřebují - zavírám.