Update Feb 9 2016 : The ReactJS version is bumped to 0.14 in the seed project and updated the article accordingly.
As I said already, React is a solid piece of work from Facebook. Any solid software will be built with testability in mind; And React is not an exception to that. Facebook built React with complete testing support — They even released their own testing framework named “Jest” and React Test Utils for unit testing React components.
Here in this post, we’ll see how to build a react component in TDD approach.
What we’re going to build ?
We will build a simple Accordion component in React. If you’re not sure what an Accordion is, have a look at the twitter bootstrap page:
Setting up all these takes time. Therefore, I have created a seed project for bootstrapping the set-up and the initial boiler plate code. So, as the first step, clone the seed project to your system:
Once you download the seed and install the node modules, we’re good to start.
Developing the Component in TDD
We’re using Gulp as our build and task tool. If you open the gulpfile.js in the seed folder, you can see there are two main tasks for test driven development ( as explained in the project README file ). One task will build the project and open the development server in browser, while the other task run the unit tests and watch for any changes the source files and test files.
Open two terminal windows, and run gulp develop in one and gulp test in the other one.
There are two example files provided in the scripts folder and __tests__ folder. When you run the gulp test task at first, you should see those tests passing.
Accordion React Component
Let’s add the file accordionComponent.js in scripts and accordionComponent-spec.js in the __tests__ folders respectively.
From here onwards, we’re going to build our component by writing each functionality as a test case and then implementing them. When adding the test case, you should be able to see the tests failing in the terminal ( gulp test ). Hence, once we see the failing test, the next step is to implement the code to make them pass.
Test Case 1:
The accordion should exist as a React Component
Write the first test case in accordionComponent-spec.js
Note: By using jest.dontMock, we get the original react component in the scripts folder ( as Jest tries to mock every component by default ).
Let’s make the test pass:
Okay, the tests are passing now. Let’s also make sure that our component renders properly in the browser. Modify the app.js to render the accordionComponent.
If it works, proceed to next test case.
Test Case 2:
Accordion should build the layout from an array of objects passed as prop.
This time let’s make our component configurable. We have to pass an array data to the component, and expect it to build the layout for the Accordion.
To make everything green:
All the tests pass now. To see the component works in browser, edit the app.js and pass the configuration:
You should be able to see that our Accordion component renders the new layout.
Test Case 3:
By default, all the content section should be hidden unless specified by a flag.
Add the following test case:
And make it pass:
This code will make the above test case pass, but you can see that it makes the previous test case ( Test case 2 ) fail.
This is not a problem at all, because in TDD this is what we expect. We need to continuously refactor both source and test codes while we build the component. Let’s modify the input in the previous test case to make the tests pass.
This is the beauty of TDD; designing the component step by step. By now, we made our component configurable also.
Test Case 4:
It should be able to toggle the content by clicking on the respective title.
The tests are RED again. Before we move on, it’s time to think about the code design again. If you obeserve, we have a stateful component now. It means, each of the pane in the Accordion can have its own closed or open states.
While designing your applications, it’s a bad practice to put whole logic into one single component. We should think about small components — which handles single tasks — and create composite components for big features. Here, in our code we should move the state-full code into a separate component; Let’s call it as a Pane component.
See the code below:
All tests are GREEN now ! If you check your browser window ( where the server is running ), you can see that our Accordion component is functional.
Before we summarise, see the final source code and tests:
When I saw ReactJs first time, I didn’t like the syntax at all. I watched the project grow with quite skepticism. Later, I got chance to work with it, and then I knew how powerful it was. Writing code in React really changed my thinking process about a UI driven application. Now I started thinking everything in terms of components, and I know that’s the future of web development.
This article is my attempt to mix TDD with ReactJs . Here, we saw how to make a React component from scratch using TDD approach. I hope this tutorial is useful for everyone. Feedbacks are most welcome.