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/codyseibert/youtube
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!

[@travelvideos7999]

Thanks. Simple, straight-forward, and complete.

[@jeff-creations]

Great video Cody, thanks! I learned a bunch

[@arif3012]

Thanks for sharing such a simple example. 👍

[@bulelanibotman]

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

[@MrPaulPhan]

Keep doing what you’re doing

[@lamargtv2572]

Great video. Keep it upp!

[@yousafwazir3167]

Thanks can you do more production based ideas / practices

[@SeibertSwirl]

Good job babe!!!!

[@rohitreddy6794]

You both are so cute lol

[@SeibertSwirl]

@@rohitreddy6794 haha thank you 😊

[@27sosite73]

thank you!

[@ZEMMOURI_Med]

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

[@09487abc]

謝謝你的教學

[@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]

What your script "yarn ci" does ??

[@sogzful]

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

[@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

[@vishuhanda1837]

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

[@_emnljrz]

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

[@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 .. 😁👍

[@okamimoushiyou]

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

[@ucol2068]

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

[@prathibhasathyanjalee5163]

What's the error that you are getting?

[@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