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

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:

GitHub - drpicox/classroom--bdd-shop-v1: A simple example of a JavaScript React Product List built…

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…