How to TDD with BDD-Gherkin 1: Testing a React Component

A step-by-step tutorial to build a small example with TDD, BDD-Gherkin, JavaScript, React, and Jest

David Rodenas PhD

--

In several past articles, I have been explained how to use BDD, how to write feature files, how it can improve the development process. But it was always in high level, and I never show an actual example. Now, in this article, it is time.

You can find the final working example here:

The Example Feature File

I start the example with an already existing BDD-Gherkin feature file. I am assuming that we had already done a minimal analysis of the required feature, and we had already discussed between team members the new functionality in refinements and other ceremonies.

We will use the following feature file as an example:

# /features/ShopList.feature
Feature: Shop List

Scenario: List products with no products
When I list products
Then there should be 0 products

Scenario: List products
Given there is a product "T-shirt"
And there is a product "Pants"
When I list products
Then there should be 2 products

Scenario: List products names
Given there is a product "T-shirt"
And there is a product "Pants"
When I list products
Then there should be the "T-shirt" product
And there should be the "Pants" product

Scenario: List products shows prices
Given there is a product "T-shirt" with price $19
And there is a product "Pants" with price $29
When I list products
Then there should be the "T-shirt" product with price $19
And there should be the "Pants" product with price $29

Set up the Project

I have chosen one of the most popular setups for creating JavaScript apps from scratch that is react-create-app. It has already the Jest test runner configured, with the…

--

--

David Rodenas PhD

Passionate software engineer & storyteller. Sharing knowledge to advance our skills. Join me on a journey of discovery in the world of software engineering.