From Idea to Implementation: Test-driven Development with React

Reading Time: 8 minutes

Writing test cases under TDD with React projects is often easy, particularly given Jest and Enzyme as testing tools. However, there are some specific factors that one needs to bear in mind.

Here at PureLogics, our JavaScript expert developers go through the React TDD process and demonstrate it step by step, from the epics and user stories to the development and production.

In this article, we will explain to you how to develop a React application with a focus on test-driven development (TDD), starting with creating the user stories and moving into development. For the purpose of following the TDD practices, we’ll be testing the code using Jest and Enzyme libraries. By the end of this guide, you’ll be able to:

• Generate epics and user stories depending on the project outlined.
• As a QA, develop test cases based on these user stories.
• Create a React app with an emphasis on Test-Driven Development.
• Test the React components using Enzyme and Jest.
• Extensive use of CSS variables is required to ensure responsive designs.
• Use React to build an adaptable component capable of rendering and performing action accordingly to set PROP values.
• Use the following REACT tool to perform type checking on component props: React PropTypes.

This tutorial presumes you have a basic knowledge of React.

Overview of Test-driven React App

We are going to build a Pomodoro cheater app with a really simple layout and a set of UI components, and every component will have its own test file with a set of tests. First of all, we will decide on epics and user stories in accordance with the requirements of a certain project.

Epic	User Story	Acceptance Criteria
Being a user, I require to utilize the timer to manage my time.	I require the ability to initiate the timer in order to track the duration of my time.	Ensure the user can: *start time *view the count down  The countdown should continue uninterrupted even if the user clicks the start button multiple times.
	I require the ability to pause the timer so that I can choose when to start counting down my time.	Ensure the user can: *Stop the timer  *Display the stopped timer No action should be taken if the user clicks the stop button multiple times.
	I require the ability to reset the timer so that I can start counting down my time from the initial duration.	Ensure the user can: *reset the timer *display the timer Resetting to the default duration.

Wireframe 

Project Setup 

To start, we’ll use Create React App to set up our React project as follow:

After running Create React App, a new browser tab will open. You can stop the React app by pressing Ctrl+C in the terminal.

Next, we’ll add Jest and Enzyme, along with some dependencies as follow: 

Additionally, we’ll add or update a file named setupTests.js in the src directory:

Create React App runs the setupTests.js file before each test, ensuring that Enzyme is properly configured for testing.

Configuring CSS

To ensure our CSS variables are globally accessible, we’ll define them in the :root scope. Variables are declared using custom property notation, starting with — followed by the variable name.

Please open the index.css file and add the following code:

Now, let’s import the CSS into our application. Update the index.js file as follows:

Shallow Render Test

As you may already be aware, the Test-Driven Development (TDD) process follows these steps:

1. Add a test.
2. Run all tests, which should result in the new test failing.
3. Write the code necessary to pass the test.
4. Run all tests again.
5. Refactor code if needed.
6. Repeat the process for each new feature or improvement.

With this in mind, let’s add our first test for a shallow render test. We’ll then write the code to pass this test. Create a new spec file named App.spec.js in the src/components/App directory.

After adding the test, you can run it using your testing framework.

Running the test after adding it should result in a failure. 

App Component

Next, we’ll create the App component to pass the test. Navigate to App.jsx in the directory src/components/App and add the following code:

Now, again run the test.

The first test will pass this time.

Including App CSS

To add some styling to the App component, we’ll create a App.css file in the directory src/components/App with the following content: 

Now, let’s import the CSS into the App.jsx file:

Next, update the index.js file to import the App component:

Including the Timer Component

Finally, our app will include the Timer component. Therefore, we’ll update the App.spec.js file to ensure the Timer component is present in our app. Additionally, we’ll declare the container variable outside the first test case since the shallow render test needs to be performed before each test case.

If you run npm test at this stage, the test will fail because the Timer component has not been created yet.

Timer Shallow Rendering Test Writing

Now, let’s form a file titled Timer.spec.js in a new directory lablled Timer below the src/components directory.

We’ll also add the shallow render test in the Timer.spec.js file:

As expected, the test will fail.

Building the Timer Component

Next, let’s create a new file called Timer.jsx and define the necessary variables and methods based on the user stories:

This will pass the test and render a <div /> in the Timer.spec.js file. However, the test should not render the Timer component yet, as we haven’t added the Timer component to the App component.

To add the Timer component to the App component, update the App.jsx file as follows:

All tests should pass now.

Adding Timer CSS

To add CSS variables related to the Timer and include media queries for smaller devices, update the index.css file as follows:

Additionally, let’s create the Timer.css file under the directory components/Timer:

Update Timer.jsx to import the Timer.css file.

If you run the React app now, you should see a simple screen with a border in your browser.

TimerButton Shallow Rendering Test Writing 

For adding Start, Stop and Reset buttons we are going to create a TimerButton component.

First, update Timer.spec.js file to look for TimerButton component in Timer component:

Now, let’s create the TimerButton.spec.js file in a new directory called TimerButton under the src/components directory, and add the test to the file:

If you execute the test at this point, it will fail.

Let’s create the TimerButton.jsx file for TimerButton element:

If you execute npm test at this point, the test should render instances of the TimerButton component, but it will fail because we have not added the TimerButton components to the Timer component.

Let’s import the TimerButton component and add three TimerButton components in the render method of Timer.jsx:

TimerButton CSS

Now, we add CSS variables for the TimerButton component. Add elements in the: root scope to the index.css file:

Also, create a file named TimerButton.css in the TimerButton folder in the src/components directory:

Now, let’s update TimerButton.jsx to import the TimerButton.css file and display the value of the button:

Also, we should update the Timer.css file to display the three buttons in a row. Let’s update the Timer.css file:

If you try to run the React app now, you will see a screen like this:

Refactoring the Timer

If you stop right here and run the tests then, you will observe that the newly added tests fail yet since we didn’t modify the TimerButton component. We keep on changing the TimerButton component to add the click event.

If you run the tests now, you’ll notice that the new tests fail because we haven’t yet updated the TimerButton component. Let’s modify the TimerButton component to include the click event.

Now the tests should work.

Next, we’ll add more tests to verify the state changes when each function is called in the mounted Timer test case:

If you need more context, imagine that when you are running the tests, they fail because we have not implemented each of these methods here. Let’s implement each function to make the tests pass:

If you have enough time to test the library, you will find the tests come out all right. Now, let’s look at the last two steps and add the rest of the functions in the class Timer. jsx:

Based on the user stories we created earlier, all functions are assumed to function as desired and will be tested accordingly.

That’s correct! Following the principles of TDD we have created a rudimentary React app that fits within the parameters of the user stories identified. It means that an application under development will be thoroughly tested based on detailed user stories and acceptance criteria, which in turn will result in identification of more accurate test cases as a way of having the app work as desired.

Wrapping Up 

When planning the application with the TDD process, the project needs to be divided into epics or user stories, and acceptance criteria should be prepared. In this article, our specialists illustrated how a project can be deconstructed, and actual acceptance criteria for React TDD software development can be used.

As mentioned earlier, there are a lot of resources available for React TDD but we thought putting up this taste of TDD development with React by using user stories might turn out to be somewhat useful.

About PureLogics 

PureLogics is the go-to partner for expert developers, programmers, architects, engineers, coders, and consultants. Companies and startups around the world hire talented developers from PureLogics for their key projects. Want something more personalized to your needs? Give us a call and level up your team today!