title: Which is the best practice in identical Cucumberjs definitions for a state (Given) and an outcome (Then), in Cypress?
body: <p><br />
  Having some doubt on best practices using <code>Cucumber.js</code> and <code>Cypress</code> for some step definitions.</p>
  <p>Basically the test needs a state and an outcome that could be identically implemented:</p>
  <p>This is the example of a state:</p>
  <pre><code>Given(
    'the {int} item of the {string} component is visible',
    (index, ComponentIndex, mapper: ComponentMapper) =&gt; {
      cy.get('[data-test^=&quot;cmp-&quot;]').eq(cmpMap[mapper]).as(mapper)
      cy.get(`@${mapper}`)
        .find('.component__item')
        .eq(index)
        .should('be.visible')
    }
  )
  </code></pre>
  <p>And this is the example of an outcome:</p>
  <pre><code>Then(
    'the {int} item of the {string} component is visible',
    (index, ComponentIndex, mapper: ComponentMapper) =&gt; {
      cy.get('[data-test^=&quot;cmp-&quot;]').eq(cmpMap[mapper]).as(mapper)
      cy.get(`@${mapper}`)
        .find('.component__item')
        .eq(index)
        .should('be.visible')
    }
  )
  </code></pre>
  <p>In this situation I see just code repetition, because the <code>Given</code> and the <code>Then</code> implements the same code, doing the same check. I would like to understand all possible solutions to implement this in the most efficient way.</p>
  <h3>DOUBLE IMPLEMENTATION</h3>
  <p>to leave the double steps defined as in the description<br />
  PRO: clearer<br />
  CONS: double code\</p>
  <h3>SINGLE IMPLEMENTATION</h3>
  <p>to leave one implementation, in the <code>Given</code> or in the <code>Then</code>, because cucumber actually does not check the match of the Step in the feature file and the function related to the step in the definition file<br />
  PRO: single implementation of code<br />
  CONS: less clear and more confusion in the step definitions</p>
  <h3>EXTERNAL FUNCTION</h3>
  <p>to create a function to put for example in some Commands of Cypress, or utils, and use it in both definitions<br />
  PRO: single implementation<br />
  CONS: over engineered? never saw this approach in Cucumber.js</p>
  <p>Checking them all, which one would you suggest? Thanks</p>