generating-bdd-tests

Files (1)

• SKILL.md

SKILL.md (first lines)

> **中文說明：** 為 React 16 組件生成完整 BDD 測試套件，包括 `.feature` 文件、step definitions、Jest 單元測試，目標覆蓋率 85%+。用戶說「生成測試」、「提升覆蓋率」、「寫 BDD」時觸發。
> **English:** Generates complete BDD test suites (Cucumber feature files + step definitions + Jest unit tests) for React 16 components, targeting 85% coverage.

# BDD Test Generator for React 16

## Overview

This skill generates complete BDD test suites for React 16 components, including:

- Cucumber feature files (.feature)
- Step definitions
- Jest unit tests
- Coverage-optimized test cases

## When to Use

- User asks to "generate tests" or "write tests"
- User wants to "improve coverage" or "increase coverage"
- User provides a React component and needs test files
- User mentions "BDD", "Cucumber", or "feature file"

## Instructions

### Step 1: Analyze Component Structure

When given a React component, identify:

1. Props and their types
2. State variables
3. Event handlers
4. Conditional rendering logic
5. Side effects (useEffect, componentDidMount, etc.)

### Step 2: Generate Feature File

Create a `.feature` file following this template:

```gherkin
Feature: [ComponentName] functionality
  As a user
  I want to [main purpose]
  So that [business value]

  Background:
    Given the component is rendered

  Scenario: Initial render
    Then I should see [expected initial state]

  Scenario: User interaction - [action]
    When I [user action]
    Then I should see [expected result]

  Scenario Outline: Multiple inputs
    When I enter "<input>" in the field
    Then I should see "<output>"

    Examples:
      | input | output |
      | valid | success |
      | invalid | error |
```

### Step 3: Generate Step Definitions

Create step definitions that map to Jest + React Testing Library:

```javascript
// [ComponentName].steps.js
import { Given, When, Then } from "@cucumber/cucumber";
import { render, screen, fireEvent } from "@testing-library/react";
import ComponentName from "./ComponentName";

let container;

Given("the component is rendered", function () {
  const result = render(<ComponentName {...defaultProps} />);
  container = result.container;
});

When("I click the {string} button", function (buttonText) {
  fireEvent.click(screen.getByRole("button", { name: buttonText }));
});

Then("I should see {string}", function (text) {
  expect(screen.getByText(text)).toBeInTheDocument();
});
```

### Step 4: Generate Unit Tests for Coverage

Create Jest tests targeting all branches:

```javascript
// [ComponentName].test.js
import React from "react";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import ComponentName from "./ComponentName";

describe("ComponentName", () => {
  // Test default props
  describe("with default props", () => {
    it("renders without crashing", () => {
      render(<ComponentName />);
    });
  });

  // Test each prop variation
  describe("props handling", () => {
    it.each([
      [{ prop1: "value1" }, "expected1"],
      [{ prop1: "value2" }, "expected2"],
    ])("with props %o renders %s", (props, expected) => {
      render(<ComponentName {...props} />);
      expect(screen.getByText(expected)).toBeInTheDocument();
    });
  });

  // Test all conditional branches

From nic611/claude-engineering-kit, MIT.

More from nic611/claude-engineering-kit