Setting up vite, React, TypeScript, eslint, prettier, vitest, testing-library and react-router

I wholeheartly love this guy, just starting this type of project and this tutorial actually made it more managable and fun. Thanks a bunch my guy!🥲

very usefull video thank you for makin it. I have question I feel like I am following each steps one by one but somehow I still can manage to miss something or I dunno at some point I have a different result than the video. Can it be because now the codes changes a little or my previous setting are not allowing it or I am really missing something.
Who else had a same issue ?

Nice overview, thank you!

OMG! I tryied to set up jets for 2 days and now I found this video, thank you a lot!

Anyone or @CodingGarden having a problem with the App.test.tsx file?

I'm getting "Cannot find name 'expect'" - when I import it from 'vitest' I get a different error:

Property 'toHaveTextContent' does not exist on type 'Assertion<HTMLElement>'

No idea what I'm missing here.

All steps have been followed perfectly excluding the fact that I converted this app from CRA to Vite before starting this project...

Thank you CJ for the super helpful video.
If someone get error when accessing `toHaveTextContent` when writing tests add `import '@testing-library/jest-dom/vitest' ` in setupTest.ts file

Thank you for this guide!
I found answers to some questions I had before.

If anyone runs into an error (related to expect.extend(matchers);) in your jest setup upon running a test, change your matchers import to "import * as matchers from '@testing-library/jest-dom/matchers';"

where is placed expect() function

I have been updating a react app that I 'inherited' and decided to use vite, vitest and eslint. I read through countless articles, all saying different things, all configuring their apps slightly differently. Then I found this video .... a presenter that speaks clearly, presents the content at a comfortable pace to follow along, doesn't rush or skip over important bits. One of the best coding tutorials I have come across. Thanks to this video, i was easily able to re-configure the app. Great job.

Thanks, helped me a lot

comma dangle, ick!
rules: {
'react/react-in-jsx-scope': 0,
"comma-dangle": "off",
"@typescript-eslint/comma-dangle": "off"
},

But what if I need to setup react app vite with only RTL, I mean without using vitest? How to bootstrap that in the config files?

Thanks, I was struggling so much with the setup, you made it really easy

Great stuff! Been slinging code for almost 20 years picking up TypeScript and React after working in ServiceNow for the last 5 years. Used React back in the day for a project didn't like but I am seeing some good changes they have done, plus a huge fan of Nextjs SSR. It is actually the 3As of testing, Arrange, Act , Assert , not expect. Also I see you putting the Act in the Assert line usually I separate them out to have 3 distinct lines. Hopefully soon vite cli will be able to pick testing libraries like it is in nextjs with npx. Vite works great for Vue 3 apps as well, always like Vue. Keep up the good work, wish this all existed back when I was cutting my teeth, now the problem is having the time to watch the 60 tabs of videos. To all the self educators trying to get a start I was framing houses while in school, keep grinding and you will get there! Build stuff everyday and hustle up some freelance work! It landed me my first fulltime gig.

thank you

thank you for this video, really appreciate you taking the time to walk through everything! I'm working through The Odin Project and am currently on the React testing lessons. They teach you how to use create-react-app to build applications (which has Jest and the react testing library configured out of the box), but I much prefer Vite. This video includes everything that I need to know to still follow the curriculum despite the differences in tech used.

sir i love your turorial am your follower from cameroon