How to TDD with BDD-Gherkin 2: Fetching From Services in React

The continuation step-by-step tutorial, in which we see how to transform an application gradually to consume services.

Photo by Jonathan Pielmayer on Unsplash

This article continues from the previous one, How to TDD with BDD-Gherkin in JavaScript. You can clone the classroom--bdd-shop-v1 to start this tutorial.

In this article, we will focus on the same BDD-Gherkin of the last article:

# /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"…