How to write component tests with Cypress

[@DodaGarcia]

I just started using Cypress and am already completely hooked. It makes testing a breeze.

[@WendimuSitotaw]

Loved how it's presented: simple. Liked and subbed halfway through the video!

[@richardogujawa-oldaccount1336]

I was getting a little bit frustrated trying to get the react testing library to play nice with Typescript, and at a certain point was just downloading a bunch of dependencies as was recommended in different articles, videos I watched etc., but nothing seemed to work. But Cypress just seems to work out of the box. Can't say thank you enough!

[@homebrewguy2]

You did a fantastic job man! I’ll be back for more of your great content🤠

[@salemfenn666]

Great explanations and examples

[@yashsonalia3506]

I have created a custom theme using styled-components, how do I implement the same in cypress?

[@harshjaiswal3947]

What if there is a route navigation after submitting form ? The current url would get updated due to which we won't be able to write more tests for the same component as the component mounting would fail, right ?

[@NeverCodeAlone]

Very nice thx a lot!!

[@thrash_jesus]

So how do i actually RUN the tests (for CI purposes)

[@asdfaam]

Why exactly do we need to put square brackets around data attributes in Cypress?

[@PiotrNalepa]

How to load custom styles coming from SCSS files into the test to make sure the component looks like expected?

[@Cypressio]

Hi Piotr. You will need to include the compiled .css file that gets output from all of your SCSS files into Cypress.

[@alifcorrea7329]

What is the vantage of using component tests? (its a honest question). Is not a real environment, if application brokes, the test not catch this.

[@joaoreisjpk]

Awesome!

[@rojalbati5728]

Yeah!!! Cypresssssssssss

[@chrisdaman4179]

You should really focus on your dev experience for people who can't use the gui. The docs are completely useless for ci/cl pipelines setups and dev container work. There is no reason a robust cli couldn't be put together to fix this.

[@RizaHariati]

There should be a shortcut for 'data-test' just like with id (#something) or class(.something) typing("[data-test='something']) is a bit annoying after a while

[@rand0mtv660]

Watch the video again and from 7:35 you can see that a custom selector was created that does exactly what you mention in your comment.

[@LarsRyeJeppesen]

So a react only test. Zzzz. Maybe you should have mentioned it

[@Cypressio]

Hi Lars, writing component tests are basically the same regardless of the UI framework you are using. The APIs are identical.

[@LachlanMiller]

Are you looking for Vue or Angular? Maybe useful: kzbin.info/www/bejne/pH2lqImFf6mHZ6s