Search code examples
reactjsunit-testingreact-reduxtddsingle-responsibility-principle

Visualization of unit tests


I recently tried TDD methodology and i really liked it. You can write some tests for specified unit, imitate different behavior, data and mock object that allows you to check only small piece of code without need of running entire application. But I have some questions about unit visualization.

Suppose we have a simple chat application with homepage, lobby and chat widget components (p. 1). enter image description here

When you are working on chat widget component (for example), you can write unit test for it and don't care about other components. But what if want to see widget render results? It is so annoying to run entire application, go to lobby page, switch to chat widget tab every time I changed my code.

Are there are any practices to run render unit tests? Does it depend on technology stack?

My frontend stack: React, Redux, Jest + React testing library.


Solution

  • If a test shows you rendered content, than it is not a unit test. The result of a unit test must be binary (failure or success). If you have to look at test output to figure out if it was successful, it is not a unit test.

    What you are looking for it not unit tests but UI test. For the Web context selenium comes to mind. It is used the define scenarios for poking at your UI and asserting on outcomes. You can also use it to automate the process of

    "run entire application, go to lobby page, switch to chat widget tab every time I changed my code".