{"id":31,"date":"2019-06-17T10:04:28","date_gmt":"2019-06-17T10:04:28","guid":{"rendered":"https:\/\/www.bddtesting.com\/?page_id=31"},"modified":"2019-06-17T10:18:00","modified_gmt":"2019-06-17T10:18:00","slug":"react-behavior-driven-development-r-bdd","status":"publish","type":"page","link":"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/","title":{"rendered":"React Behavior Driven Development (R-BDD)"},"content":{"rendered":"\n<p>The examples in this article are created with:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><em>Create React App<\/em>;&nbsp;<em>TypeScript<\/em>&nbsp;<a href=\"https:\/\/facebook.github.io\/create-react-app\/docs\/adding-typescript\" rel=\"noreferrer noopener\" target=\"_blank\">option<\/a><\/li><li><a href=\"https:\/\/jestjs.io\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Jest<\/em><\/a><\/li><li><a href=\"https:\/\/reactjs.org\/docs\/test-renderer.html\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Test Render<\/em><\/a><\/li><\/ul>\n\n\n\n<p>The examples are available for&nbsp;<a href=\"https:\/\/github.com\/larkintuckerllc\/hello-jest-cucumber\" rel=\"noreferrer noopener\" target=\"_blank\">download<\/a>.<\/p>\n\n\n\n<p><strong>What is BDD and Cucumber?<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>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.<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>It helps teams create business requirements that can be understood by the whole team. Specifying examples uncovers misunderstanding people might not even be aware of. Teams that practice BDD focus on preventing defects rather than finding them. This leads to less rework and quicker time to market.<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The two main practices in the BDD approach are discovery workshops, which bridge the communication gap between business and IT, and executable specifications.<\/p><\/blockquote>\n\n\n\n<p><em>\u2014 Cucumber\u200a\u2014<\/em><a href=\"https:\/\/docs.cucumber.io\/guides\/bdd-tutorial\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>\u200aBDD Tutorial<\/em><\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Cucumber is a tool that supports Behaviour-Driven Development(BDD).<\/p><\/blockquote>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Cucumber reads executable specifications written in plain text and validates that the software does what those specifications say. The specifications consists of multiple examples, or scenarios.<br>\u2026<br>In order for Cucumber to understand the scenarios, they must follow some basic syntax rules, called Gherkin.<\/p><\/blockquote>\n\n\n\n<p><em>\u2014 Cucumber\u200a\u2014\u200a<\/em><a href=\"https:\/\/docs.cucumber.io\/guides\/overview\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Introduction<\/em><\/a><\/p>\n\n\n\n<p><strong>First Reactions<\/strong><\/p>\n\n\n\n<p>My first reaction when reading about BDD was, \u201cIt sounds like yet another business consulting word-soup.\u201d<\/p>\n\n\n\n<p>Also, I felt that BDD was redundant as I already have embraced integration testing, i.e., testing features, not modules. See Revisiting&nbsp;<a href=\"https:\/\/codeburst.io\/revisiting-react-testing-in-2019-ee72bb5346f4\" target=\"_blank\" rel=\"noreferrer noopener\"><em>React Testing in 2019<\/em><\/a>for more on that.<\/p>\n\n\n\n<p>Finally, going through the&nbsp;<em>Cucumber&nbsp;<\/em><a href=\"https:\/\/docs.cucumber.io\/guides\/10-minute-tutorial\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>10 Minute Tutorial<\/em><\/a><em>&nbsp;(JavaScript),<\/em>&nbsp;it was not clear how I could integrate the&nbsp;<em>cucumber<\/em>&nbsp;library into the&nbsp;<em>Jest<\/em>&nbsp;testing framework that I have become accustomed to.<\/p>\n\n\n\n<p><strong>Enter Jest Cucumber<\/strong><\/p>\n\n\n\n<p>Just about when I was about to give up on BDD and&nbsp;<em>Cucumber<\/em>, I stumbled upon&nbsp;<a href=\"https:\/\/github.com\/bencompton\/jest-cucumber\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Jest Cucumber<\/em><\/a>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>jest-cucumber is an alternative to Cucumber.js that runs on top on Jest. Instead of using describe and it blocks, you instead write a Jest test for each scenario, and then define Given, When, and Then step definitions inside of your Jest tests. jest-cucumber then allows you to link these Jest tests to your feature files and ensure that they always stay in sync.<\/p><\/blockquote>\n\n\n\n<p>\u2014&nbsp;<em>Jest Cucumber\u200a\u2014\u200a<\/em><a href=\"https:\/\/github.com\/bencompton\/jest-cucumber\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Jest Cucumber<\/em><\/a><\/p>\n\n\n\n<p>While this looked promising, their example was overly abstract:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Feature: Rocket Launching<br><br>Scenario: Launching a SpaceX rocket<br>  Given I am Elon Musk attempting to launch a rocket into space<br>  When I launch the rocket<br>  Then the rocket should end up in space<br>  And the booster(s) should land back on the launch pad<br>  And nobody should doubt me ever again<\/pre>\n\n\n\n<p><strong>The Missing Basic Example<\/strong><\/p>\n\n\n\n<p>While there are&nbsp;<a href=\"https:\/\/github.com\/bencompton\/jest-cucumber#additional-documentation\" rel=\"noreferrer noopener\" target=\"_blank\">better examples<\/a>&nbsp;for the more complicated&nbsp;<em>Jest Cucumber<\/em>features, let us create a basic example.<\/p>\n\n\n\n<p>Let us say we have a module that sums two numbers,&nbsp;<em>src\/utils\/sum.ts:<\/em><\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/a74da4fe7349e85052ee7db253edfa0b?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>and we have an integration (actually unit in this case) test:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/9cf1147c4b94da16f840dff218075200?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>Let us approach this feature using a BDD approach using&nbsp;<em>Jest Cucumber<\/em>. First, we write the specifications in&nbsp;<a href=\"https:\/\/docs.cucumber.io\/gherkin\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>Gherkin<\/em><\/a>&nbsp;syntax,&nbsp;<em>src\/features\/sum_a_pair.feature<\/em>:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/30060b2ab33146e8e44b556d68746aa0?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p><strong>note<\/strong>: After&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Behavior-driven_development\" rel=\"noreferrer noopener\" target=\"_blank\">learning a bit more<\/a>&nbsp;about the theory of BDD, I have come to realize this example is not the best as it really does not have an initial (<em>Given<\/em>) state; suppling the two numbers should happen in the&nbsp;<em>When<\/em>&nbsp;clause.<\/p>\n\n\n\n<p>We then implement the test steps,&nbsp;<em>src\/features\/step_definitions\/sum_a_pair.steps.test.ts<\/em>:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/767aea2f21137a7f103ef71682da4bc1?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>Observations:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>My initial reaction is that this looks like a lot of boilerplate for little benefit<\/li><\/ul>\n\n\n\n<p><strong>An More Interesting Basic Example<\/strong><\/p>\n\n\n\n<p>The basic example only included a single scenario, adding 1 and 2. We might want to test some other example pairs. This is easy to specify using&nbsp;<em>Gherkin<\/em>syntax,&nbsp;<em>src\/features\/sum_pairs.feature<\/em>:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/d338b61252f73b645ca8e9e2d75fa2f3?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>We then implement the test steps,&nbsp;<em>src\/features\/step_definitions\/sum_pairs.steps.test.ts<\/em>:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/a35ef0d13c5580829990fdb3f118524f?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>Observations:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The specification is starting to look more useful<\/li><li>With not much more code than our last example, we can handle the additional scenarios<\/li><\/ul>\n\n\n\n<p><strong>The Missing React Example<\/strong><\/p>\n\n\n\n<p>Now let us look at a&nbsp;<em>React&nbsp;<\/em>example; say we have a feature that displays a counter value (starting at&nbsp;<em>0)<\/em>&nbsp;and pressing the minus button decrements the value and plus button increments it.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*JfgFb2x4nEt0QWOS9sqPJg.png\" alt=\"\"\/><\/figure>\n\n\n\n<p>A simple implementation would be:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/larkintuckerllc\/hello-jest-cucumber\/blob\/master\/src\/components\/Counter\/index.tsx\" rel=\"noreferrer noopener\" target=\"_blank\"><em>src\/components\/Counter\/index.tsx<\/em><\/a><\/li><li><a href=\"https:\/\/github.com\/larkintuckerllc\/hello-jest-cucumber\/blob\/master\/src\/components\/Counter\/CounterView.tsx\" rel=\"noreferrer noopener\" target=\"_blank\"><em>src\/components\/Counter\/CounterView.tsx<\/em><\/a><\/li><\/ul>\n\n\n\n<p>The integration test,&nbsp;<em>src\/components\/Counter\/Counter.test.tsx<\/em>:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/ca098c2e5a37e5bf05713c907fa8ddd1?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>Let us approach this feature using a BDD approach; creating a&nbsp;<em>Gherkin<\/em>specification for this feature,&nbsp;<em>src\/features\/counter.feature<\/em>:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/51ca392b33d37caa32d8c47cdfe6a1f0?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>We then implement the test steps,&nbsp;<em>src\/features\/step_definitions\/counter.steps.test.ts<\/em>:<\/p>\n\n\n\n<figure><iframe loading=\"lazy\" width=\"700\" height=\"250\" allowfullscreen=\"\" src=\"https:\/\/codeburst.io\/media\/1657c99445663f1010b1a2bf4f6e4d3c?postId=535afd364e5f\"><\/iframe><\/figure>\n\n\n\n<p>Observations:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>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<\/li><li>It is also intriguing that we can share the&nbsp;<em>Gherkin<\/em>&nbsp;specification with non-developers, e.g., the business analysts<\/li><\/ul>\n\n\n\n<p><strong>Conclusions<\/strong><\/p>\n\n\n\n<p>In the end, I have come to begin to value the approach that BDD (with&nbsp;<em>Gherkin<\/em>&nbsp;syntax) has on the complete development cycle; from feature generation, to development, testing, and acceptance.<\/p>\n\n\n\n<p>Also, with\u00a0<em>Jest Cucumber<\/em>, the transition from more traditional\u00a0<em>Jest<\/em>\u00a0testing was seamless.<\/p>\n\n\n\n<p><a href=\"https:\/\/codeburst.io\/react-behavior-driven-development-bdd-535afd364e5f\">https:\/\/codeburst.io\/react-behavior-driven-development-bdd-535afd364e5f<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The examples in this article are created with: Create React App;&nbsp;TypeScript&nbsp;option Jest Test Render The examples are available for&nbsp;download. What is BDD and Cucumber? Behaviour-Driven Development (BDD) is a collaborative approach to software development that bridges the communication gap between business and &#8230;.&nbsp;&nbsp;<a class=\" special\" href=\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Behavior Driven Development (R-BDD) &#8226; BDD Testing<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Behavior Driven Development (R-BDD) &#8226; BDD Testing\" \/>\n<meta property=\"og:description\" content=\"The examples in this article are created with: Create React App;&nbsp;TypeScript&nbsp;option Jest Test Render The examples are available for&nbsp;download. What is BDD and Cucumber? Behaviour-Driven Development (BDD) is a collaborative approach to software development that bridges the communication gap between business and ....&nbsp;&nbsp;Read More\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/\" \/>\n<meta property=\"og:site_name\" content=\"BDD Testing\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-17T10:18:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*JfgFb2x4nEt0QWOS9sqPJg.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/\",\"url\":\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/\",\"name\":\"React Behavior Driven Development (R-BDD) &#8226; BDD Testing\",\"isPartOf\":{\"@id\":\"https:\/\/www.bddtesting.com\/#website\"},\"datePublished\":\"2019-06-17T10:04:28+00:00\",\"dateModified\":\"2019-06-17T10:18:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bddtesting.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Behavior Driven Development (R-BDD)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bddtesting.com\/#website\",\"url\":\"https:\/\/www.bddtesting.com\/\",\"name\":\"BDD Testing\",\"description\":\"Behavior-driven development testing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bddtesting.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Behavior Driven Development (R-BDD) &#8226; BDD Testing","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/","og_locale":"en_US","og_type":"article","og_title":"React Behavior Driven Development (R-BDD) &#8226; BDD Testing","og_description":"The examples in this article are created with: Create React App;&nbsp;TypeScript&nbsp;option Jest Test Render The examples are available for&nbsp;download. What is BDD and Cucumber? Behaviour-Driven Development (BDD) is a collaborative approach to software development that bridges the communication gap between business and ....&nbsp;&nbsp;Read More","og_url":"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/","og_site_name":"BDD Testing","article_modified_time":"2019-06-17T10:18:00+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1600\/1*JfgFb2x4nEt0QWOS9sqPJg.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/","url":"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/","name":"React Behavior Driven Development (R-BDD) &#8226; BDD Testing","isPartOf":{"@id":"https:\/\/www.bddtesting.com\/#website"},"datePublished":"2019-06-17T10:04:28+00:00","dateModified":"2019-06-17T10:18:00+00:00","breadcrumb":{"@id":"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bddtesting.com\/react-behavior-driven-development-r-bdd\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bddtesting.com\/"},{"@type":"ListItem","position":2,"name":"React Behavior Driven Development (R-BDD)"}]},{"@type":"WebSite","@id":"https:\/\/www.bddtesting.com\/#website","url":"https:\/\/www.bddtesting.com\/","name":"BDD Testing","description":"Behavior-driven development testing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bddtesting.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/pages\/31"}],"collection":[{"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/comments?post=31"}],"version-history":[{"count":1,"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/pages\/31\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/www.bddtesting.com\/wp-json\/wp\/v2\/media?parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}