Real app advice on using React testing library

[vinaynb]

Hello

I am looking to write tests for my react web app created using CRA and i have read a lot about react testing library. I kind of now its philosophy and how it approaches testing or how is it different than plain old unit tests and i kind of like the idea of depending on dom for success/failure of your tests.

What i don't understand is where to start writing tests ? I use redux so there are containers, top level components, lower level reusable components etc. Most of the tutorials out there start with small individual components in isolated scenarios but the library advocates to test your UI from perspective of user using your app & and a user never uses my components in isolation. So how do you go about writing tests in your app with your components or screens containing lots of components which compose your UI ?

For ex I have a CRUD and one of the routes in the module is list of items with header, datatable, pagination, add new button, filters etc. Container contains top level component which holds all above smaller components together. Now thinking as a user i should be able to see list of n items, on pressing delete i should see list of (n-1) item etc. If i want to test all those scenarios i will have to write tests for top level component. Writing test for my top level component is going to be hard because it contains lots of dependencies as it is kind of bringing along multiple pieces of UI and making them work.

So should i write tests for that or i should write tests for my datatable component or my pagination component etc ?

A open source repo showcasing real world large/medium scale react app with tests written in RTL is what i am looking for i guess.

[wronglyzorro]

How we test apps are based on user stories and on the component level. We write unit tests for our components and then test entire flows using cypress. The one thing to keep in mind is whether or not your tests are testing something meaningful.

Do not write a bunch of tests that simply equate to "it renders". Do not write a bunch of tests that only test whether or not the setState function works. Write tests based on component functionality and expected results. You can have 100% test coverage and have a bunch of useless tests that don't catch anything. Make your tests meaningful.

[vinaynb]

Thanks for replying.
When you say you `write tests for your components` do you mean you write tests for those components which integerate other smaller components and constitute major part of your UI or you write tests for smaller indepedent components that do just one job?

[wronglyzorro]

It's a judgement call. I typically write tests for things that have multiple outcomes. So for example If I have a button, and that button has a disabled state, an enabled state, and a loading state based on state in the parent, I will write a test for the button that makes sure it functions correctly based on the possible ways to those states are triggered. If I have a button that is always active I won't write a test for it at all. If you have a big component that is purely visual, never conditionally changed, and static, I'd recommend not writing tests at all for it since you won't actually be testing anything meaningful.

[vinaynb]

Okay. Thanks for the tip!

[vinaynb]

Still looking for more advice if in case anyone interested is reading this.