How do /you/ write tests for React components?

I have tried many strategies to go about this. I did snapshot tests for most of the simpler components; but when there is redux and other libraries involved, doing a snapshot test for even a small component turns out to be too much work; unless you shallow render. Then, the only thing you accomplish from the test is whether or not the components render.

The best way to write unit tests is to write the tests first, that way you are only considering what output you need for different conditions and not worried about the implementation. In case of testing functionality of a component, I see tests that simulate button clicks and what not. Do you write the tests after the component is complete? Doesn't it make it harder to write tests for all the cases (your tests tend to get biased by the implementation)? Or do you write them as you are writing the component?

What is your approach to writing tests for the UI? I feel like I am missing something important.

Comments

[Vincenzo]

I do TDD my actions-reducers-helpers and only snapshot tests the ui.

I find quite silly TDD components, as in:

IT SHOULD HAVE A BUTTON
  RUN
    FAILS
  add a button
  RUN
    SUCCESS

I think it slows down and does not add much.

What I usually tend to do is to leave View quite logic free, and move everything more logic related to helpers functions that I tdd.

[Shreya Dahal]

That's what I've been doing. I've seen some posts from avid TDD practitioners and wanted to know how they go about it beyond a simple tutorial.

[Vincenzo]

if you say something like I did on reddit, people will downvote you to death :D

here you can say it out loud, is freeing:

TDD ON COMPONENTS IS USELESS