React Behavior Driven Development (BDD)

Click for: original source

John Tucker wrote this little guide in which he explores React BDD using Gherkin syntax with Jest Cucumber.

Behaviour-Driven Development (BDD) is a collaborative approach to software development that bridges the communication gap between business and IT. BDD helps teams communicate requirements with more precision, discover defects early and produce software that remains maintainable over time.

The two main practices in the BDD approach are discovery workshops, which bridge the communication gap between business and IT, and executable specifications.

The examples in this article were created with:

  • Create React App; TypeScript option
  • Jest
  • Test Render

The author then explains how to create basic example of Jest Cucumber integration.

Feature: Sum Pairs
  It sums pairs of numbers

  Scenario Outline: adds x + y to equal sum
    Given x is <x>
    When add <y>
    Then the sum is <sum>

  Examples:
    | x | y | sum |
    | 1 | 2 | 3 |
    | 0 | 1 | 1 |
    | -1 | 1 | 0 |
    | 1 | 0 | 1 |

Even with this most simple of examples, we can start to see the value of this more declarative approach; at a glance it is more clear what the tests do. Example code also available.

BDD (with Gherkin syntax) has value on the complete development cycle; from feature generation, to development, testing, and acceptance. Very nice!

[Read More]

Tags programming tdd javascript nodejs frontend app-development