Тёмный

Setup Testing Env: Jest, React Testing Library, eslint, GitHub Actions -React.js Testing Tutorial #2 

Bruno Antunes
Подписаться 22 тыс.
Просмотров 26 тыс.
50% 1

Опубликовано:

 

11 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 90   
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
I opened a PR to update all dependencies including ts-jest and jest 29 (only 2 files were changed): github.com/bmvantunes/youtube-react-testing-video2-config-jest-react-testing-library/pull/1/files In summary: Upgrading to Jest 29 + ts-jest 29 requires us to change 3 lines inside our jest.config.js and add a new dependency jest-environment-jsdom - thtat's all we need to do :)
@denniec7994
@denniec7994 Год назад
Bruno, thank you so much for the update. I was able to clone your project and run tests fine but in a new project that I'm starting where I have the most updated dependencies the "unexpected token '
@denniec7994
@denniec7994 Год назад
Also FYI, these are my dependencies: "dependencies": { "next": "12.3.0", "react": "18.2.0", "react-dom": "18.2.0" }, "devDependencies": { "@testing-library/dom": "8.18.0", "@testing-library/jest-dom": "5.16.5", "@testing-library/react": "13.4.0", "@testing-library/user-event": "14.4.3", "@types/jest": "29.0.3", "@types/react": "18.0.20", "@typescript-eslint/eslint-plugin": "5.37.0", "@typescript-eslint/parser": "5.37.0", "eslint": "8.23.1", "eslint-config-next": "12.3.0", "eslint-plugin-jest": "27.0.4", "eslint-plugin-react": "7.31.8", "eslint-plugin-testing-library": "5.6.4", "husky": "8.0.1", "jest": "29.0.3", "jest-environment-jsdom": "29.0.3", "lint-staged": "13.0.3", "prettier": "2.7.1", "ts-jest": "29.0.1", "typescript": "4.8.3" },
@BrunoAntunesPT
@BrunoAntunesPT Год назад
​@@denniec7994 I did a commit on top of that PR to update all versions to today's versions (2022-November-02) and the build keeps passing as before. You might have forgotten to copy some configuration from my repo PS - If you clone my repository you'll see there are no error there. You can compare it with your repo and see the differences :) github.com/bmvantunes/youtube-react-testing-video2-config-jest-react-testing-library/pull/1/files
@denniec7994
@denniec7994 Год назад
@@BrunoAntunesPT Again, thank you so very much I really appreciate it. I've been going crazy researching a solution for the last few days.
@ricardocosta4663
@ricardocosta4663 3 года назад
The best Portuguese tech youtuber strikes again, looking forward to see it later at night 🙂.
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
You are amazing Ricardo 😍 thank you 😉😉
@martiny706
@martiny706 3 года назад
I would never be able to setup this professional environment without this video. I do appreciate your efforts in creating this content and sharing it with us 🙏🏻
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
I'm glad you found this video useful 😍 thank you Martin 😀
@jniyaz
@jniyaz 3 года назад
Looking forward this entire series Bruno. Thanks 👍
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Thank you 😊😊
@jackwright7014
@jackwright7014 2 года назад
Brilliant video thanks a lot!! I love how you eliminate errors one-by-one and explain how to fix them. It's a REALLY good way of teaching. Most tutorials will give you the correct config straight away, and I have no idea what most of it does.
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
I do that because when I was learning those types of tutorials completely frustrated me. Personally I need to understand every single detail and I also like to teach that way - sadly for the RU-vid algorithm says that my style of teaching is not good because the videos are wayy too long 😂😅
@vittoriomorellini1939
@vittoriomorellini1939 Год назад
This series is perfect to learn how to test a Next project. Thank you Bruno!!
@bovc8698
@bovc8698 Год назад
Great videos Bruno! For any future watchers at 12:15 jsdom does not come shipped by default anymore and must be installed with npm install -D jest-environment-jsdom
@BrunoAntunesPT
@BrunoAntunesPT Год назад
You are absolutely right =) You can see a PR I have open on that repository showing all the changes needed: github.com/bmvantunes/youtube-react-testing-video2-config-jest-react-testing-library/pull/1/files
@vittoriomorellini1939
@vittoriomorellini1939 Год назад
Very interesting series Bruno, exactly what I need in my Next.js projects. One my lack it is the missing of automated test in next.js projects
@denniec7994
@denniec7994 Год назад
Bruno, I just wanted to thank you again for putting together this amazing set of videos.
@Kevin-yw5qr
@Kevin-yw5qr 3 года назад
Started up a new project and ran into the same exact problems that you did in this tutorial. I went through so many resources and found a million different answers, but this video was right on the money. Thank you again.
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Thank you Kevin 🙂 very happy to read your comment and knowing the video was useful to you ❤️❤️
@devstudies4168
@devstudies4168 2 года назад
Parceiro que orgulho! It work's perfect here! Better tutorial that I saw related with Jest + Typescript setup
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Fico muito feliz 😍😍😍 muito obrigado pelo comentário parceiro ❤️
@CodaJohnPaul
@CodaJohnPaul 2 года назад
Wow, amazing amount of work, Bruno. Thank you so much, it would have taken me *months* to figure all of this out.
@adharshmanikandan2326
@adharshmanikandan2326 3 года назад
Very well done again, introducing the most useful and often confusing parts of setting up a system.
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
I'm very happy reading your comment knowing the video is helping you 😍 thank you 😃
@AhmedSalah-wc4le
@AhmedSalah-wc4le 3 года назад
Thank you Bruno for this series. One of the best techs.
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
I'm very happy you are enjoying it 😍😍 thank you 😊😊
@curiousprogrammer90
@curiousprogrammer90 3 года назад
Awesome! Keep up the great work! Cypress next! :D
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Thank you my friend 😊 cypress is 100% something I would love to cover - just not sure if it is something my audience wants to watch 😅😅
@curiousprogrammer90
@curiousprogrammer90 3 года назад
@@BrunoAntunesPT everyone would appreciate it for sure! :)
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
When this series is over, I'll create a poll in the community tab asking what people want to see next - that way people can start to vote on what they prefer to see in the channel 😊
@hayderjabur6258
@hayderjabur6258 2 года назад
Like your energy, thank you for the effect to make these tutorials
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Glad you like them!
@YuriiKratser
@YuriiKratser 2 года назад
the kindness teacher ever
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Thank you 😍 I'm sure you very kind as well ❤️
@Kei-iz6uv
@Kei-iz6uv 3 года назад
Thank you Bruno! The content is so valuable and informative. What a gem!
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Thank you Kei 😊
@oscargm1979
@oscargm1979 2 года назад
Please,correct me anyone if I am wrong,but I think the lint-staged script needs a dot in each command.Otherwise it will only format actual file.: "lint-staged": { "*.(tsx|ts)": "eslint . --cache --fix", "*": "prettier . --write --ignore-unknown" } Besides this,I think it is the best setup I have seen.I really appreciate your insights about Typescript/React/Testing.You are very good.
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
no need for the dot :)
@jorgegarnicablanco8136
@jorgegarnicablanco8136 2 года назад
This video is worth gold
@gonwms
@gonwms 2 года назад
👏🇵🇹 thanks Bruno! Keep it up!
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Muito obrigado ❤️😍
@adrianvaldes3953
@adrianvaldes3953 3 года назад
Thanks for creating this content Bruno, it is really great material.
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Thank you Adrian, I'm glad you find it useful 😍😍
@ozzyfromspace
@ozzyfromspace Год назад
Honest question: should I feel bad that I wouldn't be able to replicate such a professional setup in realtime if asked to? This is amazing, and I'll be using it, but also, it's kind of intimidating. Like, how does someone get this good at testing config? Impressive and informative video, Bruno!
@leoamato6113
@leoamato6113 2 года назад
Fua! You know a lot men 👍🏻👏
@ankitmehrotra8519
@ankitmehrotra8519 2 года назад
Brilliant video. Thanks a lot.
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Thank you 😍
@VK-hs8qr
@VK-hs8qr Год назад
Bruno, we miss your videos. I hope you start making videos again.
@markokraljevic1590
@markokraljevic1590 2 года назад
very useful, thank you
@lucasfernandes9381
@lucasfernandes9381 Год назад
Muito obrigado, Bruno.
@ayoubb-dev
@ayoubb-dev 2 года назад
thank you sir for this great content
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Thank you 😍
@KateChu-jz5ps
@KateChu-jz5ps Год назад
Thank you sososososo much!!!!! This saves me!!!
@priteshsinghbhati
@priteshsinghbhati 2 года назад
Well explained 👍
@JorgeMorgado259
@JorgeMorgado259 Год назад
Hi!, thanks for the video. I have a question: eslint dont recognize .spec or .test files so dont check my test files I have installed: yarn add -D eslint-plugin-jest and setup in .eslintrc.js: "plugin:jest/recommended", "plugin:jest/style", Any idea?
@jorgegarnicablanco8136
@jorgegarnicablanco8136 2 года назад
¡Gracias!
@Kevin-yw5qr
@Kevin-yw5qr 3 года назад
Thanks!
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Thank you very very much Kevin 😍😍😍
@hammadumar4878
@hammadumar4878 2 года назад
Sir, You are great I follow your videos please make a series on CI / CD Pipeline With Next.js Using Github Actions Because I'm struggling for past 3 weeks. Thanks Sir
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Thank you 😍 I even have a video deploying to GitHub pages 🙂
@markokraljevic1590
@markokraljevic1590 2 года назад
testing Next.js backend api would also be useful
@m2tdev
@m2tdev 2 года назад
you are awesome
@scraper1000
@scraper1000 2 года назад
I tried to run jest tests on pre-commit hook and fail if below coverage but it always passes the commit even if the percentage is below threshold :(
@oleksandr5128
@oleksandr5128 3 года назад
I can't imagine any modern project without typescript and jest and thanks to GOD we do not need to use Webpack config explicitly. And yes -- good job Microsoft, haha
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Microsoft has done an amazing lately ❤️❤️ I remember 10 years ago people used to hate them, nowadays I don't know many people hating on them 😍 I think that's proof of their amazing job with the tech community 😊
@bartekk6480
@bartekk6480 2 года назад
thx
@StarCourtesan
@StarCourtesan 2 года назад
do all this work the same for react native as well?
@sayedabrin
@sayedabrin 3 месяца назад
How can we do inegration testing in UI code level
@onepercentdaily8772
@onepercentdaily8772 2 года назад
If anyone fails at 15:03, `npm install -D jest-environment-jsdom`
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
Thank you very much for your comment - thanks to you I opened a PR to update all dependencies including ts-jest and jest 29 (only 2 files were changed): github.com/bmvantunes/youtube-react-testing-video2-config-jest-react-testing-library/pull/1/files
@damiangilz
@damiangilz 3 года назад
I tried to config Next with Preact with this config and I get an error from eslint that Next config is not found. I like using Next with Preact because Preact is so much faster than React, bummer.
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
I have never tried to use preact to be honest with you 🙂 if you share your repository I can try to have a look during the weekend and see if I can do something with it 🙂
@tahirahmedt9156
@tahirahmedt9156 2 года назад
Hi Bruno, what to do if I run into same error as at 10:00 using javascript ?
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
You mean the '
@napoleonbonaparte1260
@napoleonbonaparte1260 2 года назад
hello Bruno, can I use this setup in Node js?
@BrunoAntunesPT
@BrunoAntunesPT 2 года назад
It might need a few tweaks, but overall yes 🙂
@романжурба-н7д
@романжурба-н7д 2 года назад
TypeError: Cannot read property 'bind' of undefined Try to fix it reading all chrome and all posible fixes was tested but nothing...
@романжурба-н7д
@романжурба-н7д 2 года назад
May be it help someone, just downgrade ts-jest and jest to 26... P.S. React 17+
@charlesrp
@charlesrp 3 года назад
boring but ultra useful video
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Thank you very much ❤️ I agree with you, this type of videos where we are setting up environments is a bit boring, but important. PS - If you have any suggestions on how to make this type of videos more engaging or interesting and less boring, please let me know, I'm all hears 😍😍
@FouadMTabbara
@FouadMTabbara 3 года назад
It's useful and very well presented. Good job.
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
@@FouadMTabbara thank you very very much ❤️❤️
@king-manu2758
@king-manu2758 Год назад
These setups are a pain in the ass. I had a ton of issues getting cypress to work with github actions and all the tsconfig files (for a project at work). I don't enjoy all this process to be honest.
@arunkumar2786
@arunkumar2786 3 года назад
Hello bro .
@BrunoAntunesPT
@BrunoAntunesPT 3 года назад
Hello Arun 😊
Далее
World‘s Strongest Man VS Apple
01:00
Просмотров 31 млн
Тестирование React приложения
1:03:02
Next.js with React Testing Library, Jest, TypeScript
25:04
The Most Important Design Pattern in React
35:04
Просмотров 70 тыс.
World‘s Strongest Man VS Apple
01:00
Просмотров 31 млн