Cypress: Setting up Cypress in a React + Typescript project

Link to coupons with BIG DISCOUNTS 🤯 :
👉 Mastering Terraform: From Beginner to Expert - www.lauromuell...
👉 Mastering GitHub Actions: From Beginner to Expert - www.lauromuell...
👉 Write better code: 20 code smells and how to get rid of them - www.lauromuell...
Do you want to bring your dev skills to the next level? Then check out the links with BIG DISCOUNTS to my courses on Udemy! Purchasing the courses is a great way to support this channel and the content I produce, while also getting something amazing in return, so head there right now! I am looking forward to seeing you there and receiving your feedback on the course!
The courses also have a 30-day money-back guarantee, so if you are not satisfied with the purchase, you can ask for a refund, no questions asked.
***
Hi everyone! Today we start working on setting up Cypress in our React + Typescript project, so that we can effectively create E2E tests. Our goal is to get Cypress running within our project and making sure that its Typescript configuration is compatible with what we already have in place. In our TDD mindset, E2E tests are essential for us to get high confidence in our software, and Cypress is a great way to achieve that in frontend projects :)
This video is part of a series where we are organically developing a productivity app with React and TypeScript. We will focus on implementing Agile and XP principles in our series, which means we will focus on TDD, continuous delivery, feature flags, and a lot of other cool stuff that we have to take care of to have our app deployed to production as quickly and as often as possible.
---
You can support the channel on the following links, or by getting any of the books mentioned in the list below (which I highly recommend as readings to improve your developer skills and mindset).
Patreon: / lauromueller
PayPay: paypal.me/laur...

[@grif.n]

BTW, you make all this config stuff look effortless, while it can usually seem quite daunting (for me at least). Thanks for the clear and concise instructions.

[@LauroMueller]

Happy that it helps! I guess I've struggled enough with it myself before getting the hang of it 😅 My tip is to always take the time to understand the underlying tool and its application model, rather than just trying to get it to work by bringing together snippets from different sources. Here is a nice article about how application models can be used for software development: www.infoq.com/articles/application-models-software/

[@user-ok9pg1rc1j]

believe me or not, this video is exactly what I need atm

[@LauroMueller]

Awesome :) Posting the next one on the topic tomorrow

[@KerimWillem]

Thank you for the effort of making these videos 🙏

[@1879heikkisorsa]

Awesome video, thanks!

[@LauroMueller]

Thanks for the feedback!

[@grif.n]

Can prettier format also format the eslint fixable errors? Or should I configure eslint to do the formatting with prettier rules? I do like the idea of prettier handling all formatting but ideally it would include the auto-fixable eslint problems

[@LauroMueller]

Hmm that depends on the rule. For example, an "unused variable" warning from ESLint cannot really be fixed by Prettier because Prettier would have to add a usage or remove the unused declaration to fix the issue. There are, however, several styling rules that can be unified by integrating Prettier and ESLint: prettier.io/docs/en/integrating-with-linters.html
For auto-fixing ESLint errors, this can also be helpful: www.digitalocean.com/community/tutorials/workflow-auto-eslinting