Cypress Testing with React - Simple Tutorial

In this video we will learn about testing a React application with Cypress. With Cypress, you can easily create tests for your modern web applications, debug them visually, and automatically run them in your continuous integration builds. We will setup a simple application, write our first e2e test, and make sure that everything behaves as we expect!

[hamzahahmad]

Really appreciate short videos that give enough of a good introduction to get us going, without taking 30 - 40 minutes to get to the point

[phillyt]

Thank you for this tutorial.

For those not using TS, and still experiencing the red line error for cy, create an .eslintrc file (if you don't have one already), and add:
{
"extends": ["react-app"],
"plugins": ["cypress"],
"env": {
"cypress/globals": true
}
}

also install this if you run into an error while re running your react app: npm install eslint-plugin-cypress --save-dev

[tomasburian]

Cypress is now everywhere, so it's good for anyone aiming to increase his seniority in development to learn it. Thanks for this vid, it's a great help.

[bleakCode]

I am an intermediate fullstack developer and I really enjoy learning new things about frontend from your channel! Keep up the good work!

[icoderdev]

You are truly a life saver, always delivering new concepts and tools.

[electroheadfx]

I love your work, thanks for these best reacts tutorials

[StephenBeale]

0:48 from following these two steps exactly (installing in my project directory), I get ENOENT error when trying to run it - any tips? Not much on StackOverflow or online generally. Thanks

[fluffcedro]

Hi, it says Your system is missing the dependency: Xvfb

Install Xvfb and run Cypress again.
Could you help me please?

[jou]

What’s this react-query-tutorial is about? I understand that you’re doing testing on the project but what are we testing on ? You didn’t show what the modules in the projects are. What’s in the index.html file, or other components ?

[justingiovanetti]

Why not test that the h1 exists on the page and has content instead of what the content is. If the content’s dynamic or even manually changes then the test fails.

[Adam-oqxq]

thanks bro that was really useful - straight to the point

[meet]

Do you use this testing frameworks on projects that you worked on ?

[lokeshkavisth]

Very great vodeo... Can you make one for nodejs testing?

[FursMars]

great and clear explanation thank you very much for you video

[githinjibonface]

In case i get a job as a cypress automation engineer, is it a must i use page object model as a design pattern? Or i can use the other way around

[joshuavictor]

what extension did you used that showing like a hint whenever you type the command?

[arberplaku]

Great amazing video thank you for your content if it would be possible could you maybe make more videos about testing with cyphress in the future

[harag]

Great video and quick overview, What are your thoughts between JEST, Cypress or "A N Other" ? I've heard of jest, but not looked into it yet.

[FredrikStrömberg-qs]

I read if i want to use the Cloud that is not free, do i need to use the cloud or is it enough to just run the test locally?

[ooorayooonyoooo]

hello cosden, i would really love if you take uploading video explaining what you should do and how to use typescript in react into account 🤍