{"id":9944,"date":"2022-07-15T09:10:09","date_gmt":"2022-07-15T07:10:09","guid":{"rendered":"https:\/\/vived.io\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/"},"modified":"2022-09-19T13:16:25","modified_gmt":"2022-09-19T11:16:25","slug":"cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96","status":"publish","type":"post","link":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/","title":{"rendered":"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu &#8211; Frontend Weekly vol. 96"},"content":{"rendered":"\n<h2 id=\"1-cypress-10\" data-num=1>1. Cypress 10<\/h2>\n\n\n\n<p>Cypress to jedna z najpopularniejszych bibliotek do pisania test\u00f3w E2E aplikacji webowych. Kilka dni temu doczeka\u0142a si\u0119 ona kolejnego du\u017cego wydania. Opr\u00f3cz gruntownego od\u015bwie\u017cenia interfejsu u\u017cytkownika doczekali\u015bmy si\u0119 wreszcie funkcjonalno\u015bci test\u00f3w komponent\u00f3w.<\/p>\n\n\n\n<p>Testowanie backendowych aplikacji to stosunkowo prosta sprawa. Przez lata wypracowane zosta\u0142o sporo wzorc\u00f3w i praktyk, kt\u00f3re jako spo\u0142eczno\u015b\u0107 przyj\u0119li\u015bmy za standard. Niestety je\u015bli chodzi o testy na frontendzie\u2026 no c\u00f3\u017c, to skomplikowane.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"499\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-9.jpeg\" alt=\"\" class=\"wp-image-5896\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-9.jpeg 748w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-9-300x200.jpeg 300w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><\/figure><\/div>\n\n\n<p>Dobre wzorce wypracowane na backendzie nie znajduj\u0105 zastosowania na frontendzie. We\u017amy chocia\u017cby piramidk\u0119 test\u00f3w. Zgodnie z jej za\u0142o\u017ceniami wi\u0119kszo\u015b\u0107 test\u00f3w powinny stanowi\u0107 testy jednostkowe, czyli w rozwa\u017canym przypadku testy komponent\u00f3w w izolacji. W teorii nic nie stoi na przeszkodzie aby realizowa\u0107 te za\u0142o\u017cenia. Je\u015bli jednak kiedykolwiek pisali\u015bcie testy jednostkowe komponent\u00f3w, to prawdopodobnie wiecie do jakiej konkluzji zmierzam. Testy te nie oddaj\u0105 sposobu w jaki u\u017cytkownicy interaktuj\u0105 z komponentami, rzadko poprawnie obs\u0142uguj\u0105 CSSy i nie daj\u0105 programi\u015bcie odpowiedniej, wizualnej informacji zwrotnej.<\/p>\n\n\n\n<p>Na szcz\u0119\u015bcie w ostatnich latach sytuacja test\u00f3w na frontendzie stopniowo si\u0119 poprawia. Nie tylko powstaje coraz wi\u0119cej wzorc\u00f3w i praktyk, ale te\u017c pojawiaj\u0105 si\u0119 coraz lepsze narz\u0119dzia do testowania. I mam tu na my\u015bli nie tylko Cypressa, ale te\u017c Storybook\u2019a, Lighthouse\u2019a, czy Reassure.Wracaj\u0105c do tematu Cypressa. Cypress 10 wprowadza testy komponent\u00f3w w formie bety. Nowy typ test\u00f3w ma rozwi\u0105za\u0107 problemy wyst\u0119puj\u0105ce w Jest czy Karmie i zamieni\u0107 pucharek test\u00f3w (o nim wi\u0119cej przeczytacie <a href=\"https:\/\/blog.devgenius.io\/toppling-the-pyramids-27ace578a7e\">tutaj<\/a>) z powrotem w piramid\u0119.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6gf.jpeg\" alt=\"\" class=\"wp-image-5897\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6gf.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6gf-300x300.jpeg 300w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6gf-150x150.jpeg 150w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p>Przez zastosowanie prawdziwej przegl\u0105darki Cypress \u0142adowa\u0107 b\u0119dzie komponenty wraz z pe\u0142nymi CSS-ami. Zastosowane API umo\u017cliwia \u0142atwe opakowanie komponentu, tak aby nada\u0107 mu odpowiedni\u0105 szeroko\u015b\u0107 i wysoko\u015b\u0107, lub te\u017c po prostu go wy\u015brodkowa\u0107. Prawdziwa przegl\u0105darka zapewnia rozs\u0105dn\u0105 emulacj\u0119 interakcji u\u017cytkownika &#8211; koniec ze sztucznym wywo\u0142ywaniem wydarze\u0144 w DOMie. Wisienk\u0105 na torcie jest mo\u017cliwo\u015b\u0107 podgl\u0105du test\u00f3w w trakcie ich wykonywania oraz zapisywanie nagra\u0144. Mamy wi\u0119c do czynienia z pe\u0142nym pakietem potrzebnym zar\u00f3wno do lokalnego developmentu jak i do odpalania test\u00f3w na CI.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">it(&#039;should NOT show validation messages&#039;, () =&gt; {\n  cy.mount(&lt;LoginForm \/&gt;);\n\n  cy.contains(&#039;Username&#039;).find(&#039;input&#039;).type(&#039;testuser&#039;);\n  cy.contains(&#039;Password&#039;).find(&#039;input&#039;).type(&#039;testpassword&#039;);\n  cy.get(&#039;button&#039;).contains(&#039;Login&#039;).click();\n\n  cy.contains(&#039;span&#039;, &#039;Username is required&#039;)\n    .should(&#039;not.be.visible&#039;);\n  cy.contains(&#039;span&#039;, &#039;Password is required&#039;)\n    .should(&#039;not.be.visible&#039;);\n});\n<\/code><\/pre>\n\n\n\n<p>Na papierze wszystko wygl\u0105da obiecuj\u0105co. W mojej g\u0142owie ko\u0142ata si\u0119 tylko jedno pytanie &#8211; czy Cypress jest wystarczaj\u0105co szybki dla test\u00f3w jednostkowych. To w ko\u0144cu powinna by\u0107 ich najwi\u0119ksza zaleta. Setki czy nawet tysi\u0105ce test\u00f3w powinny wykonywa\u0107 si\u0119 maksymalnie w ci\u0105gu kilku minut i dawa\u0107 programi\u015bcie natychmiastow\u0105 informacj\u0119 zwrotn\u0105 na temat tworzonego kodu. Je\u015bli chodzi o testy E2E, to Cypress jest niepor\u00f3wnywalnie szybszy od konkurencji. W przypadku test\u00f3w jednostkowych mo\u017ce okaza\u0107 si\u0119 to niewystarczaj\u0105ce. Mam szczer\u0105 nadziej\u0119, \u017ce moje obawy oka\u017c\u0105 si\u0119 nietrafione i Cypress poraz kolejny zrewolucjonizuje frontendowe testy.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.cypress.io\/blog\/2022\/06\/01\/cypress-10-release\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.cypress.io\/blog\/2022\/06\/01\/cypress-10-release\/<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=vJ0rDP4CG-w\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=vJ0rDP4CG-w<\/a><\/p>\n\n\n\n<h2 id=\"2-nestjs-9\" data-num=2>2. NestJS 9<\/h2>\n\n\n\n<p>NestJS to framework, kt\u00f3ry powinien by\u0107 nasz\u0105 ma\u0142a narodow\u0105 dum\u0105. W ko\u0144cu jego autor to Kamil My\u015bliwiec, a sam framework sukcesywnie zajmuje bardzo wysokie miejsca w deweloperskich ankietach satysfakcji.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"673\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/c3370b75a9e7657bca2aa4d5250497f919b5d87cv2_hq.jpeg\" alt=\"\" class=\"wp-image-5898\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/c3370b75a9e7657bca2aa4d5250497f919b5d87cv2_hq.jpeg 1024w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/c3370b75a9e7657bca2aa4d5250497f919b5d87cv2_hq-300x197.jpeg 300w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/c3370b75a9e7657bca2aa4d5250497f919b5d87cv2_hq-768x505.jpeg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Sporo os\u00f3b okre\u015bla NestJS, jako Angulara na backendzie. Rzeczywi\u015bcie oba narz\u0119dzia maj\u0105 wiele wsp\u00f3lnego. Uwierzcie mi jednak, \u017ce sporo znienawidzonych mechanizm\u00f3w Angulara sprawdza si\u0119 \u015bwietnie w backendowym \u015brodowisku.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"559\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-10.jpeg\" alt=\"\" class=\"wp-image-5899\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-10.jpeg 500w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-10-268x300.jpeg 268w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><figcaption>NestJS \u015bwietnie broni si\u0119 jako samodzielny framework backendowy. Trzeba przyzna\u0107 natomiast, \u017ce przez podobny model mentalny obu rozwzwi\u0105za\u0144, dla Angularowych Fullstack Developer\u00f3w jest to narz\u0119dzie wr\u0119cz idealne.<\/figcaption><\/figure><\/div>\n\n\n<p>Nie wspominam jednak o NestJS, aby podbudowa\u0107 Wasze patriotyczne serca, ale dlatego, \u017ce w\u0142a\u015bnie ukaza\u0142a si\u0119 kolejna wersja tego frameworku. Znajdziemy w niej sporo usprawnie\u0144 Dependecy Injection, ale najwi\u0119ksz\u0105 rewolucj\u0105 jest wprowadzenie REPLa.<\/p>\n\n\n\n<p>REPL, czyli Read\u2013eval\u2013print loop, to w sporym uproszczeniu konsola w kt\u00f3rej wykonywa\u0107 mo\u017cna kod. Najlepszym przyk\u0142adem REPLa dla JavaScript&nbsp; jest konsola, kt\u00f3r\u0105 znajdziecie w DevTools Chrome i z kt\u00f3rej na pewno korzystali\u015bcie niejednokrotnie.&nbsp;<\/p>\n\n\n\n<p>Za pomoc\u0105 REPLa dostarczanego przez NestJS mo\u017cliwe b\u0119dzie wywo\u0142ywanie dowolnych metod serwis\u00f3w czy repozytori\u00f3w. To oznacza, \u017ce uci\u0105\u017cliwe debugowanie za pomoc\u0105 Postmana mo\u017cemy ju\u017c uzna\u0107 za przesz\u0142o\u015b\u0107. Przyznam szczerze, \u017ce patrz\u0119 na t\u0105 funkcjonalno\u015b\u0107 z zazdro\u015bci\u0105\u2026 Panie Spring, prosz\u0119 mi to zaimplementowa\u0107!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"566\" height=\"441\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-8.jpeg\" alt=\"\" class=\"wp-image-5900\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-8.jpeg 566w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-8-300x234.jpeg 300w\" sizes=\"auto, (max-width: 566px) 100vw, 566px\" \/><\/figure><\/div>\n\n\n<p>Nowy NestJS, to r\u00f3wnie\u017c kilka usprawnie\u0144 w Dependecy Injection. Przyk\u0142adowo, nowa funkcjonalno\u015b\u0107 Durable Providers pozwoli nam zast\u0105pi\u0107 dynamicznie tworzone drzewa zale\u017cno\u015bci, statyczn\u0105, sko\u0144czon\u0105 ilo\u015bci\u0105 drzew zale\u017cno\u015bci. Znajdzie to zastosowanie mi\u0119dzy innymi wtedy, gdy w zale\u017cno\u015bci od zapytania wstrzykiwane powinno by\u0107 inne repozytorium komunikuj\u0105ce si\u0119 z inn\u0105 instancj\u0105 bazy danych. Do tej pory NestJS za dla ka\u017cdego zapytania tworzy\u0142 nowe drzewo zale\u017cno\u015bci. Od teraz je\u015bli liczba dost\u0119pnych repozytori\u00f3w jest sko\u0144czona to i liczba drzew zale\u017cno\u015bci b\u0119dzie mog\u0142a by\u0107 sko\u0144czona i wykorzystywana ponownie przez kolejne zapytania.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6nb.jpeg\" alt=\"\" class=\"wp-image-5901\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6nb.jpeg 612w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6nb-300x245.jpeg 300w\" sizes=\"auto, (max-width: 612px) 100vw, 612px\" \/><\/figure><\/div>\n\n\n<p>Podobnych usprawnie\u0144 Dependency Injection jest wi\u0119cej i je\u015bli jeste\u015bcie nimi zainteresowani to odsy\u0142am Was do oryginalnego blogposta Kamila My\u015bliwca.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/trilon.io\/blog\/nestjs-9-is-now-available\">https:\/\/trilon.io\/blog\/nestjs-9-is-now-available<\/a><\/p>\n\n\n\n<h2 id=\"3-vite-3\" data-num=3>3. Vite 3<\/h2>\n\n\n\n<p>Vue po\u015bwi\u0119cili\u015bmy ca\u0142\u0105 <a href=\"https:\/\/vived.io\/sprawdzamy-jak-vue-chce-pokonac-angulara-i-reacta-frontend-weekly-vol-95\/\">poprzedni\u0105 edycj\u0119 naszego przegl\u0105du<\/a>, dlatego w tym tygodniu o Vite b\u0119dzie w telegraficznym skr\u00f3cie. W minionym tygodniu premier\u0119 mia\u0142a trzecia wersja narz\u0119dzia do budowania aplikacji od Evana You. Jak chwal\u0105 si\u0119 jego autorzy, z ich rozwi\u0105zania korzysta ju\u017c mi\u0119dzy innymi Nuxt 3, SvelteKit, Astro, Hydrogen, SolidStart, Cypress czy Storybook. Spokojnie mo\u017cemy powiedzie\u0107 wi\u0119c, \u017ce Vite powoli przebija si\u0119 do pierwszej ligi frontendowego toolingu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"650\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6ws.jpeg\" alt=\"\" class=\"wp-image-5902\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6ws.jpeg 650w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6ws-300x231.jpeg 300w\" sizes=\"auto, (max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<p>Nowy Vite to nie rewolucja, a raczej stabilna ewolucja. W\u015br\u00f3d zmian znajdziemy mi\u0119dzy innymi now\u0105 dokumentacj\u0119, szybszy cold start, czy mniejszy bundle size. W pojedynk\u0119, \u017cadna z nowych funkcjonalno\u015bci nie robi wi\u0119kszego wra\u017cenia. Sumuj\u0105c je wszystkie w jedno wydanie, mamy jednak do czynienia z naprawd\u0119 solidn\u0105 aktualizacj\u0105. Je\u015bli interesuj\u0105 Was szczeg\u00f3\u0142y, to w \u017ar\u00f3d\u0142ach znajdziecie pe\u0142n\u0105 notatk\u0119 towarzysz\u0105c\u0105 wydaniu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"500\" src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mu4sv.jpeg\" alt=\"\" class=\"wp-image-5903\" srcset=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mu4sv.jpeg 588w, https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mu4sv-300x255.jpeg 300w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">\u0179r\u00f3d\u0142a:<\/h3>\n\n\n\n<p><a href=\"https:\/\/vitejs.dev\/blog\/announcing-vite3.html#new-documentation\">https:\/\/vitejs.dev\/blog\/announcing-vite3.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Przez lata testy na frontendzie traktowane by\u0142y po macoszemu. Ostatnio sporo si\u0119 jednak dzieje i wiele wskazuje na to, \u017ce powoli dojrzewamy do testowania naszych aplikacji. Kolejnym krokiem milowym w tym kierunku maj\u0105 by\u0107 testy komponent\u00f3w w Cypress 10. Czy spe\u0142ni\u0105 one pok\u0142adane w nich nadzieje i na zawsze odmieni\u0105 frontendowe testy jednostkowe?<\/p>\n","protected":false},"author":12,"featured_media":8882,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[273],"tags":[],"class_list":["post-9944","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-pl"],"acf":{"weekly_summary":true,"push_notification_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png","feature_image_visible":false,"estimated_reading_time":"5","feature_image_blog":{"ID":8883,"id":8883,"title":"pexels-pixabay-163016","filename":"pexels-pixabay-163016-scaled.jpg","filesize":532500,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-scaled.jpg","link":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/pexels-pixabay-163016-2\/","alt":"","author":"12","description":"","caption":"","name":"pexels-pixabay-163016-2","status":"inherit","uploaded_to":9944,"date":"2022-07-15 07:07:57","modified":"2022-07-15 07:07:57","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/vived.io\/wp-includes\/images\/media\/default.png","width":2560,"height":1613,"sizes":{"thumbnail":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-300x189.jpg","medium-width":300,"medium-height":189,"medium_large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-768x484.jpg","medium_large-width":768,"medium_large-height":484,"large":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-1024x645.jpg","large-width":1024,"large-height":645,"1536x1536":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-1536x968.jpg","1536x1536-width":1536,"1536x1536-height":968,"2048x2048":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-2048x1290.jpg","2048x2048-width":2048,"2048x2048-height":1290,"gform-image-choice-sm":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-scaled.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":189,"gform-image-choice-md":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-scaled.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":252,"gform-image-choice-lg":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/pexels-pixabay-163016-scaled.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":378}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu - Frontend Weekly vol. 96 - Vived<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu - Frontend Weekly vol. 96 - Vived\" \/>\n<meta property=\"og:description\" content=\"Przez lata testy na frontendzie traktowane by\u0142y po macoszemu. Ostatnio sporo si\u0119 jednak dzieje i wiele wskazuje na to, \u017ce powoli dojrzewamy do testowania naszych aplikacji. Kolejnym krokiem milowym w tym kierunku maj\u0105 by\u0107 testy komponent\u00f3w w Cypress 10. Czy spe\u0142ni\u0105 one pok\u0142adane w nich nadzieje i na zawsze odmieni\u0105 frontendowe testy jednostkowe?\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/\" \/>\n<meta property=\"og:site_name\" content=\"Vived\" \/>\n<meta property=\"article:published_time\" content=\"2022-07-15T07:10:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-19T11:16:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomasz Borowicz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/\"},\"author\":{\"name\":\"Tomasz Borowicz\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\"},\"headline\":\"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu &#8211; Frontend Weekly vol. 96\",\"datePublished\":\"2022-07-15T07:10:09+00:00\",\"dateModified\":\"2022-09-19T11:16:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/\"},\"wordCount\":1038,\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png\",\"articleSection\":[\"Frontend\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/\",\"url\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/\",\"name\":\"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu - Frontend Weekly vol. 96 - Vived\",\"isPartOf\":{\"@id\":\"https:\/\/vived.io\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png\",\"datePublished\":\"2022-07-15T07:10:09+00:00\",\"dateModified\":\"2022-09-19T11:16:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png\",\"width\":1200,\"height\":628},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/vived.io\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu &#8211; Frontend Weekly vol. 96\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/vived.io\/pl\/#website\",\"url\":\"https:\/\/vived.io\/pl\/\",\"name\":\"Vived\",\"description\":\"platform empowering IT people and technology companies to synergic growth\",\"publisher\":{\"@id\":\"https:\/\/vived.io\/pl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/vived.io\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/vived.io\/pl\/#organization\",\"name\":\"Vived\",\"url\":\"https:\/\/vived.io\/pl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"contentUrl\":\"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png\",\"width\":136,\"height\":45,\"caption\":\"Vived\"},\"image\":{\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb\",\"name\":\"Tomasz Borowicz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g\",\"caption\":\"Tomasz Borowicz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu - Frontend Weekly vol. 96 - Vived","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/","og_locale":"pl_PL","og_type":"article","og_title":"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu - Frontend Weekly vol. 96 - Vived","og_description":"Przez lata testy na frontendzie traktowane by\u0142y po macoszemu. Ostatnio sporo si\u0119 jednak dzieje i wiele wskazuje na to, \u017ce powoli dojrzewamy do testowania naszych aplikacji. Kolejnym krokiem milowym w tym kierunku maj\u0105 by\u0107 testy komponent\u00f3w w Cypress 10. Czy spe\u0142ni\u0105 one pok\u0142adane w nich nadzieje i na zawsze odmieni\u0105 frontendowe testy jednostkowe?","og_url":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/","og_site_name":"Vived","article_published_time":"2022-07-15T07:10:09+00:00","article_modified_time":"2022-09-19T11:16:25+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png","type":"image\/png"}],"author":"Tomasz Borowicz","twitter_card":"summary_large_image","twitter_image":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#article","isPartOf":{"@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/"},"author":{"name":"Tomasz Borowicz","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb"},"headline":"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu &#8211; Frontend Weekly vol. 96","datePublished":"2022-07-15T07:10:09+00:00","dateModified":"2022-09-19T11:16:25+00:00","mainEntityOfPage":{"@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/"},"wordCount":1038,"publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"image":{"@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png","articleSection":["Frontend"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/","url":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/","name":"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu - Frontend Weekly vol. 96 - Vived","isPartOf":{"@id":"https:\/\/vived.io\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage"},"image":{"@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage"},"thumbnailUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png","datePublished":"2022-07-15T07:10:09+00:00","dateModified":"2022-09-19T11:16:25+00:00","breadcrumb":{"@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#primaryimage","url":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/frontend-96.png","width":1200,"height":628},{"@type":"BreadcrumbList","@id":"https:\/\/vived.io\/pl\/cypress-zamierza-zrewolucjonizowac-testowanie-frontendu-frontend-weekly-vol-96\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/vived.io\/pl\/"},{"@type":"ListItem","position":2,"name":"Cypress zamierza zrewolucjonizowa\u0107 testowanie frontendu &#8211; Frontend Weekly vol. 96"}]},{"@type":"WebSite","@id":"https:\/\/vived.io\/pl\/#website","url":"https:\/\/vived.io\/pl\/","name":"Vived","description":"platform empowering IT people and technology companies to synergic growth","publisher":{"@id":"https:\/\/vived.io\/pl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vived.io\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/vived.io\/pl\/#organization","name":"Vived","url":"https:\/\/vived.io\/pl\/","logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/","url":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","contentUrl":"https:\/\/vived.io\/wp-content\/uploads\/2020\/03\/logo_vived_color.png","width":136,"height":45,"caption":"Vived"},"image":{"@id":"https:\/\/vived.io\/pl\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/9d2a72fe7d0dfbb4092675afbab742bb","name":"Tomasz Borowicz","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/vived.io\/pl\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/804536d2672538508d43f60ad2108e5aaea76c192653eaf95d4c3934b7d1dbb6?s=96&d=mm&r=g","caption":"Tomasz Borowicz"}}]}},"blocks_vived":[{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>1. Cypress 10<\/h2>\n","innerContent":["\n<h2>1. Cypress 10<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Cypress to jedna z najpopularniejszych bibliotek do pisania test\u00f3w E2E aplikacji webowych. Kilka dni temu doczeka\u0142a si\u0119 ona kolejnego du\u017cego wydania. Opr\u00f3cz gruntownego od\u015bwie\u017cenia interfejsu u\u017cytkownika doczekali\u015bmy si\u0119 wreszcie funkcjonalno\u015bci test\u00f3w komponent\u00f3w.<\/p>\n","innerContent":["\n<p>Cypress to jedna z najpopularniejszych bibliotek do pisania test\u00f3w E2E aplikacji webowych. Kilka dni temu doczeka\u0142a si\u0119 ona kolejnego du\u017cego wydania. Opr\u00f3cz gruntownego od\u015bwie\u017cenia interfejsu u\u017cytkownika doczekali\u015bmy si\u0119 wreszcie funkcjonalno\u015bci test\u00f3w komponent\u00f3w.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Testowanie backendowych aplikacji to stosunkowo prosta sprawa. Przez lata wypracowane zosta\u0142o sporo wzorc\u00f3w i praktyk, kt\u00f3re jako spo\u0142eczno\u015b\u0107 przyj\u0119li\u015bmy za standard. Niestety je\u015bli chodzi o testy na frontendzie\u2026 no c\u00f3\u017c, to skomplikowane.<\/p>\n","innerContent":["\n<p>Testowanie backendowych aplikacji to stosunkowo prosta sprawa. Przez lata wypracowane zosta\u0142o sporo wzorc\u00f3w i praktyk, kt\u00f3re jako spo\u0142eczno\u015b\u0107 przyj\u0119li\u015bmy za standard. Niestety je\u015bli chodzi o testy na frontendzie\u2026 no c\u00f3\u017c, to skomplikowane.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5896,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-9.jpeg\" alt=\"\" class=\"wp-image-5896\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-9.jpeg\" alt=\"\" class=\"wp-image-5896\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Dobre wzorce wypracowane na backendzie nie znajduj\u0105 zastosowania na frontendzie. We\u017amy chocia\u017cby piramidk\u0119 test\u00f3w. Zgodnie z jej za\u0142o\u017ceniami wi\u0119kszo\u015b\u0107 test\u00f3w powinny stanowi\u0107 testy jednostkowe, czyli w rozwa\u017canym przypadku testy komponent\u00f3w w izolacji. W teorii nic nie stoi na przeszkodzie aby realizowa\u0107 te za\u0142o\u017cenia. Je\u015bli jednak kiedykolwiek pisali\u015bcie testy jednostkowe komponent\u00f3w, to prawdopodobnie wiecie do jakiej konkluzji zmierzam. Testy te nie oddaj\u0105 sposobu w jaki u\u017cytkownicy interaktuj\u0105 z komponentami, rzadko poprawnie obs\u0142uguj\u0105 CSSy i nie daj\u0105 programi\u015bcie odpowiedniej, wizualnej informacji zwrotnej.<\/p>\n","innerContent":["\n<p>Dobre wzorce wypracowane na backendzie nie znajduj\u0105 zastosowania na frontendzie. We\u017amy chocia\u017cby piramidk\u0119 test\u00f3w. Zgodnie z jej za\u0142o\u017ceniami wi\u0119kszo\u015b\u0107 test\u00f3w powinny stanowi\u0107 testy jednostkowe, czyli w rozwa\u017canym przypadku testy komponent\u00f3w w izolacji. W teorii nic nie stoi na przeszkodzie aby realizowa\u0107 te za\u0142o\u017cenia. Je\u015bli jednak kiedykolwiek pisali\u015bcie testy jednostkowe komponent\u00f3w, to prawdopodobnie wiecie do jakiej konkluzji zmierzam. Testy te nie oddaj\u0105 sposobu w jaki u\u017cytkownicy interaktuj\u0105 z komponentami, rzadko poprawnie obs\u0142uguj\u0105 CSSy i nie daj\u0105 programi\u015bcie odpowiedniej, wizualnej informacji zwrotnej.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na szcz\u0119\u015bcie w ostatnich latach sytuacja test\u00f3w na frontendzie stopniowo si\u0119 poprawia. Nie tylko powstaje coraz wi\u0119cej wzorc\u00f3w i praktyk, ale te\u017c pojawiaj\u0105 si\u0119 coraz lepsze narz\u0119dzia do testowania. I mam tu na my\u015bli nie tylko Cypressa, ale te\u017c Storybook\u2019a, Lighthouse\u2019a, czy Reassure.Wracaj\u0105c do tematu Cypressa. Cypress 10 wprowadza testy komponent\u00f3w w formie bety. Nowy typ test\u00f3w ma rozwi\u0105za\u0107 problemy wyst\u0119puj\u0105ce w Jest czy Karmie i zamieni\u0107 pucharek test\u00f3w (o nim wi\u0119cej przeczytacie <a href=\"https:\/\/blog.devgenius.io\/toppling-the-pyramids-27ace578a7e\">tutaj<\/a>) z powrotem w piramid\u0119.<\/p>\n","innerContent":["\n<p>Na szcz\u0119\u015bcie w ostatnich latach sytuacja test\u00f3w na frontendzie stopniowo si\u0119 poprawia. Nie tylko powstaje coraz wi\u0119cej wzorc\u00f3w i praktyk, ale te\u017c pojawiaj\u0105 si\u0119 coraz lepsze narz\u0119dzia do testowania. I mam tu na my\u015bli nie tylko Cypressa, ale te\u017c Storybook\u2019a, Lighthouse\u2019a, czy Reassure.Wracaj\u0105c do tematu Cypressa. Cypress 10 wprowadza testy komponent\u00f3w w formie bety. Nowy typ test\u00f3w ma rozwi\u0105za\u0107 problemy wyst\u0119puj\u0105ce w Jest czy Karmie i zamieni\u0107 pucharek test\u00f3w (o nim wi\u0119cej przeczytacie <a href=\"https:\/\/blog.devgenius.io\/toppling-the-pyramids-27ace578a7e\">tutaj<\/a>) z powrotem w piramid\u0119.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5897,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6gf.jpeg\" alt=\"\" class=\"wp-image-5897\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6gf.jpeg\" alt=\"\" class=\"wp-image-5897\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Przez zastosowanie prawdziwej przegl\u0105darki Cypress \u0142adowa\u0107 b\u0119dzie komponenty wraz z pe\u0142nymi CSS-ami. Zastosowane API umo\u017cliwia \u0142atwe opakowanie komponentu, tak aby nada\u0107 mu odpowiedni\u0105 szeroko\u015b\u0107 i wysoko\u015b\u0107, lub te\u017c po prostu go wy\u015brodkowa\u0107. Prawdziwa przegl\u0105darka zapewnia rozs\u0105dn\u0105 emulacj\u0119 interakcji u\u017cytkownika - koniec ze sztucznym wywo\u0142ywaniem wydarze\u0144 w DOMie. Wisienk\u0105 na torcie jest mo\u017cliwo\u015b\u0107 podgl\u0105du test\u00f3w w trakcie ich wykonywania oraz zapisywanie nagra\u0144. Mamy wi\u0119c do czynienia z pe\u0142nym pakietem potrzebnym zar\u00f3wno do lokalnego developmentu jak i do odpalania test\u00f3w na CI.<\/p>\n","innerContent":["\n<p>Przez zastosowanie prawdziwej przegl\u0105darki Cypress \u0142adowa\u0107 b\u0119dzie komponenty wraz z pe\u0142nymi CSS-ami. Zastosowane API umo\u017cliwia \u0142atwe opakowanie komponentu, tak aby nada\u0107 mu odpowiedni\u0105 szeroko\u015b\u0107 i wysoko\u015b\u0107, lub te\u017c po prostu go wy\u015brodkowa\u0107. Prawdziwa przegl\u0105darka zapewnia rozs\u0105dn\u0105 emulacj\u0119 interakcji u\u017cytkownika - koniec ze sztucznym wywo\u0142ywaniem wydarze\u0144 w DOMie. Wisienk\u0105 na torcie jest mo\u017cliwo\u015b\u0107 podgl\u0105du test\u00f3w w trakcie ich wykonywania oraz zapisywanie nagra\u0144. Mamy wi\u0119c do czynienia z pe\u0142nym pakietem potrzebnym zar\u00f3wno do lokalnego developmentu jak i do odpalania test\u00f3w na CI.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"prismatic\/blocks","attrs":{"language":"javascript"},"innerBlocks":[],"innerHTML":"\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">it('should NOT show validation messages', () => {\n  cy.mount(&lt;LoginForm \/>);\n\n  cy.contains('Username').find('input').type('testuser');\n  cy.contains('Password').find('input').type('testpassword');\n  cy.get('button').contains('Login').click();\n\n  cy.contains('span', 'Username is required')\n    .should('not.be.visible');\n  cy.contains('span', 'Password is required')\n    .should('not.be.visible');\n});\n<\/code><\/pre>\n","innerContent":["\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-javascript\">it('should NOT show validation messages', () => {\n  cy.mount(&lt;LoginForm \/>);\n\n  cy.contains('Username').find('input').type('testuser');\n  cy.contains('Password').find('input').type('testpassword');\n  cy.get('button').contains('Login').click();\n\n  cy.contains('span', 'Username is required')\n    .should('not.be.visible');\n  cy.contains('span', 'Password is required')\n    .should('not.be.visible');\n});\n<\/code><\/pre>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Na papierze wszystko wygl\u0105da obiecuj\u0105co. W mojej g\u0142owie ko\u0142ata si\u0119 tylko jedno pytanie - czy Cypress jest wystarczaj\u0105co szybki dla test\u00f3w jednostkowych. To w ko\u0144cu powinna by\u0107 ich najwi\u0119ksza zaleta. Setki czy nawet tysi\u0105ce test\u00f3w powinny wykonywa\u0107 si\u0119 maksymalnie w ci\u0105gu kilku minut i dawa\u0107 programi\u015bcie natychmiastow\u0105 informacj\u0119 zwrotn\u0105 na temat tworzonego kodu. Je\u015bli chodzi o testy E2E, to Cypress jest niepor\u00f3wnywalnie szybszy od konkurencji. W przypadku test\u00f3w jednostkowych mo\u017ce okaza\u0107 si\u0119 to niewystarczaj\u0105ce. Mam szczer\u0105 nadziej\u0119, \u017ce moje obawy oka\u017c\u0105 si\u0119 nietrafione i Cypress poraz kolejny zrewolucjonizuje frontendowe testy.<\/p>\n","innerContent":["\n<p>Na papierze wszystko wygl\u0105da obiecuj\u0105co. W mojej g\u0142owie ko\u0142ata si\u0119 tylko jedno pytanie - czy Cypress jest wystarczaj\u0105co szybki dla test\u00f3w jednostkowych. To w ko\u0144cu powinna by\u0107 ich najwi\u0119ksza zaleta. Setki czy nawet tysi\u0105ce test\u00f3w powinny wykonywa\u0107 si\u0119 maksymalnie w ci\u0105gu kilku minut i dawa\u0107 programi\u015bcie natychmiastow\u0105 informacj\u0119 zwrotn\u0105 na temat tworzonego kodu. Je\u015bli chodzi o testy E2E, to Cypress jest niepor\u00f3wnywalnie szybszy od konkurencji. W przypadku test\u00f3w jednostkowych mo\u017ce okaza\u0107 si\u0119 to niewystarczaj\u0105ce. Mam szczer\u0105 nadziej\u0119, \u017ce moje obawy oka\u017c\u0105 si\u0119 nietrafione i Cypress poraz kolejny zrewolucjonizuje frontendowe testy.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/www.cypress.io\/blog\/2022\/06\/01\/cypress-10-release\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.cypress.io\/blog\/2022\/06\/01\/cypress-10-release\/<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=vJ0rDP4CG-w\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=vJ0rDP4CG-w<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/www.cypress.io\/blog\/2022\/06\/01\/cypress-10-release\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.cypress.io\/blog\/2022\/06\/01\/cypress-10-release\/<\/a><br><a href=\"https:\/\/www.youtube.com\/watch?v=vJ0rDP4CG-w\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=vJ0rDP4CG-w<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>2. NestJS 9<\/h2>\n","innerContent":["\n<h2>2. NestJS 9<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>NestJS to framework, kt\u00f3ry powinien by\u0107 nasz\u0105 ma\u0142a narodow\u0105 dum\u0105. W ko\u0144cu jego autor to Kamil My\u015bliwiec, a sam framework sukcesywnie zajmuje bardzo wysokie miejsca w deweloperskich ankietach satysfakcji.<\/p>\n","innerContent":["\n<p>NestJS to framework, kt\u00f3ry powinien by\u0107 nasz\u0105 ma\u0142a narodow\u0105 dum\u0105. W ko\u0144cu jego autor to Kamil My\u015bliwiec, a sam framework sukcesywnie zajmuje bardzo wysokie miejsca w deweloperskich ankietach satysfakcji.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5898,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/c3370b75a9e7657bca2aa4d5250497f919b5d87cv2_hq.jpeg\" alt=\"\" class=\"wp-image-5898\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/c3370b75a9e7657bca2aa4d5250497f919b5d87cv2_hq.jpeg\" alt=\"\" class=\"wp-image-5898\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Sporo os\u00f3b okre\u015bla NestJS, jako Angulara na backendzie. Rzeczywi\u015bcie oba narz\u0119dzia maj\u0105 wiele wsp\u00f3lnego. Uwierzcie mi jednak, \u017ce sporo znienawidzonych mechanizm\u00f3w Angulara sprawdza si\u0119 \u015bwietnie w backendowym \u015brodowisku.<\/p>\n","innerContent":["\n<p>Sporo os\u00f3b okre\u015bla NestJS, jako Angulara na backendzie. Rzeczywi\u015bcie oba narz\u0119dzia maj\u0105 wiele wsp\u00f3lnego. Uwierzcie mi jednak, \u017ce sporo znienawidzonych mechanizm\u00f3w Angulara sprawdza si\u0119 \u015bwietnie w backendowym \u015brodowisku.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5899,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-10.jpeg\" alt=\"\" class=\"wp-image-5899\"\/><figcaption>NestJS \u015bwietnie broni si\u0119 jako samodzielny framework backendowy. Trzeba przyzna\u0107 natomiast, \u017ce przez podobny model mentalny obu rozwzwi\u0105za\u0144, dla Angularowych Fullstack Developer\u00f3w jest to narz\u0119dzie wr\u0119cz idealne.<\/figcaption><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-10.jpeg\" alt=\"\" class=\"wp-image-5899\"\/><figcaption>NestJS \u015bwietnie broni si\u0119 jako samodzielny framework backendowy. Trzeba przyzna\u0107 natomiast, \u017ce przez podobny model mentalny obu rozwzwi\u0105za\u0144, dla Angularowych Fullstack Developer\u00f3w jest to narz\u0119dzie wr\u0119cz idealne.<\/figcaption><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nie wspominam jednak o NestJS, aby podbudowa\u0107 Wasze patriotyczne serca, ale dlatego, \u017ce w\u0142a\u015bnie ukaza\u0142a si\u0119 kolejna wersja tego frameworku. Znajdziemy w niej sporo usprawnie\u0144 Dependecy Injection, ale najwi\u0119ksz\u0105 rewolucj\u0105 jest wprowadzenie REPLa.<\/p>\n","innerContent":["\n<p>Nie wspominam jednak o NestJS, aby podbudowa\u0107 Wasze patriotyczne serca, ale dlatego, \u017ce w\u0142a\u015bnie ukaza\u0142a si\u0119 kolejna wersja tego frameworku. Znajdziemy w niej sporo usprawnie\u0144 Dependecy Injection, ale najwi\u0119ksz\u0105 rewolucj\u0105 jest wprowadzenie REPLa.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>REPL, czyli Read\u2013eval\u2013print loop, to w sporym uproszczeniu konsola w kt\u00f3rej wykonywa\u0107 mo\u017cna kod. Najlepszym przyk\u0142adem REPLa dla JavaScript&nbsp; jest konsola, kt\u00f3r\u0105 znajdziecie w DevTools Chrome i z kt\u00f3rej na pewno korzystali\u015bcie niejednokrotnie.&nbsp;<\/p>\n","innerContent":["\n<p>REPL, czyli Read\u2013eval\u2013print loop, to w sporym uproszczeniu konsola w kt\u00f3rej wykonywa\u0107 mo\u017cna kod. Najlepszym przyk\u0142adem REPLa dla JavaScript&nbsp; jest konsola, kt\u00f3r\u0105 znajdziecie w DevTools Chrome i z kt\u00f3rej na pewno korzystali\u015bcie niejednokrotnie.&nbsp;<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Za pomoc\u0105 REPLa dostarczanego przez NestJS mo\u017cliwe b\u0119dzie wywo\u0142ywanie dowolnych metod serwis\u00f3w czy repozytori\u00f3w. To oznacza, \u017ce uci\u0105\u017cliwe debugowanie za pomoc\u0105 Postmana mo\u017cemy ju\u017c uzna\u0107 za przesz\u0142o\u015b\u0107. Przyznam szczerze, \u017ce patrz\u0119 na t\u0105 funkcjonalno\u015b\u0107 z zazdro\u015bci\u0105\u2026 Panie Spring, prosz\u0119 mi to zaimplementowa\u0107!<\/p>\n","innerContent":["\n<p>Za pomoc\u0105 REPLa dostarczanego przez NestJS mo\u017cliwe b\u0119dzie wywo\u0142ywanie dowolnych metod serwis\u00f3w czy repozytori\u00f3w. To oznacza, \u017ce uci\u0105\u017cliwe debugowanie za pomoc\u0105 Postmana mo\u017cemy ju\u017c uzna\u0107 za przesz\u0142o\u015b\u0107. Przyznam szczerze, \u017ce patrz\u0119 na t\u0105 funkcjonalno\u015b\u0107 z zazdro\u015bci\u0105\u2026 Panie Spring, prosz\u0119 mi to zaimplementowa\u0107!<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5900,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-8.jpeg\" alt=\"\" class=\"wp-image-5900\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/download-8.jpeg\" alt=\"\" class=\"wp-image-5900\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowy NestJS, to r\u00f3wnie\u017c kilka usprawnie\u0144 w Dependecy Injection. Przyk\u0142adowo, nowa funkcjonalno\u015b\u0107 Durable Providers pozwoli nam zast\u0105pi\u0107 dynamicznie tworzone drzewa zale\u017cno\u015bci, statyczn\u0105, sko\u0144czon\u0105 ilo\u015bci\u0105 drzew zale\u017cno\u015bci. Znajdzie to zastosowanie mi\u0119dzy innymi wtedy, gdy w zale\u017cno\u015bci od zapytania wstrzykiwane powinno by\u0107 inne repozytorium komunikuj\u0105ce si\u0119 z inn\u0105 instancj\u0105 bazy danych. Do tej pory NestJS za dla ka\u017cdego zapytania tworzy\u0142 nowe drzewo zale\u017cno\u015bci. Od teraz je\u015bli liczba dost\u0119pnych repozytori\u00f3w jest sko\u0144czona to i liczba drzew zale\u017cno\u015bci b\u0119dzie mog\u0142a by\u0107 sko\u0144czona i wykorzystywana ponownie przez kolejne zapytania.<\/p>\n","innerContent":["\n<p>Nowy NestJS, to r\u00f3wnie\u017c kilka usprawnie\u0144 w Dependecy Injection. Przyk\u0142adowo, nowa funkcjonalno\u015b\u0107 Durable Providers pozwoli nam zast\u0105pi\u0107 dynamicznie tworzone drzewa zale\u017cno\u015bci, statyczn\u0105, sko\u0144czon\u0105 ilo\u015bci\u0105 drzew zale\u017cno\u015bci. Znajdzie to zastosowanie mi\u0119dzy innymi wtedy, gdy w zale\u017cno\u015bci od zapytania wstrzykiwane powinno by\u0107 inne repozytorium komunikuj\u0105ce si\u0119 z inn\u0105 instancj\u0105 bazy danych. Do tej pory NestJS za dla ka\u017cdego zapytania tworzy\u0142 nowe drzewo zale\u017cno\u015bci. Od teraz je\u015bli liczba dost\u0119pnych repozytori\u00f3w jest sko\u0144czona to i liczba drzew zale\u017cno\u015bci b\u0119dzie mog\u0142a by\u0107 sko\u0144czona i wykorzystywana ponownie przez kolejne zapytania.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5901,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6nb.jpeg\" alt=\"\" class=\"wp-image-5901\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6nb.jpeg\" alt=\"\" class=\"wp-image-5901\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Podobnych usprawnie\u0144 Dependency Injection jest wi\u0119cej i je\u015bli jeste\u015bcie nimi zainteresowani to odsy\u0142am Was do oryginalnego blogposta Kamila My\u015bliwca.<\/p>\n","innerContent":["\n<p>Podobnych usprawnie\u0144 Dependency Injection jest wi\u0119cej i je\u015bli jeste\u015bcie nimi zainteresowani to odsy\u0142am Was do oryginalnego blogposta Kamila My\u015bliwca.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/trilon.io\/blog\/nestjs-9-is-now-available\">https:\/\/trilon.io\/blog\/nestjs-9-is-now-available<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/trilon.io\/blog\/nestjs-9-is-now-available\">https:\/\/trilon.io\/blog\/nestjs-9-is-now-available<\/a><\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":[],"innerBlocks":[],"innerHTML":"\n<h2>3. Vite 3<\/h2>\n","innerContent":["\n<h2>3. Vite 3<\/h2>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Vue po\u015bwi\u0119cili\u015bmy ca\u0142\u0105 <a href=\"https:\/\/vived.io\/sprawdzamy-jak-vue-chce-pokonac-angulara-i-reacta-frontend-weekly-vol-95\/\">poprzedni\u0105 edycj\u0119 naszego przegl\u0105du<\/a>, dlatego w tym tygodniu o Vite b\u0119dzie w telegraficznym skr\u00f3cie. W minionym tygodniu premier\u0119 mia\u0142a trzecia wersja narz\u0119dzia do budowania aplikacji od Evana You. Jak chwal\u0105 si\u0119 jego autorzy, z ich rozwi\u0105zania korzysta ju\u017c mi\u0119dzy innymi Nuxt 3, SvelteKit, Astro, Hydrogen, SolidStart, Cypress czy Storybook. Spokojnie mo\u017cemy powiedzie\u0107 wi\u0119c, \u017ce Vite powoli przebija si\u0119 do pierwszej ligi frontendowego toolingu.<\/p>\n","innerContent":["\n<p>Vue po\u015bwi\u0119cili\u015bmy ca\u0142\u0105 <a href=\"https:\/\/vived.io\/sprawdzamy-jak-vue-chce-pokonac-angulara-i-reacta-frontend-weekly-vol-95\/\">poprzedni\u0105 edycj\u0119 naszego przegl\u0105du<\/a>, dlatego w tym tygodniu o Vite b\u0119dzie w telegraficznym skr\u00f3cie. W minionym tygodniu premier\u0119 mia\u0142a trzecia wersja narz\u0119dzia do budowania aplikacji od Evana You. Jak chwal\u0105 si\u0119 jego autorzy, z ich rozwi\u0105zania korzysta ju\u017c mi\u0119dzy innymi Nuxt 3, SvelteKit, Astro, Hydrogen, SolidStart, Cypress czy Storybook. Spokojnie mo\u017cemy powiedzie\u0107 wi\u0119c, \u017ce Vite powoli przebija si\u0119 do pierwszej ligi frontendowego toolingu.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"id":5902,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6ws.jpeg\" alt=\"\" class=\"wp-image-5902\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mr6ws.jpeg\" alt=\"\" class=\"wp-image-5902\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p>Nowy Vite to nie rewolucja, a raczej stabilna ewolucja. W\u015br\u00f3d zmian znajdziemy mi\u0119dzy innymi now\u0105 dokumentacj\u0119, szybszy cold start, czy mniejszy bundle size. W pojedynk\u0119, \u017cadna z nowych funkcjonalno\u015bci nie robi wi\u0119kszego wra\u017cenia. Sumuj\u0105c je wszystkie w jedno wydanie, mamy jednak do czynienia z naprawd\u0119 solidn\u0105 aktualizacj\u0105. Je\u015bli interesuj\u0105 Was szczeg\u00f3\u0142y, to w \u017ar\u00f3d\u0142ach znajdziecie pe\u0142n\u0105 notatk\u0119 towarzysz\u0105c\u0105 wydaniu.<\/p>\n","innerContent":["\n<p>Nowy Vite to nie rewolucja, a raczej stabilna ewolucja. W\u015br\u00f3d zmian znajdziemy mi\u0119dzy innymi now\u0105 dokumentacj\u0119, szybszy cold start, czy mniejszy bundle size. W pojedynk\u0119, \u017cadna z nowych funkcjonalno\u015bci nie robi wi\u0119kszego wra\u017cenia. Sumuj\u0105c je wszystkie w jedno wydanie, mamy jednak do czynienia z naprawd\u0119 solidn\u0105 aktualizacj\u0105. Je\u015bli interesuj\u0105 Was szczeg\u00f3\u0142y, to w \u017ar\u00f3d\u0142ach znajdziecie pe\u0142n\u0105 notatk\u0119 towarzysz\u0105c\u0105 wydaniu.<\/p>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/image","attrs":{"align":"center","id":5903,"sizeSlug":"full","linkDestination":"none"},"innerBlocks":[],"innerHTML":"\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mu4sv.jpeg\" alt=\"\" class=\"wp-image-5903\"\/><\/figure>\n","innerContent":["\n<figure class=\"wp-block-image aligncenter size-full\"><img src=\"https:\/\/vived.io\/wp-content\/uploads\/2022\/07\/6mu4sv.jpeg\" alt=\"\" class=\"wp-image-5903\"\/><\/figure>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/heading","attrs":{"level":3},"innerBlocks":[],"innerHTML":"\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n","innerContent":["\n<h3>\u0179r\u00f3d\u0142a:<\/h3>\n"]},{"blockName":null,"attrs":[],"innerBlocks":[],"innerHTML":"\n\n","innerContent":["\n\n"]},{"blockName":"core\/paragraph","attrs":[],"innerBlocks":[],"innerHTML":"\n<p><a href=\"https:\/\/vitejs.dev\/blog\/announcing-vite3.html#new-documentation\">https:\/\/vitejs.dev\/blog\/announcing-vite3.html<\/a><\/p>\n","innerContent":["\n<p><a href=\"https:\/\/vitejs.dev\/blog\/announcing-vite3.html#new-documentation\">https:\/\/vitejs.dev\/blog\/announcing-vite3.html<\/a><\/p>\n"]}],"_links":{"self":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9944","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/comments?post=9944"}],"version-history":[{"count":1,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9944\/revisions"}],"predecessor-version":[{"id":10470,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/posts\/9944\/revisions\/10470"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media\/8882"}],"wp:attachment":[{"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/media?parent=9944"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/categories?post=9944"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vived.io\/pl\/wp-json\/wp\/v2\/tags?post=9944"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}