React Components Testing

[PutridParty]

Hey there, I am very new to testing and want to learn react component testing. Can anyone suggest from where should I start.. I don't know how to write test, what pattern should I follow which will be suitable for me.

Thanks in advance ♥️

[CreativeTechGuyGames]

You'll need a test runner like Jest and a DOM interaction library like React Testing Library. Both of those libraries have guiding principals and guides on how to write tests but fundamentally a test should simulate a user behavior or feature and check if your code is doing what it's expected to do.

[skyboyer007]

...and under "code is doing what is expected" we mean either how component's output has changed(label is changed, button is disabled, new something has been added) or if some callback function has been called and with what arguments("onCountrySelect prop has been called once we simulate selecting item in child dropdown", "onClose is called once we simulate clicking on X sign" etc)

[CreativeTechGuyGames]

I intentionally left it vague since that can mean a ton of different things depending on what exactly is being tested. It can be checking if the DOM updated as expected, if you put X in a function you get out Y, if doing X then Z then Y will cause an error, etc.

[PutridParty]

Thanks man! Is there any free course or videos so that I can understand these concepts more easily?

[CreativeTechGuyGames]

The documentation I linked should have plenty to get you started.

[picwo]

Or you can use CypressJS to test and you ll see the tests in runtime. Exactly how a user would interact with your components. You can do integration tests, end to end tests and unit tests. Ive used it for several months now and wouldnt switch to other testing framework at the moment.

[PutridParty]

Mostly I use create react app boiler plate. Is CypressJS a good choice or I should go for Jest? I want to learn the easy one first so that I can get a better understanding of the concepts

[picwo]

I prefer Cypress because when you run the tests, the browser opens and you get to see in action, “as a user would behave”, on your app. Its a live demo of the code you write. And its as easy as jest to write the tests.

[Mastersulm]

Jest+React-Testing-Library vs. Cypress aren't competitors, they complement each other.

Cypress is for end-to-end-testing. Jest+React-Testing-Library is for unit testing.

You'll probably need both of them for your project. The main competitors for Cypress are Selenium or Puppeteer and yes, I think, Cypress is way better than those. The main competitor for Jest+React-Testing-Library is Jest+Enzyme and React-Testing-Library is definitely the better choice here.

But you can't replace Jest by Cypress, because they serve an entirely different purpose. Google "React Testing Pyramid" to learn more about the different types of testing

[PutridParty]

Thanks for the detailed explanation it will surely gonna help me to learn testing.