How to setup a CI/CD pipeline using Github Actions by running automated jest unit tests

Github actions are a great way to improve the quality of your team and project's code by automatically running various tests and checks against your teams pull requests before merging them into trunk. Here is a quick overview of how to get that setup.
🤑 Patreon / webdevjunkie
🔔 Newsletter eepurl.com/hnderP
💬 Discord / discord
📁. GitHub github.com/cod...
My VSCode Extensions:
theme: material community high contrast
fonts: Menlo, Monaco, 'Courier New', monospace
errors: Error Lens
extra git help: Git Lens
tailwind css intellisense
indent rainbow
material icon theme
prettier & eslint
ES7+ React Snippets

[@arno.claude]

Never knew it was that easy! Thank you ver much, more videos of that nature please!

[@MediaDock]

Thanks. Simple, straight-forward, and complete.

[@MrPaulPhan]

Keep doing what you’re doing

[@bulelanibotman]

jesus, cody! why are you such a great teacher?

[@jeff-creations]

Great video Cody, thanks! I learned a bunch

[@arif3012]

Thanks for sharing such a simple example. 👍

[@SeibertSwirl]

Good job babe!!!!

[@rohitreddy6794]

You both are so cute lol

[@SeibertSwirl]

@@rohitreddy6794 haha thank you 😊

[@bimalsharma6248]

Great stuff !!

[@lamargtv2572]

Great video. Keep it upp!

[@27sosite73]

thank you!

[@parrapaTh3Rappa]

File > Preferences > Settings > Features (on the left side bar) > Explorer (within the "Features" section) > Untick “compact folders”
That is all 😂

[@yousafwazir3167]

Thanks can you do more production based ideas / practices

[@ZEMMOURI_Med]

Thanks, what color theme in VS Code do you use, please?

[@ujangaripin7630]

thx it's help me

[@09487abc]

謝謝你的教學

[@aislanarislou]

What your script "yarn ci" does ??

[@jlo3349]

Thanks! Very clear! A side question - I noticed your vs code theme is customised (has nice colours and icons next to the files) - any links you can refer for setting up my vs code please?

[@WebDevCody]

This theme is material community I think

[@aislanarislou]

One more question: how to define environment vars that are used by some of the code, and sometimes the tests itself ?

[@WebDevCody]

You can add them to your GitHub repo and pull them in with your actions

[@romimaximus]

Thankx for sharing this great content !! ...but could you make a short video tutorial, explaining what's the difference between "Github Actions Automatically Deploy" and a "Pipeline" ? cause im a beginner in CI/CD... and this so confusing to me ... 😂😂

[@WebDevCody]

a pipeline is just a series of steps you run to get your code build, tested, and deployed. What I showed in this video was how to build a single step in a potentially larger pipeline (no talked about in this video). So if I were to add a deploy step which only runs after the tests pass, it would be more of a pipeline.

[@romimaximus]

@@WebDevCody Ok, go it !! thank you very much !! ..i really appreciate .. 😁👍

[@_emnljrz]

Thanks! But perhaps you can use dark mode (dark reader) plugins in your chrome? Nevertheless great work

[@vishuhanda1837]

do you execute unit tests on github actions on a browser or they are getting executed in head less mode

[@ucol2068]

Hi, tried doing same .github\workflow you did but i get an error.

[@prathibhasathyanjalee5163]

What's the error that you are getting?

[@sogzful]

can splitting the tests into too many folders affect the speed? mine take forever

[@philcajurao]

Can you check my Classroom React?

[@WebDevCody]

Your what?

[@philcajurao]

I am making a Classroom App for my thesis and it is made from React

[@Rust_Rust_Rust]

@@philcajurao for a thesis? Is this an undergraduate degree?

[@yousafwazir3167]

Thanks can you do more production based ideas / practices

[@yousafwazir3167]

Thanks can you do more production based ideas / practices