Miś oglądający AlgoSmart na Youtube

Wzorce w React czyli jak wyruszyłem na podbój Youtube’a

Od moich pierwszych kroków w świecie Reacta minęło przeszło pół roku. W tym czasie zbudowałem kilka projektów, co pozwoliło mi oswoić się z podstawowym API komponentów. Byłem zadowolony z czynionych postępów, ale zaobserwowałem kilka niepokojących tendencji. Tworzenie wszechstronnych komponentów wymagało ode mnie zbyt dużo mało eleganckiej gimnastyki. Umożliwienie zmiany ułożenia komponentów-dzieci, decydowania o ich widoczności – to przykłady często napotykanych problemów, które doprowadzały do rozmnażania się propsów w niebezpiecznym tempie. Współdzielenie logiki również nie szło tak gładko, fragmenty niektórych komponentów były do siebie podejrzanie podobne. Zacząłem się zastanawiać: czy to normalna kolej rzeczy, czy może brakuje kilku sztuczek w moim programistycznym rękawie?

(więcej…)

Okulary położone na biurku przed monitorem

Jak pisać testy end-to-end aplikacji React z frameworkiem Cypress

Przyszedł czas na zdobycie wierzchołka testerskiej piramidy. Zabierzemy się za testy e2e (end-to-end). W teorii to najlepszy sposób na upewnienie się, że aplikacja działa jak należy. Możliwość dokładnego odtworzenia zachowań użytkownika w środowisku przeglądarki jest nadzwyczaj obiecująca. Niestety, praktyka szybko obnaża ukryte słabości tego podejścia do testowania. Testy e2e są czasochłonne i niezwykle wrażliwe na zmiany w aplikacji. Czy to oznacza, że lepiej byłoby dać sobie z nimi spokój? Bynajmniej. Możemy mieć z nich nie lada użytek, wystarczy zachować umiar przy tworzeniu przypadków testowych i wyposażyć się w dobre narzędzia. Właśnie o jednym z takich narzędzi będzie mowa w dzisiejszym wpisie. Zobaczymy, jak sprawdza się w akcji zyskujący popularność framework cypress.io.

(więcej…)

Piątka ludzi dająca sobie żółwika nad biurkiem z sprzętem elektronicznym

Jak pisać testy integracyjne komponentów React z Jest i Enzyme

Podczas testowania interfejsu użytkownika ograniczanie się sprawdzania odizolowanych od siebie komponentów nie zdaje egzaminu. Funkcjonalności dostarczane przez aplikację zawsze są wypadkową właściwej współpracy kilku jednostek w środowisku przeglądarki. Dopiero kiedy upewnisz się, że podsystemy są właściwie ze sobą zintegrowane, znacznie wzrośnie prawdopodobieństwo, że aplikacja spełni swoje zadanie w akcji. Dzisiaj przeprowadzę Cię przez podstawowy proces planowania i implementacji testów integracyjnych komponentów React w środowisku Jest i Enzyme.

(więcej…)

Jak pisać testy jednostkowe komponentów React z Jest i Enzyme

Jak to bywa z początkami, są trudne. Przypomniałem sobie o tym podczas pisania pierwszych testów jednostkowych w React. Dręczyło mnie wiele pytań: co powinienem testować? A co zostawić w spokoju? Czy moje testy zbytnio skupiają się na wewnętrznej mechanice komponentu? A może przez brak doświadczenia pomijam istotne elementy
interfejsu? Takie wątpliwości w połączeniu z rozbudowanym API Jest i Enzyme to idealna recepta na sparaliżowanie nawet najśmielszego adepta testowania. W tym artykule zaprezentuję metodę, która pozwoliła przełamać testerską blokadę i ruszyć z praktyką. (więcej…)

Lista materiałów, których potrzebujesz do skutecznej nauki Reacta

Stawiasz pierwsze kroki w ekosystemie Reacta? A może początki masz już za sobą, ale część zagadnień jest dla Ciebie problematyczna? Tak się składa, że w czasie wolnym od tworzenia kolejnych komponentów, udało mi się odszukać wiele wartościowych materiałów. Pozwolą Ci na skuteczną naukę, niezależnie od dotychczasowego poziomu umiejętności.

(więcej…)

Przejście otoczone stosem książek

Co musisz wiedzieć, żeby zacząć testowanie komponentów React?

Wprowadzenie testów to najlepszy sposób na podniesienie jakości i niezawodności tworzonego przez Ciebie oprogramowania. Jak pokazała przeprowadzona przeze mnie ankieta, czytelnicy bloga świetnie zdają sobie sprawę. Mimo najlepszych chęci, pierwsze kroki w świecie testowania mogą być przytłaczające. Terminologia, konfiguracja środowiska, o samym pisaniu testów nie mówiąc. Tym razem udowadniam, że to żadne rocket science. Po przeczytaniu tego wpisu będziesz mógł zabrać się za testowanie komponentów React.

(więcej…)