fix: remove duplications in steps due to empty parameters (#373)

Co-authored-by: David Goss <[email protected]>

Author: mcarleio

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Fixed
+- Remove duplications in steps due to empty parameters ([#373](https://github.com/cucumber/react-components/pull/373))
 
 ## [22.4.0] - 2025-03-26
 ### Added

src/components/gherkin/GherkinStep.spec.tsx

@@ -48,4 +48,43 @@ describe('<GherkinStep>', () => {
     expect(container).to.contain.text('Given')
     expect(container).to.contain.text('the 48 pixies')
   })
+  it('empty parameters are respected correctly', () => {
+    const step: messages.Step = {
+      keyword: 'Given',
+      text: 'the order is placed',
+      location: { column: 1, line: 1 },
+      id: '123',
+    }
+
+    class StubCucumberQuery extends CucumberQuery {
+      public getStepMatchArgumentsLists(): messages.StepMatchArgumentsList[] {
+        return [
+          {
+            stepMatchArguments: [
+              {
+                group: {
+                  start: 9,
+                  value: '',
+                  children: [],
+                },
+              },
+            ],
+          },
+        ]
+      }
+    }
+
+    class StubGherkinQuery extends GherkinQuery {
+      getPickleStepIds(): string[] {
+        return ['dummy-id']
+      }
+    }
+
+    const { container } = render(<GherkinStep step={step} hasExamples={false} />, {
+      gherkinQuery: new StubGherkinQuery(),
+      cucumberQuery: new StubCucumberQuery(),
+    })
+
+    expect(container).to.not.contain.text('the orderthe order is placed')
+  })
 })

src/components/gherkin/GherkinStep.tsx

@@ -77,7 +77,7 @@ const DefaultRenderer: DefaultComponent<GherkinStepProps> = ({
           stepTextElements.push(<HighLight key={`plain-${index}`} text={plain} />)
         }
         const arg = argument.group.value
-        if (arg) {
+        if (arg !== undefined && arg !== null) {
           if (arg.length > 0) {
             stepTextElements.push(
               <Parameter