ReactFoo 2017

A conference on React


Isolated react components as a black box with automated UI testing

Submitted by Vivek Jagtap (@vivekjagtap011) on Thursday, 15 June 2017

Section: Crisp Talk Technical level: Intermediate Status: Confirmed & Scheduled

View proposal in schedule


Building react components in isolation to fullfil business use case and to acheive Zero coupling.
Automated browser UI testing using JavaScript and webdriver for your react components in isolation & how to avoid test cancer.


  1. Why - At, when we moved to react from BackboneJS, we started gradually, creating components like just home page then list view, and so on. But we soon realised that, components(reusable components) are getting messier, since there are so many components just because everything is component in React. Components started growing like crazy.
  2. Problem - Since we have our mobile website and desktop website separate (though we serve both with, we had to write same react components in desktop as well as mobile, may be with just styling / css changes, but the logical flow & business use case of a software feature used to remain same.
  3. Solution - Isolating bunch of components as a black box. We started creating npm modules, and including them in a code as a feature. So our isolated react component is not just a dump component, but it takes care of executing entire feature.
  4. Going further and decoupling things - it was easy for us to figure it out, what should be isolated component, what should not be. I will be showing when to make Isolated component and when not to.
  5. Using React storybook to build components in isolation
  6. Redux Store - Since its isolated component, we don’t share data, actions, store. Every isolated component works on its own store.

Speaker bio

I work with as part of Front End team



  •   Siddharth Kshetrapal (@sidkp) 2 years ago (edited 2 years ago)


    This can be a really interesting talk!

    Can you please add more details in your slides and submit a 2 minute video on what are you going to talk about. That would help us a lot.

    reactfoo team

    •   Vivek Jagtap (@vivekjagtap011) Proposer 2 years ago

      Hi Siddharth, should do it by EOD

Login with Twitter or Google to leave a comment