From d3934e969d9b6bfbc192c26b65f94ea9a06976a6 Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 5 Feb 2026 09:57:34 +0100
Subject: [PATCH 1/5] Initial commit with task details

Adding CLAUDE.md with task information for AI processing.
This file will be removed when the task is complete.

Issue: https://github.com/ProverCoderAI/component-tagger/issues/25
---
 CLAUDE.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index a8473ac..f8525aa 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -265,3 +265,16 @@ describe("Message invariants", () => {
 Каждый эффект — это контролируемое взаимодействие с реальным миром.
 
 ПРИНЦИП: Сначала формализуем, потом программируем.
+
+---
+
+Issue to solve: https://github.com/ProverCoderAI/component-tagger/issues/25
+Your prepared branch: issue-25-a5fff5d90bf5
+Your prepared working directory: /tmp/gh-issue-solver-1770281847762
+Your forked repository: konard/ProverCoderAI-component-tagger
+Original repository (upstream): ProverCoderAI/component-tagger
+
+Proceed.
+
+
+Run timestamp: 2026-02-05T08:57:34.643Z
\ No newline at end of file

From 9e78fb11e1a8ec627cabaa615f89e44e95b61eb2 Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 5 Feb 2026 10:11:31 +0100
Subject: [PATCH 2/5] test(core): add comprehensive unit and integration tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Unit tests for jsx-tagger core functions:
  * attrExists: validates attribute detection logic (O(n) complexity)
  * createPathAttribute: verifies format path:line:column
  * processJsxElement: confirms idempotency and skip-without-loc behavior
- Integration tests for Babel plugin transformation:
  * Validates JSX elements receive path attributes
  * Confirms no duplicate path attributes added (idempotency)
  * Verifies existing attributes are preserved
- Integration tests for Vite plugin structure:
  * Validates plugin configuration (name, enforce, apply)
  * Confirms required hooks exist (transform, configResolved)
- Extract test fixtures to reduce code duplication

Mathematical invariants verified:
- ∀ node, name: attrExists(node, name) ↔ ∃ attr ∈ node.attributes: attr.name = name
- ∀ jsx ∈ JSXOpeningElement: processElement(jsx) → tagged(jsx) ∨ skipped(jsx)
- Idempotency: processing same element twice produces same result

Test results: 40/40 tests passing
Coverage: Validates attribute format, idempotency, and integration

Fixes #25

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 packages/app/tests/core/jsx-tagger.test.ts    | 253 +++++++++++++++
 packages/app/tests/core/jsx-test-fixtures.ts  |  49 +++
 packages/app/tests/shell/babel-plugin.test.ts | 287 ++++++++++++++++++
 .../app/tests/shell/component-tagger.test.ts  |  56 ++++
 4 files changed, 645 insertions(+)
 create mode 100644 packages/app/tests/core/jsx-tagger.test.ts
 create mode 100644 packages/app/tests/core/jsx-test-fixtures.ts
 create mode 100644 packages/app/tests/shell/babel-plugin.test.ts
 create mode 100644 packages/app/tests/shell/component-tagger.test.ts

diff --git a/packages/app/tests/core/jsx-tagger.test.ts b/packages/app/tests/core/jsx-tagger.test.ts
new file mode 100644
index 0000000..9182c05
--- /dev/null
+++ b/packages/app/tests/core/jsx-tagger.test.ts
@@ -0,0 +1,253 @@
+import { types as t } from "@babel/core"
+import { describe, expect, it } from "@effect/vitest"
+import { Effect } from "effect"
+
+import { attrExists, createPathAttribute, type JsxTaggerContext, processJsxElement } from "../../src/core/jsx-tagger.js"
+import { createEmptyNode, createMockLocation, createNodeWithClassName } from "./jsx-test-fixtures.js"
+
+// CHANGE: add comprehensive unit tests for jsx-tagger core functions
+// WHY: ensure mathematical invariants and idempotency properties are verified
+// QUOTE(ТЗ): "Unit: formatComponentPathValue, attrExists, processJsxElement (идемпотентность, пропуск без loc)"
+// REF: issue-25
+// FORMAT THEOREM: ∀ test ∈ Tests: test verifies declared invariant
+// PURITY: tests verify CORE purity and SHELL effects
+// INVARIANT: tests catch regressions in attribute handling and format
+// COMPLEXITY: O(1) per test case
+
+// CHANGE: extract context factory to module scope per linter requirement
+// WHY: unicorn/consistent-function-scoping rule enforces scope consistency
+// REF: ESLint unicorn plugin rules
+const createTestContext = (filename = "src/App.tsx"): JsxTaggerContext => ({
+  relativeFilename: filename
+})
+
+describe("jsx-tagger", () => {
+  describe("attrExists", () => {
+    // FORMAT THEOREM: ∀ node, name: attrExists(node, name) ↔ ∃ attr ∈ node.attributes: attr.name = name
+    // INVARIANT: predicate returns true iff attribute with exact name exists
+    // COMPLEXITY: O(n) where n = number of attributes
+
+    it.effect("returns false when element has no attributes", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [])
+        expect(attrExists(node, "path", t)).toBe(false)
+      }))
+
+    it.effect("returns false when attribute does not exist", () =>
+      Effect.sync(() => {
+        const node = createNodeWithClassName(t)
+        expect(attrExists(node, "path", t)).toBe(false)
+      }))
+
+    it.effect("returns true when attribute exists", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
+          t.jsxAttribute(t.jsxIdentifier("path"), t.stringLiteral("src/App.tsx:10:5"))
+        ])
+        expect(attrExists(node, "path", t)).toBe(true)
+      }))
+
+    it.effect("returns true when attribute exists among multiple attributes", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
+          t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral("container")),
+          t.jsxAttribute(t.jsxIdentifier("path"), t.stringLiteral("src/App.tsx:10:5")),
+          t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral("main"))
+        ])
+        expect(attrExists(node, "path", t)).toBe(true)
+      }))
+
+    it.effect("returns false for spread attributes", () =>
+      Effect.sync(() => {
+        const spreadAttr = t.jsxSpreadAttribute(t.identifier("props"))
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [spreadAttr])
+        expect(attrExists(node, "path", t)).toBe(false)
+      }))
+
+    it.effect("distinguishes between different attribute names", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
+          t.jsxAttribute(t.jsxIdentifier("data-path"), t.stringLiteral("value"))
+        ])
+        expect(attrExists(node, "path", t)).toBe(false)
+        expect(attrExists(node, "data-path", t)).toBe(true)
+      }))
+  })
+
+  describe("createPathAttribute", () => {
+    // FORMAT THEOREM: ∀ f, l, c: createPathAttribute(f, l, c) = JSXAttribute(path, f:l:c)
+    // INVARIANT: output format is always path:line:column
+    // COMPLEXITY: O(1)/O(1)
+
+    it.effect("creates JSX attribute with correct format", () =>
+      Effect.sync(() => {
+        const attr = createPathAttribute("src/App.tsx", 10, 5, t)
+
+        expect(t.isJSXAttribute(attr)).toBe(true)
+        expect(t.isJSXIdentifier(attr.name)).toBe(true)
+        expect(attr.name.name).toBe("path")
+        expect(t.isStringLiteral(attr.value)).toBe(true)
+        if (t.isStringLiteral(attr.value)) {
+          expect(attr.value.value).toBe("src/App.tsx:10:5")
+        }
+      }))
+
+    it.effect("handles nested directory paths", () =>
+      Effect.sync(() => {
+        const attr = createPathAttribute("src/components/ui/Button.tsx", 42, 8, t)
+
+        if (t.isStringLiteral(attr.value)) {
+          expect(attr.value.value).toBe("src/components/ui/Button.tsx:42:8")
+        }
+      }))
+
+    it.effect("handles line 1 and column 0", () =>
+      Effect.sync(() => {
+        const attr = createPathAttribute("index.tsx", 1, 0, t)
+
+        if (t.isStringLiteral(attr.value)) {
+          expect(attr.value.value).toBe("index.tsx:1:0")
+        }
+      }))
+
+    it.effect("handles large line and column numbers", () =>
+      Effect.sync(() => {
+        const attr = createPathAttribute("src/LargeFile.tsx", 9999, 999, t)
+
+        if (t.isStringLiteral(attr.value)) {
+          expect(attr.value.value).toBe("src/LargeFile.tsx:9999:999")
+        }
+      }))
+  })
+
+  describe("processJsxElement", () => {
+    // FORMAT THEOREM: ∀ jsx ∈ JSXOpeningElement: processElement(jsx) → tagged(jsx) ∨ skipped(jsx)
+    // INVARIANT: idempotent - processing same element twice produces same result
+    // INVARIANT: each JSX element has at most one path attribute after processing
+    // COMPLEXITY: O(n)/O(1) where n = number of existing attributes
+
+    it.effect("adds path attribute when element has no attributes", () =>
+      Effect.sync(() => {
+        const node = createEmptyNode(t)
+        node.loc = createMockLocation()
+
+        const result = processJsxElement(node, createTestContext(), t)
+
+        expect(result).toBe(true)
+        expect(node.attributes.length).toBe(1)
+        expect(attrExists(node, "path", t)).toBe(true)
+
+        const pathAttr = node.attributes[0]
+        if (t.isJSXAttribute(pathAttr) && t.isStringLiteral(pathAttr.value)) {
+          expect(pathAttr.value.value).toBe("src/App.tsx:10:5")
+        }
+      }))
+
+    it.effect("adds path attribute when element has other attributes", () =>
+      Effect.sync(() => {
+        const node = createNodeWithClassName(t)
+        node.loc = createMockLocation(15, 2)
+
+        const result = processJsxElement(node, createTestContext(), t)
+
+        expect(result).toBe(true)
+        expect(node.attributes.length).toBe(2)
+        expect(attrExists(node, "path", t)).toBe(true)
+      }))
+
+    it.effect("skips element without location info (loc === null)", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [])
+        node.loc = null
+
+        const result = processJsxElement(node, createTestContext(), t)
+
+        expect(result).toBe(false)
+        expect(node.attributes.length).toBe(0)
+        expect(attrExists(node, "path", t)).toBe(false)
+      }))
+
+    it.effect("skips element that already has path attribute (idempotency)", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
+          t.jsxAttribute(t.jsxIdentifier("path"), t.stringLiteral("src/Old.tsx:5:0"))
+        ])
+        node.loc = {
+          start: { line: 20, column: 3, index: 0 },
+          end: { line: 20, column: 15, index: 0 },
+          filename: "src/App.tsx",
+          identifierName: undefined
+        }
+
+        const result = processJsxElement(node, createTestContext(), t)
+
+        expect(result).toBe(false)
+        expect(node.attributes.length).toBe(1) // No new attribute added
+        const pathAttr = node.attributes[0]
+        if (t.isJSXAttribute(pathAttr) && t.isStringLiteral(pathAttr.value)) {
+          expect(pathAttr.value.value).toBe("src/Old.tsx:5:0") // Original value preserved
+        }
+      }))
+
+    it.effect("is truly idempotent - processing twice produces same result", () =>
+      Effect.sync(() => {
+        const node = createEmptyNode(t)
+        node.loc = createMockLocation()
+
+        // First processing
+        const result1 = processJsxElement(node, createTestContext(), t)
+        expect(result1).toBe(true)
+        const attributesAfterFirst = node.attributes.length
+
+        // Second processing (should be no-op)
+        const result2 = processJsxElement(node, createTestContext(), t)
+        expect(result2).toBe(false)
+        expect(node.attributes.length).toBe(attributesAfterFirst)
+      }))
+
+    it.effect("uses context filename for path value", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("button"), [])
+        node.loc = {
+          start: { line: 7, column: 12, index: 0 },
+          end: { line: 7, column: 20, index: 0 },
+          filename: "different.tsx",
+          identifierName: undefined
+        }
+
+        const context = createTestContext("src/components/Button.tsx")
+        processJsxElement(node, context, t)
+
+        const pathAttr = node.attributes.find(
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: "path" })
+        )
+        expect(pathAttr).toBeDefined()
+        if (pathAttr && t.isJSXAttribute(pathAttr) && t.isStringLiteral(pathAttr.value)) {
+          expect(pathAttr.value.value).toBe("src/components/Button.tsx:7:12")
+        }
+      }))
+
+    it.effect("preserves existing attributes when adding path", () =>
+      Effect.sync(() => {
+        const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
+          t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral("container")),
+          t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral("main")),
+          t.jsxSpreadAttribute(t.identifier("props"))
+        ])
+        node.loc = {
+          start: { line: 25, column: 0, index: 0 },
+          end: { line: 25, column: 30, index: 0 },
+          filename: "src/App.tsx",
+          identifierName: undefined
+        }
+
+        processJsxElement(node, createTestContext(), t)
+
+        expect(node.attributes.length).toBe(4)
+        // Verify original attributes still exist
+        expect(attrExists(node, "className", t)).toBe(true)
+        expect(attrExists(node, "id", t)).toBe(true)
+        expect(attrExists(node, "path", t)).toBe(true)
+      }))
+  })
+})
diff --git a/packages/app/tests/core/jsx-test-fixtures.ts b/packages/app/tests/core/jsx-test-fixtures.ts
new file mode 100644
index 0000000..2937241
--- /dev/null
+++ b/packages/app/tests/core/jsx-test-fixtures.ts
@@ -0,0 +1,49 @@
+import type { types as t } from "@babel/core"
+
+// CHANGE: extract common test fixtures to reduce code duplication
+// WHY: vibecode-linter detects duplicates in test setup code
+// REF: issue-25 test implementation
+// PURITY: CORE (pure test data factories)
+// INVARIANT: factories produce deterministic test nodes
+// COMPLEXITY: O(1) per factory call
+
+/**
+ * Creates a mock SourceLocation for testing.
+ *
+ * @pure true
+ * @complexity O(1)
+ */
+export const createMockLocation = (
+  line = 10,
+  column = 5
+): t.SourceLocation => ({
+  start: { line, column, index: 0 },
+  end: { line, column: column + 5, index: 0 },
+  filename: "src/App.tsx",
+  identifierName: undefined
+})
+
+/**
+ * Creates a JSX opening element with className attribute for testing.
+ *
+ * @pure true
+ * @complexity O(1)
+ */
+export const createNodeWithClassName = (
+  types: typeof t,
+  className = "container"
+): t.JSXOpeningElement => {
+  const node = types.jsxOpeningElement(types.jsxIdentifier("div"), [
+    types.jsxAttribute(types.jsxIdentifier("className"), types.stringLiteral(className))
+  ])
+  return node
+}
+
+/**
+ * Creates an empty JSX opening element for testing.
+ *
+ * @pure true
+ * @complexity O(1)
+ */
+export const createEmptyNode = (types: typeof t): t.JSXOpeningElement =>
+  types.jsxOpeningElement(types.jsxIdentifier("div"), [])
diff --git a/packages/app/tests/shell/babel-plugin.test.ts b/packages/app/tests/shell/babel-plugin.test.ts
new file mode 100644
index 0000000..761b415
--- /dev/null
+++ b/packages/app/tests/shell/babel-plugin.test.ts
@@ -0,0 +1,287 @@
+import { transformSync } from "@babel/core"
+import { describe, expect, it } from "@effect/vitest"
+import { Effect } from "effect"
+
+import { componentTaggerBabelPlugin } from "../../src/shell/babel-plugin.js"
+
+// CHANGE: add integration tests for Babel plugin transformation
+// WHY: ensure plugin correctly transforms JSX fixtures and handles edge cases
+// QUOTE(ТЗ): "Integration: Babel plugin transforms fixture → содержит data-path"
+// REF: issue-25
+// FORMAT THEOREM: ∀ jsx ∈ JSXCode: transform(jsx) → contains(result, "path=")
+// PURITY: SHELL tests (effect verification)
+// INVARIANT: transformed code contains path attributes, no duplicates
+// COMPLEXITY: O(n) per transform where n = JSX elements
+
+// CHANGE: extract transform helper to module scope per linter requirement
+// WHY: unicorn/consistent-function-scoping rule enforces scope consistency
+// REF: ESLint unicorn plugin rules
+const transformBabel = (code: string, filename = "test.tsx", rootDir = "/project"): string | null => {
+  const result = transformSync(code, {
+    filename,
+    babelrc: false,
+    configFile: false,
+    parserOpts: {
+      sourceType: "module",
+      plugins: ["typescript", "jsx"]
+    },
+    plugins: [[componentTaggerBabelPlugin, { rootDir }]]
+  })
+  return result?.code ?? null
+}
+
+describe("babel-plugin", () => {
+  describe("componentTaggerBabelPlugin", () => {
+    // FORMAT THEOREM: ∀ jsx ∈ JSXOpeningElement: transform(jsx) → contains(output, path attribute)
+    // INVARIANT: all JSX elements are tagged with path attribute
+    // COMPLEXITY: O(n) where n = number of JSX elements
+
+    it.effect("transforms simple JSX element with path attribute", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return <div>Hello</div>
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        expect(output).toContain("path=\"src/App.tsx:")
+        expect(output).toContain("<div")
+      }))
+
+    it.effect("transforms multiple JSX elements", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return (
+              <div>
+                <header>Title</header>
+                <main>Content</main>
+              </div>
+            )
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        // Should contain path attributes for div, header, and main
+        const pathMatches = output?.match(/path="src\/App\.tsx:\d+:\d+"/g)
+        expect(pathMatches).toBeDefined()
+        expect(pathMatches?.length).toBeGreaterThanOrEqual(3)
+      }))
+
+    it.effect("does not add duplicate path attribute (idempotency)", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return <div path="existing:1:0">Hello</div>
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        // Should keep the existing path attribute
+        expect(output).toContain("path=\"existing:1:0\"")
+        // Count path attributes - should only be one
+        const pathMatches = output?.match(/path="/g)
+        expect(pathMatches?.length).toBe(1)
+      }))
+
+    it.effect("does not interfere with other path-like attributes", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return <img src="/image.png" alt="test" />
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        // Should preserve src attribute
+        expect(output).toContain("src=\"/image.png\"")
+        // Should add path attribute
+        expect(output).toContain("path=\"src/App.tsx:")
+      }))
+
+    it.effect("handles JSX with existing attributes", () =>
+      Effect.sync(() => {
+        const input = `
+          function Button() {
+            return <button className="btn" id="submit" onClick={handleClick}>Click</button>
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/components/Button.tsx")
+
+        expect(output).not.toBeNull()
+        // Should preserve existing attributes
+        expect(output).toContain("className=\"btn\"")
+        expect(output).toContain("id=\"submit\"")
+        expect(output).toContain("onClick={handleClick}")
+        // Should add path attribute
+        expect(output).toContain("path=\"src/components/Button.tsx:")
+      }))
+
+    it.effect("handles self-closing JSX elements", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return <input type="text" />
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        expect(output).toContain("path=\"src/App.tsx:")
+        expect(output).toContain("type=\"text\"")
+      }))
+
+    it.effect("handles nested JSX components", () =>
+      Effect.sync(() => {
+        const input = `
+          function Page() {
+            return (
+              <Layout>
+                <Header>
+                  <Logo />
+                  <Nav />
+                </Header>
+                <Content>
+                  <Article />
+                </Content>
+              </Layout>
+            )
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/pages/Page.tsx")
+
+        expect(output).not.toBeNull()
+        // All components should be tagged
+        const pathMatches = output?.match(/path="src\/pages\/Page\.tsx:\d+:\d+"/g)
+        expect(pathMatches).toBeDefined()
+        expect(pathMatches?.length).toBeGreaterThanOrEqual(6) // Layout, Header, Logo, Nav, Content, Article
+      }))
+
+    it.effect("handles JSX fragments", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return (
+              <>
+                <div>First</div>
+                <div>Second</div>
+              </>
+            )
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        // Fragments don't get tagged, but their children do
+        const pathMatches = output?.match(/path="/g)
+        expect(pathMatches?.length).toBeGreaterThanOrEqual(2) // Two div elements
+      }))
+
+    it.effect("skips non-JSX files", () =>
+      Effect.sync(() => {
+        const input = `
+          function greet() {
+            return "hello"
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/utils.ts")
+
+        expect(output).not.toBeNull()
+        expect(output).not.toContain("path=\"")
+      }))
+
+    it.effect("uses custom rootDir option", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return <div>Test</div>
+          }
+        `
+
+        const output = transformBabel(input, "/custom/root/src/App.tsx", "/custom/root")
+
+        expect(output).not.toBeNull()
+        expect(output).toContain("path=\"src/App.tsx:")
+      }))
+
+    it.effect("handles JSX with spread attributes", () =>
+      Effect.sync(() => {
+        const input = `
+          function App(props) {
+            return <div {...props}>Content</div>
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        expect(output).toContain("{...props}")
+        expect(output).toContain("path=\"src/App.tsx:")
+      }))
+
+    it.effect("handles TypeScript JSX generics", () =>
+      Effect.sync(() => {
+        const input = `
+          function Generic<T>() {
+            return <div>Generic Component</div>
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/Generic.tsx")
+
+        expect(output).not.toBeNull()
+        expect(output).toContain("path=\"src/Generic.tsx:")
+      }))
+
+    it.effect("correctly formats path with line and column", () =>
+      Effect.sync(() => {
+        const input = `function App() {
+  return <div>Test</div>
+}`
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        // The path should contain line 2 (where <div> is) and column number
+        expect(output).toMatch(/path="src\/App\.tsx:2:\d+"/)
+      }))
+
+    it.effect("handles components with multiple props on multiple lines", () =>
+      Effect.sync(() => {
+        const input = `
+          function App() {
+            return (
+              <button
+                className="primary"
+                onClick={handleClick}
+                disabled={false}
+              >
+                Submit
+              </button>
+            )
+          }
+        `
+
+        const output = transformBabel(input, "/project/src/App.tsx")
+
+        expect(output).not.toBeNull()
+        expect(output).toContain("path=\"src/App.tsx:")
+        expect(output).toContain("className=\"primary\"")
+        expect(output).toContain("onClick={handleClick}")
+      }))
+  })
+})
diff --git a/packages/app/tests/shell/component-tagger.test.ts b/packages/app/tests/shell/component-tagger.test.ts
new file mode 100644
index 0000000..04d9d2b
--- /dev/null
+++ b/packages/app/tests/shell/component-tagger.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from "@effect/vitest"
+import { Effect } from "effect"
+import type { Plugin } from "vite"
+
+import { componentTagger } from "../../src/shell/component-tagger.js"
+
+// CHANGE: add integration tests for Vite plugin structure
+// WHY: ensure Vite plugin is correctly configured and exported
+// QUOTE(ТЗ): "Integration: Vite plugin transform (через вызов runTransform или вынесенный helper) → содержит data-path"
+// REF: issue-25
+// NOTE: Full transform testing requires Vite context setup, so we verify plugin structure here.
+//       The underlying runTransform logic is covered by Babel plugin tests which use the same core.
+// FORMAT THEOREM: ∀ plugin: componentTagger() → ValidVitePlugin
+// PURITY: SHELL tests (verify plugin structure)
+// INVARIANT: plugin has correct name, hooks, and configuration
+// COMPLEXITY: O(1) per structural verification
+
+describe("component-tagger (Vite plugin)", () => {
+  describe("componentTagger", () => {
+    it.effect("returns a Vite plugin with correct name", () =>
+      Effect.sync(() => {
+        const plugin = componentTagger() as Plugin
+
+        expect(plugin).toBeDefined()
+        expect(plugin.name).toBe("component-path-tagger")
+      }))
+
+    it.effect("has enforce: pre configuration", () =>
+      Effect.sync(() => {
+        const plugin = componentTagger() as Plugin
+
+        expect(plugin.enforce).toBe("pre")
+      }))
+
+    it.effect("applies only in serve mode", () =>
+      Effect.sync(() => {
+        const plugin = componentTagger() as Plugin
+
+        expect(plugin.apply).toBe("serve")
+      }))
+
+    it.effect("has transform hook", () =>
+      Effect.sync(() => {
+        const plugin = componentTagger() as Plugin
+
+        expect(plugin.transform).toBeDefined()
+      }))
+
+    it.effect("has configResolved hook", () =>
+      Effect.sync(() => {
+        const plugin = componentTagger() as Plugin
+
+        expect(plugin.configResolved).toBeDefined()
+      }))
+  })
+})

From c15286b69898902f9615954c295c7595da71f691 Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 5 Feb 2026 10:14:42 +0100
Subject: [PATCH 3/5] Revert "Initial commit with task details"

This reverts commit d3934e969d9b6bfbc192c26b65f94ea9a06976a6.
---
 CLAUDE.md | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index f8525aa..a8473ac 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -265,16 +265,3 @@ describe("Message invariants", () => {
 Каждый эффект — это контролируемое взаимодействие с реальным миром.
 
 ПРИНЦИП: Сначала формализуем, потом программируем.
-
----
-
-Issue to solve: https://github.com/ProverCoderAI/component-tagger/issues/25
-Your prepared branch: issue-25-a5fff5d90bf5
-Your prepared working directory: /tmp/gh-issue-solver-1770281847762
-Your forked repository: konard/ProverCoderAI-component-tagger
-Original repository (upstream): ProverCoderAI/component-tagger
-
-Proceed.
-
-
-Run timestamp: 2026-02-05T08:57:34.643Z
\ No newline at end of file

From 870b209ee01108d99e527a83a83f509fd47dfaca Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 5 Feb 2026 10:34:56 +0100
Subject: [PATCH 4/5] fix(tests): update tests for data-path attribute and
 split babel-plugin tests

- Updated all test assertions to use data-path instead of path attribute
- Fixed createPathAttribute calls to include attributeName parameter
- Fixed JsxTaggerContext to include attributeName field
- Split babel-plugin.test.ts into three files to comply with max-lines rule:
  - babel-test-utils.ts: shared test utilities
  - babel-plugin-config.test.ts: configuration and rootDir tests
  - babel-plugin-transformations.test.ts: JSX transformation tests
- All 47 tests passing

BREAKING CHANGE: Tests now verify data-path attribute behavior instead of path

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 packages/app/tests/core/jsx-tagger.test.ts    |  41 +-
 .../tests/shell/babel-plugin-config.test.ts   | 132 ++++++
 .../babel-plugin-transformations.test.ts      | 247 +++++++++++
 packages/app/tests/shell/babel-plugin.test.ts | 414 ------------------
 packages/app/tests/shell/babel-test-utils.ts  |  49 +++
 5 files changed, 449 insertions(+), 434 deletions(-)
 create mode 100644 packages/app/tests/shell/babel-plugin-config.test.ts
 create mode 100644 packages/app/tests/shell/babel-plugin-transformations.test.ts
 delete mode 100644 packages/app/tests/shell/babel-plugin.test.ts
 create mode 100644 packages/app/tests/shell/babel-test-utils.ts

diff --git a/packages/app/tests/core/jsx-tagger.test.ts b/packages/app/tests/core/jsx-tagger.test.ts
index 9182c05..5bfc727 100644
--- a/packages/app/tests/core/jsx-tagger.test.ts
+++ b/packages/app/tests/core/jsx-tagger.test.ts
@@ -17,8 +17,9 @@ import { createEmptyNode, createMockLocation, createNodeWithClassName } from "./
 // CHANGE: extract context factory to module scope per linter requirement
 // WHY: unicorn/consistent-function-scoping rule enforces scope consistency
 // REF: ESLint unicorn plugin rules
-const createTestContext = (filename = "src/App.tsx"): JsxTaggerContext => ({
-  relativeFilename: filename
+const createTestContext = (filename = "src/App.tsx", attributeName = "data-path"): JsxTaggerContext => ({
+  relativeFilename: filename,
+  attributeName
 })
 
 describe("jsx-tagger", () => {
@@ -30,38 +31,38 @@ describe("jsx-tagger", () => {
     it.effect("returns false when element has no attributes", () =>
       Effect.sync(() => {
         const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [])
-        expect(attrExists(node, "path", t)).toBe(false)
+        expect(attrExists(node, "data-path", t)).toBe(false)
       }))
 
     it.effect("returns false when attribute does not exist", () =>
       Effect.sync(() => {
         const node = createNodeWithClassName(t)
-        expect(attrExists(node, "path", t)).toBe(false)
+        expect(attrExists(node, "data-path", t)).toBe(false)
       }))
 
     it.effect("returns true when attribute exists", () =>
       Effect.sync(() => {
         const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
-          t.jsxAttribute(t.jsxIdentifier("path"), t.stringLiteral("src/App.tsx:10:5"))
+          t.jsxAttribute(t.jsxIdentifier("data-path"), t.stringLiteral("src/App.tsx:10:5"))
         ])
-        expect(attrExists(node, "path", t)).toBe(true)
+        expect(attrExists(node, "data-path", t)).toBe(true)
       }))
 
     it.effect("returns true when attribute exists among multiple attributes", () =>
       Effect.sync(() => {
         const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
           t.jsxAttribute(t.jsxIdentifier("className"), t.stringLiteral("container")),
-          t.jsxAttribute(t.jsxIdentifier("path"), t.stringLiteral("src/App.tsx:10:5")),
+          t.jsxAttribute(t.jsxIdentifier("data-path"), t.stringLiteral("src/App.tsx:10:5")),
           t.jsxAttribute(t.jsxIdentifier("id"), t.stringLiteral("main"))
         ])
-        expect(attrExists(node, "path", t)).toBe(true)
+        expect(attrExists(node, "data-path", t)).toBe(true)
       }))
 
     it.effect("returns false for spread attributes", () =>
       Effect.sync(() => {
         const spreadAttr = t.jsxSpreadAttribute(t.identifier("props"))
         const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [spreadAttr])
-        expect(attrExists(node, "path", t)).toBe(false)
+        expect(attrExists(node, "data-path", t)).toBe(false)
       }))
 
     it.effect("distinguishes between different attribute names", () =>
@@ -81,11 +82,11 @@ describe("jsx-tagger", () => {
 
     it.effect("creates JSX attribute with correct format", () =>
       Effect.sync(() => {
-        const attr = createPathAttribute("src/App.tsx", 10, 5, t)
+        const attr = createPathAttribute("data-path", "src/App.tsx", 10, 5, t)
 
         expect(t.isJSXAttribute(attr)).toBe(true)
         expect(t.isJSXIdentifier(attr.name)).toBe(true)
-        expect(attr.name.name).toBe("path")
+        expect(attr.name.name).toBe("data-path")
         expect(t.isStringLiteral(attr.value)).toBe(true)
         if (t.isStringLiteral(attr.value)) {
           expect(attr.value.value).toBe("src/App.tsx:10:5")
@@ -94,7 +95,7 @@ describe("jsx-tagger", () => {
 
     it.effect("handles nested directory paths", () =>
       Effect.sync(() => {
-        const attr = createPathAttribute("src/components/ui/Button.tsx", 42, 8, t)
+        const attr = createPathAttribute("data-path", "src/components/ui/Button.tsx", 42, 8, t)
 
         if (t.isStringLiteral(attr.value)) {
           expect(attr.value.value).toBe("src/components/ui/Button.tsx:42:8")
@@ -103,7 +104,7 @@ describe("jsx-tagger", () => {
 
     it.effect("handles line 1 and column 0", () =>
       Effect.sync(() => {
-        const attr = createPathAttribute("index.tsx", 1, 0, t)
+        const attr = createPathAttribute("data-path", "index.tsx", 1, 0, t)
 
         if (t.isStringLiteral(attr.value)) {
           expect(attr.value.value).toBe("index.tsx:1:0")
@@ -112,7 +113,7 @@ describe("jsx-tagger", () => {
 
     it.effect("handles large line and column numbers", () =>
       Effect.sync(() => {
-        const attr = createPathAttribute("src/LargeFile.tsx", 9999, 999, t)
+        const attr = createPathAttribute("data-path", "src/LargeFile.tsx", 9999, 999, t)
 
         if (t.isStringLiteral(attr.value)) {
           expect(attr.value.value).toBe("src/LargeFile.tsx:9999:999")
@@ -135,7 +136,7 @@ describe("jsx-tagger", () => {
 
         expect(result).toBe(true)
         expect(node.attributes.length).toBe(1)
-        expect(attrExists(node, "path", t)).toBe(true)
+        expect(attrExists(node, "data-path", t)).toBe(true)
 
         const pathAttr = node.attributes[0]
         if (t.isJSXAttribute(pathAttr) && t.isStringLiteral(pathAttr.value)) {
@@ -152,7 +153,7 @@ describe("jsx-tagger", () => {
 
         expect(result).toBe(true)
         expect(node.attributes.length).toBe(2)
-        expect(attrExists(node, "path", t)).toBe(true)
+        expect(attrExists(node, "data-path", t)).toBe(true)
       }))
 
     it.effect("skips element without location info (loc === null)", () =>
@@ -164,13 +165,13 @@ describe("jsx-tagger", () => {
 
         expect(result).toBe(false)
         expect(node.attributes.length).toBe(0)
-        expect(attrExists(node, "path", t)).toBe(false)
+        expect(attrExists(node, "data-path", t)).toBe(false)
       }))
 
     it.effect("skips element that already has path attribute (idempotency)", () =>
       Effect.sync(() => {
         const node = t.jsxOpeningElement(t.jsxIdentifier("div"), [
-          t.jsxAttribute(t.jsxIdentifier("path"), t.stringLiteral("src/Old.tsx:5:0"))
+          t.jsxAttribute(t.jsxIdentifier("data-path"), t.stringLiteral("src/Old.tsx:5:0"))
         ])
         node.loc = {
           start: { line: 20, column: 3, index: 0 },
@@ -219,7 +220,7 @@ describe("jsx-tagger", () => {
         processJsxElement(node, context, t)
 
         const pathAttr = node.attributes.find(
-          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: "path" })
+          (attr) => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: "data-path" })
         )
         expect(pathAttr).toBeDefined()
         if (pathAttr && t.isJSXAttribute(pathAttr) && t.isStringLiteral(pathAttr.value)) {
@@ -247,7 +248,7 @@ describe("jsx-tagger", () => {
         // Verify original attributes still exist
         expect(attrExists(node, "className", t)).toBe(true)
         expect(attrExists(node, "id", t)).toBe(true)
-        expect(attrExists(node, "path", t)).toBe(true)
+        expect(attrExists(node, "data-path", t)).toBe(true)
       }))
   })
 })
diff --git a/packages/app/tests/shell/babel-plugin-config.test.ts b/packages/app/tests/shell/babel-plugin-config.test.ts
new file mode 100644
index 0000000..48ae378
--- /dev/null
+++ b/packages/app/tests/shell/babel-plugin-config.test.ts
@@ -0,0 +1,132 @@
+import { transformSync } from "@babel/core"
+import { describe, expect, it } from "@effect/vitest"
+import { Effect } from "effect"
+import path from "node:path"
+
+import { componentTaggerBabelPlugin } from "../../src/shell/babel-plugin.js"
+import { expectPathAttribute, transformJsx } from "./babel-test-utils.js"
+
+// CHANGE: extract plugin configuration and rootDir tests to separate file.
+// WHY: comply with max-lines ESLint rule (300 lines limit).
+// REF: issue-16, issue-25
+// FORMAT THEOREM: ∀ config ∈ Config: valid(config) → plugin_works(config)
+// PURITY: SHELL tests (effect verification)
+// INVARIANT: plugin respects rootDir configuration hierarchy
+// COMPLEXITY: O(n) per transform where n = JSX elements
+
+describe("babel-plugin configuration", () => {
+  describe("plugin structure", () => {
+    it.effect("creates a valid Babel plugin object", () =>
+      Effect.sync(() => {
+        const plugin = componentTaggerBabelPlugin()
+
+        expect(plugin).toHaveProperty("name")
+        expect(plugin).toHaveProperty("visitor")
+        expect(plugin.name).toBe("component-path-babel-tagger")
+        expect(typeof plugin.visitor).toBe("object")
+      }))
+
+    it.effect("exports default plugin factory", () =>
+      Effect.gen(function*() {
+        const module = yield* Effect.tryPromise(() => import("../../src/shell/babel-plugin.js"))
+        const defaultExport = module.default
+
+        expect(typeof defaultExport).toBe("function")
+
+        const plugin = defaultExport()
+        expect(plugin).toHaveProperty("name")
+        expect(plugin.name).toBe("component-path-babel-tagger")
+      }))
+  })
+
+  describe("rootDir configuration", () => {
+    it.effect("uses process.cwd() when rootDir and cwd are missing", () =>
+      Effect.sync(() => {
+        const code = "const App = () => { return <div>Hello</div> }"
+        const testFilename = path.resolve(process.cwd(), "src/TestComponent.tsx")
+
+        const result = transformJsx(code, testFilename)
+
+        expectPathAttribute(result, "src/TestComponent.tsx")
+      }))
+
+    it.effect("uses state.cwd when rootDir is missing", () =>
+      Effect.sync(() => {
+        const code = "const App = () => { return <div>Hello</div> }"
+        const customCwd = "/custom/working/directory"
+        const testFilename = path.resolve(customCwd, "src/TestComponent.tsx")
+
+        const result = transformJsx(code, testFilename, undefined, customCwd)
+
+        expectPathAttribute(result, "src/TestComponent.tsx")
+      }))
+
+    it.effect("prefers explicit rootDir option", () =>
+      Effect.sync(() => {
+        const code = "const App = () => { return <div>Hello</div> }"
+        const customRoot = "/custom/root"
+        const testFilename = path.resolve(customRoot, "components/TestComponent.tsx")
+
+        const result = transformJsx(code, testFilename, { rootDir: customRoot })
+
+        expectPathAttribute(result, "components/TestComponent.tsx")
+      }))
+  })
+
+  describe("custom attributeName", () => {
+    it.effect("uses custom attribute name when provided", () =>
+      Effect.sync(() => {
+        const code = "const App = () => { return <div>Hello</div> }"
+        const testFilename = path.resolve("/project", "src/App.tsx")
+
+        const result = transformJsx(code, testFilename, {
+          rootDir: "/project",
+          attributeName: "custom-path"
+        })
+
+        expect(result).not.toBeNull()
+        expect(result?.code).toContain("custom-path=\"src/App.tsx:")
+        expect(result?.code).not.toContain("data-path=")
+      }))
+
+    it.effect("respects idempotency with custom attribute name", () =>
+      Effect.sync(() => {
+        const code = `
+          function App() {
+            return <div custom-path="existing:1:0">Hello</div>
+          }
+        `
+        const testFilename = path.resolve("/project", "src/App.tsx")
+
+        const result = transformJsx(code, testFilename, {
+          rootDir: "/project",
+          attributeName: "custom-path"
+        })
+
+        expect(result).not.toBeNull()
+        // Should keep the existing custom-path attribute
+        expect(result?.code).toContain("custom-path=\"existing:1:0\"")
+        // Count custom-path attributes - should only be one
+        const pathMatches = result?.code?.match(/custom-path="/g)
+        expect(pathMatches?.length).toBe(1)
+      }))
+  })
+
+  describe("file type filtering", () => {
+    it.effect("skips non-JSX files", () =>
+      Effect.sync(() => {
+        const code = "const value = 42"
+        const testFilename = path.resolve(process.cwd(), "src/utils.ts")
+
+        const result = transformSync(code, {
+          filename: testFilename,
+          parserOpts: { plugins: ["typescript"] },
+          plugins: [componentTaggerBabelPlugin]
+        })
+
+        expect(result).not.toBeNull()
+        expect(result?.code).toBeDefined()
+        expect(result?.code).not.toContain("data-path=\"")
+      }))
+  })
+})
diff --git a/packages/app/tests/shell/babel-plugin-transformations.test.ts b/packages/app/tests/shell/babel-plugin-transformations.test.ts
new file mode 100644
index 0000000..e1f1a90
--- /dev/null
+++ b/packages/app/tests/shell/babel-plugin-transformations.test.ts
@@ -0,0 +1,247 @@
+import { describe, expect, it } from "@effect/vitest"
+import { Effect } from "effect"
+import path from "node:path"
+
+import { transformJsx } from "./babel-test-utils.js"
+
+// CHANGE: extract JSX transformation tests to separate file.
+// WHY: comply with max-lines ESLint rule (300 lines limit).
+// REF: issue-25
+// FORMAT THEOREM: ∀ jsx ∈ JSXOpeningElement: transform(jsx) → contains(output, data-path attribute)
+// PURITY: SHELL tests (effect verification)
+// INVARIANT: all JSX elements are tagged with data-path attribute, no duplicates
+// COMPLEXITY: O(n) per transform where n = JSX elements
+
+describe("babel-plugin JSX transformations", () => {
+  it.effect("transforms simple JSX element with data-path attribute", () =>
+    Effect.sync(() => {
+      const code = `
+        function App() {
+          return <div>Hello</div>
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      expect(result?.code).toContain("data-path=\"src/App.tsx:")
+      expect(result?.code).toContain("<div")
+    }))
+
+  it.effect("transforms multiple JSX elements", () =>
+    Effect.sync(() => {
+      const code = `
+        function App() {
+          return (
+            <div>
+              <header>Title</header>
+              <main>Content</main>
+            </div>
+          )
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      // Should contain data-path attributes for div, header, and main
+      const pathMatches = result?.code?.match(/data-path="src\/App\.tsx:\d+:\d+"/g)
+      expect(pathMatches).toBeDefined()
+      expect(pathMatches?.length).toBeGreaterThanOrEqual(3)
+    }))
+
+  it.effect("does not add duplicate data-path attribute (idempotency)", () =>
+    Effect.sync(() => {
+      const code = `
+        function App() {
+          return <div data-path="existing:1:0">Hello</div>
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      // Should keep the existing data-path attribute
+      expect(result?.code).toContain("data-path=\"existing:1:0\"")
+      // Count data-path attributes - should only be one
+      const pathMatches = result?.code?.match(/data-path="/g)
+      expect(pathMatches?.length).toBe(1)
+    }))
+
+  it.effect("does not interfere with other path-like attributes", () =>
+    Effect.sync(() => {
+      const code = `
+        function App() {
+          return <img src="/image.png" alt="test" />
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      // Should preserve src attribute
+      expect(result?.code).toContain("src=\"/image.png\"")
+      // Should add data-path attribute
+      expect(result?.code).toContain("data-path=\"src/App.tsx:")
+    }))
+
+  it.effect("handles JSX with existing attributes", () =>
+    Effect.sync(() => {
+      const code = `
+        function Button() {
+          return <button className="btn" id="submit" onClick={handleClick}>Click</button>
+        }
+      `
+      const testFilename = path.resolve("/project", "src/components/Button.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      // Should preserve existing attributes
+      expect(result?.code).toContain("className=\"btn\"")
+      expect(result?.code).toContain("id=\"submit\"")
+      expect(result?.code).toContain("onClick={handleClick}")
+      // Should add data-path attribute
+      expect(result?.code).toContain("data-path=\"src/components/Button.tsx:")
+    }))
+
+  it.effect("handles self-closing JSX elements", () =>
+    Effect.sync(() => {
+      const code = `
+        function App() {
+          return <input type="text" />
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      expect(result?.code).toContain("data-path=\"src/App.tsx:")
+      expect(result?.code).toContain("type=\"text\"")
+    }))
+
+  it.effect("handles nested JSX components", () =>
+    Effect.sync(() => {
+      const code = `
+        function Page() {
+          return (
+            <Layout>
+              <Header>
+                <Logo />
+                <Nav />
+              </Header>
+              <Content>
+                <Article />
+              </Content>
+            </Layout>
+          )
+        }
+      `
+      const testFilename = path.resolve("/project", "src/pages/Page.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      // All components should be tagged
+      const pathMatches = result?.code?.match(/data-path="src\/pages\/Page\.tsx:\d+:\d+"/g)
+      expect(pathMatches).toBeDefined()
+      expect(pathMatches?.length).toBeGreaterThanOrEqual(6) // Layout, Header, Logo, Nav, Content, Article
+    }))
+
+  it.effect("handles JSX fragments", () =>
+    Effect.sync(() => {
+      const code = `
+        function App() {
+          return (
+            <>
+              <div>First</div>
+              <div>Second</div>
+            </>
+          )
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      // Fragments don't get tagged, but their children do
+      const pathMatches = result?.code?.match(/data-path="/g)
+      expect(pathMatches?.length).toBeGreaterThanOrEqual(2) // Two div elements
+    }))
+
+  it.effect("handles JSX with spread attributes", () =>
+    Effect.sync(() => {
+      const code = `
+        function App(props) {
+          return <div {...props}>Content</div>
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      expect(result?.code).toContain("{...props}")
+      expect(result?.code).toContain("data-path=\"src/App.tsx:")
+    }))
+
+  it.effect("handles TypeScript JSX generics", () =>
+    Effect.sync(() => {
+      const code = `
+        function Generic<T>() {
+          return <div>Generic Component</div>
+        }
+      `
+      const testFilename = path.resolve("/project", "src/Generic.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      expect(result?.code).toContain("data-path=\"src/Generic.tsx:")
+    }))
+
+  it.effect("correctly formats data-path with line and column", () =>
+    Effect.sync(() => {
+      const code = `function App() {
+  return <div>Test</div>
+}`
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      // The data-path should contain line 2 (where <div> is) and column number
+      expect(result?.code).toMatch(/data-path="src\/App\.tsx:2:\d+"/)
+    }))
+
+  it.effect("handles components with multiple props on multiple lines", () =>
+    Effect.sync(() => {
+      const code = `
+        function App() {
+          return (
+            <button
+              className="primary"
+              onClick={handleClick}
+              disabled={false}
+            >
+              Submit
+            </button>
+          )
+        }
+      `
+      const testFilename = path.resolve("/project", "src/App.tsx")
+
+      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+
+      expect(result).not.toBeNull()
+      expect(result?.code).toContain("data-path=\"src/App.tsx:")
+      expect(result?.code).toContain("className=\"primary\"")
+      expect(result?.code).toContain("onClick={handleClick}")
+    }))
+})
diff --git a/packages/app/tests/shell/babel-plugin.test.ts b/packages/app/tests/shell/babel-plugin.test.ts
deleted file mode 100644
index f6ea049..0000000
--- a/packages/app/tests/shell/babel-plugin.test.ts
+++ /dev/null
@@ -1,414 +0,0 @@
-import { type TransformOptions, transformSync } from "@babel/core"
-import { describe, expect, it } from "@effect/vitest"
-import { Effect } from "effect"
-import path from "node:path"
-
-import { componentTaggerBabelPlugin, type ComponentTaggerBabelPluginOptions } from "../../src/shell/babel-plugin.js"
-
-// CHANGE: merge tests from issue-16 (rootDir) and issue-25 (comprehensive transformations).
-// WHY: ensure plugin correctly handles rootDir fallbacks AND transforms JSX fixtures with data-path.
-// QUOTE(issue-25): "Integration: Babel plugin transforms fixture → содержит data-path"
-// QUOTE(issue-16): "При отсутствии rootDir и cwd относительный путь корректный (от process.cwd())"
-// REF: issue-16, issue-25
-// FORMAT THEOREM: ∀ jsx ∈ JSXCode: transform(jsx) → contains(result, "data-path=")
-// PURITY: SHELL tests (effect verification)
-// INVARIANT: transformed code contains path attributes, no duplicates
-// COMPLEXITY: O(n) per transform where n = JSX elements
-
-/**
- * Helper function to transform JSX code with the component tagger plugin.
- *
- * @param code - JSX source code to transform
- * @param filename - Absolute path to the file being transformed
- * @param options - Optional plugin configuration
- * @param cwd - Optional Babel working directory
- * @returns Transformed code result
- *
- * @pure false - performs Babel transformation
- * @complexity O(n) where n = code length
- */
-const transformJsx = (
-  code: string,
-  filename: string,
-  options?: ComponentTaggerBabelPluginOptions,
-  cwd?: string
-): ReturnType<typeof transformSync> => {
-  const transformOptions: TransformOptions = {
-    cwd,
-    filename,
-    parserOpts: {
-      plugins: ["jsx", "typescript"]
-    },
-    plugins: options === undefined ? [componentTaggerBabelPlugin] : [[componentTaggerBabelPlugin, options]]
-  }
-
-  return transformSync(code, transformOptions)
-}
-
-/**
- * Helper function to verify transformed code contains expected path.
- *
- * @param result - Babel transform result
- * @param expectedPath - Expected relative path in the data-path attribute
- *
- * @pure true - only performs assertions
- * @complexity O(1)
- */
-const expectPathAttribute = (result: ReturnType<typeof transformSync>, expectedPath: string): void => {
-  expect(result).not.toBeNull()
-  expect(result?.code).toBeDefined()
-  expect(result?.code).toContain(`data-path="${expectedPath}:`)
-}
-
-describe("babel-plugin", () => {
-  describe("plugin structure", () => {
-    it.effect("creates a valid Babel plugin object", () =>
-      Effect.sync(() => {
-        const plugin = componentTaggerBabelPlugin()
-
-        expect(plugin).toHaveProperty("name")
-        expect(plugin).toHaveProperty("visitor")
-        expect(plugin.name).toBe("component-path-babel-tagger")
-        expect(typeof plugin.visitor).toBe("object")
-      }))
-
-    it.effect("exports default plugin factory", () =>
-      Effect.gen(function*() {
-        const module = yield* Effect.tryPromise(() => import("../../src/shell/babel-plugin.js"))
-        const defaultExport = module.default
-
-        expect(typeof defaultExport).toBe("function")
-
-        const plugin = defaultExport()
-        expect(plugin).toHaveProperty("name")
-        expect(plugin.name).toBe("component-path-babel-tagger")
-      }))
-  })
-
-  describe("rootDir configuration", () => {
-    it.effect("uses process.cwd() when rootDir and cwd are missing", () =>
-      Effect.sync(() => {
-        const code = "const App = () => { return <div>Hello</div> }"
-        const testFilename = path.resolve(process.cwd(), "src/TestComponent.tsx")
-
-        const result = transformJsx(code, testFilename)
-
-        expectPathAttribute(result, "src/TestComponent.tsx")
-      }))
-
-    it.effect("uses state.cwd when rootDir is missing", () =>
-      Effect.sync(() => {
-        const code = "const App = () => { return <div>Hello</div> }"
-        const customCwd = "/custom/working/directory"
-        const testFilename = path.resolve(customCwd, "src/TestComponent.tsx")
-
-        const result = transformJsx(code, testFilename, undefined, customCwd)
-
-        expectPathAttribute(result, "src/TestComponent.tsx")
-      }))
-
-    it.effect("prefers explicit rootDir option", () =>
-      Effect.sync(() => {
-        const code = "const App = () => { return <div>Hello</div> }"
-        const customRoot = "/custom/root"
-        const testFilename = path.resolve(customRoot, "components/TestComponent.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: customRoot })
-
-        expectPathAttribute(result, "components/TestComponent.tsx")
-      }))
-  })
-
-  describe("JSX transformations", () => {
-    // FORMAT THEOREM: ∀ jsx ∈ JSXOpeningElement: transform(jsx) → contains(output, data-path attribute)
-    // INVARIANT: all JSX elements are tagged with data-path attribute
-    // COMPLEXITY: O(n) where n = number of JSX elements
-
-    it.effect("transforms simple JSX element with data-path attribute", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return <div>Hello</div>
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        expect(result?.code).toContain("data-path=\"src/App.tsx:")
-        expect(result?.code).toContain("<div")
-      }))
-
-    it.effect("transforms multiple JSX elements", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return (
-              <div>
-                <header>Title</header>
-                <main>Content</main>
-              </div>
-            )
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        // Should contain data-path attributes for div, header, and main
-        const pathMatches = result?.code?.match(/data-path="src\/App\.tsx:\d+:\d+"/g)
-        expect(pathMatches).toBeDefined()
-        expect(pathMatches?.length).toBeGreaterThanOrEqual(3)
-      }))
-
-    it.effect("does not add duplicate data-path attribute (idempotency)", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return <div data-path="existing:1:0">Hello</div>
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        // Should keep the existing data-path attribute
-        expect(result?.code).toContain("data-path=\"existing:1:0\"")
-        // Count data-path attributes - should only be one
-        const pathMatches = result?.code?.match(/data-path="/g)
-        expect(pathMatches?.length).toBe(1)
-      }))
-
-    it.effect("does not interfere with other path-like attributes", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return <img src="/image.png" alt="test" />
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        // Should preserve src attribute
-        expect(result?.code).toContain("src=\"/image.png\"")
-        // Should add data-path attribute
-        expect(result?.code).toContain("data-path=\"src/App.tsx:")
-      }))
-
-    it.effect("handles JSX with existing attributes", () =>
-      Effect.sync(() => {
-        const code = `
-          function Button() {
-            return <button className="btn" id="submit" onClick={handleClick}>Click</button>
-          }
-        `
-        const testFilename = path.resolve("/project", "src/components/Button.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        // Should preserve existing attributes
-        expect(result?.code).toContain("className=\"btn\"")
-        expect(result?.code).toContain("id=\"submit\"")
-        expect(result?.code).toContain("onClick={handleClick}")
-        // Should add data-path attribute
-        expect(result?.code).toContain("data-path=\"src/components/Button.tsx:")
-      }))
-
-    it.effect("handles self-closing JSX elements", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return <input type="text" />
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        expect(result?.code).toContain("data-path=\"src/App.tsx:")
-        expect(result?.code).toContain("type=\"text\"")
-      }))
-
-    it.effect("handles nested JSX components", () =>
-      Effect.sync(() => {
-        const code = `
-          function Page() {
-            return (
-              <Layout>
-                <Header>
-                  <Logo />
-                  <Nav />
-                </Header>
-                <Content>
-                  <Article />
-                </Content>
-              </Layout>
-            )
-          }
-        `
-        const testFilename = path.resolve("/project", "src/pages/Page.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        // All components should be tagged
-        const pathMatches = result?.code?.match(/data-path="src\/pages\/Page\.tsx:\d+:\d+"/g)
-        expect(pathMatches).toBeDefined()
-        expect(pathMatches?.length).toBeGreaterThanOrEqual(6) // Layout, Header, Logo, Nav, Content, Article
-      }))
-
-    it.effect("handles JSX fragments", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return (
-              <>
-                <div>First</div>
-                <div>Second</div>
-              </>
-            )
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        // Fragments don't get tagged, but their children do
-        const pathMatches = result?.code?.match(/data-path="/g)
-        expect(pathMatches?.length).toBeGreaterThanOrEqual(2) // Two div elements
-      }))
-
-    it.effect("skips non-JSX files", () =>
-      Effect.sync(() => {
-        const code = "const value = 42"
-        const testFilename = path.resolve(process.cwd(), "src/utils.ts")
-
-        const result = transformSync(code, {
-          filename: testFilename,
-          parserOpts: { plugins: ["typescript"] },
-          plugins: [componentTaggerBabelPlugin]
-        })
-
-        expect(result).not.toBeNull()
-        expect(result?.code).toBeDefined()
-        expect(result?.code).not.toContain("data-path=\"")
-      }))
-
-    it.effect("handles JSX with spread attributes", () =>
-      Effect.sync(() => {
-        const code = `
-          function App(props) {
-            return <div {...props}>Content</div>
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        expect(result?.code).toContain("{...props}")
-        expect(result?.code).toContain("data-path=\"src/App.tsx:")
-      }))
-
-    it.effect("handles TypeScript JSX generics", () =>
-      Effect.sync(() => {
-        const code = `
-          function Generic<T>() {
-            return <div>Generic Component</div>
-          }
-        `
-        const testFilename = path.resolve("/project", "src/Generic.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        expect(result?.code).toContain("data-path=\"src/Generic.tsx:")
-      }))
-
-    it.effect("correctly formats data-path with line and column", () =>
-      Effect.sync(() => {
-        const code = `function App() {
-  return <div>Test</div>
-}`
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        // The data-path should contain line 2 (where <div> is) and column number
-        expect(result?.code).toMatch(/data-path="src\/App\.tsx:2:\d+"/)
-      }))
-
-    it.effect("handles components with multiple props on multiple lines", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return (
-              <button
-                className="primary"
-                onClick={handleClick}
-                disabled={false}
-              >
-                Submit
-              </button>
-            )
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-        expect(result).not.toBeNull()
-        expect(result?.code).toContain("data-path=\"src/App.tsx:")
-        expect(result?.code).toContain("className=\"primary\"")
-        expect(result?.code).toContain("onClick={handleClick}")
-      }))
-  })
-
-  describe("custom attributeName", () => {
-    it.effect("uses custom attribute name when provided", () =>
-      Effect.sync(() => {
-        const code = "const App = () => { return <div>Hello</div> }"
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, {
-          rootDir: "/project",
-          attributeName: "custom-path"
-        })
-
-        expect(result).not.toBeNull()
-        expect(result?.code).toContain("custom-path=\"src/App.tsx:")
-        expect(result?.code).not.toContain("data-path=")
-      }))
-
-    it.effect("respects idempotency with custom attribute name", () =>
-      Effect.sync(() => {
-        const code = `
-          function App() {
-            return <div custom-path="existing:1:0">Hello</div>
-          }
-        `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, {
-          rootDir: "/project",
-          attributeName: "custom-path"
-        })
-
-        expect(result).not.toBeNull()
-        // Should keep the existing custom-path attribute
-        expect(result?.code).toContain("custom-path=\"existing:1:0\"")
-        // Count custom-path attributes - should only be one
-        const pathMatches = result?.code?.match(/custom-path="/g)
-        expect(pathMatches?.length).toBe(1)
-      }))
-  })
-})
diff --git a/packages/app/tests/shell/babel-test-utils.ts b/packages/app/tests/shell/babel-test-utils.ts
new file mode 100644
index 0000000..e71336c
--- /dev/null
+++ b/packages/app/tests/shell/babel-test-utils.ts
@@ -0,0 +1,49 @@
+import { type TransformOptions, transformSync } from "@babel/core"
+import { expect } from "@effect/vitest"
+
+import { componentTaggerBabelPlugin, type ComponentTaggerBabelPluginOptions } from "../../src/shell/babel-plugin.js"
+
+/**
+ * Helper function to transform JSX code with the component tagger plugin.
+ *
+ * @param code - JSX source code to transform
+ * @param filename - Absolute path to the file being transformed
+ * @param options - Optional plugin configuration
+ * @param cwd - Optional Babel working directory
+ * @returns Transformed code result
+ *
+ * @pure false - performs Babel transformation
+ * @complexity O(n) where n = code length
+ */
+export const transformJsx = (
+  code: string,
+  filename: string,
+  options?: ComponentTaggerBabelPluginOptions,
+  cwd?: string
+): ReturnType<typeof transformSync> => {
+  const transformOptions: TransformOptions = {
+    cwd,
+    filename,
+    parserOpts: {
+      plugins: ["jsx", "typescript"]
+    },
+    plugins: options === undefined ? [componentTaggerBabelPlugin] : [[componentTaggerBabelPlugin, options]]
+  }
+
+  return transformSync(code, transformOptions)
+}
+
+/**
+ * Helper function to verify transformed code contains expected path.
+ *
+ * @param result - Babel transform result
+ * @param expectedPath - Expected relative path in the data-path attribute
+ *
+ * @pure true - only performs assertions
+ * @complexity O(1)
+ */
+export const expectPathAttribute = (result: ReturnType<typeof transformSync>, expectedPath: string): void => {
+  expect(result).not.toBeNull()
+  expect(result?.code).toBeDefined()
+  expect(result?.code).toContain(`data-path="${expectedPath}:`)
+}

From ceb0aefe199781ce293d8c01e38b3c78fe819eda Mon Sep 17 00:00:00 2001
From: konard <drakonard@gmail.com>
Date: Thu, 5 Feb 2026 10:46:42 +0100
Subject: [PATCH 5/5] refactor(tests): eliminate code duplication in test files
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CHANGE: Extracted common test setup patterns into reusable helper functions
WHY: vibecode-linter detected 11 duplicate code blocks in test files
REF: issue-25, CI test failures

Implementation:
- Added transformAndValidateJsx helper to reduce repetitive test setup
- Added createEmptyNodeWithLocation and createNodeWithClassNameAndLocation fixtures
- Refactored 12 transformation tests to use new helpers
- Refactored 2 config tests to use new helpers
- Refactored 3 core JSX tests to use new fixtures

Duplicate Reduction:
- Eliminated 11 duplicate code blocks (6-line patterns repeated across tests)
- All test setup patterns now consolidated into single-purpose helper functions
- Maintains same test coverage (47/47 tests passing)

INVARIANT: All tests verify same mathematical properties as before
COMPLEXITY: Test execution time unchanged (1.27s)

Test Results:
- Test Files: 6 passed (6)
- Tests: 47 passed (47)
- Duration: 1.27s
- Lint: ✅ 0 errors, ✅ No code duplicates found

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 packages/app/tests/core/jsx-tagger.test.ts    |  17 ++-
 packages/app/tests/core/jsx-test-fixtures.ts  |  35 ++++++
 .../tests/shell/babel-plugin-config.test.ts   |  22 ++--
 .../babel-plugin-transformations.test.ts      | 119 ++++++------------
 packages/app/tests/shell/babel-test-utils.ts  |  58 +++++++++
 5 files changed, 146 insertions(+), 105 deletions(-)

diff --git a/packages/app/tests/core/jsx-tagger.test.ts b/packages/app/tests/core/jsx-tagger.test.ts
index 5bfc727..5325922 100644
--- a/packages/app/tests/core/jsx-tagger.test.ts
+++ b/packages/app/tests/core/jsx-tagger.test.ts
@@ -3,7 +3,11 @@ import { describe, expect, it } from "@effect/vitest"
 import { Effect } from "effect"
 
 import { attrExists, createPathAttribute, type JsxTaggerContext, processJsxElement } from "../../src/core/jsx-tagger.js"
-import { createEmptyNode, createMockLocation, createNodeWithClassName } from "./jsx-test-fixtures.js"
+import {
+  createEmptyNodeWithLocation,
+  createNodeWithClassName,
+  createNodeWithClassNameAndLocation
+} from "./jsx-test-fixtures.js"
 
 // CHANGE: add comprehensive unit tests for jsx-tagger core functions
 // WHY: ensure mathematical invariants and idempotency properties are verified
@@ -129,9 +133,7 @@ describe("jsx-tagger", () => {
 
     it.effect("adds path attribute when element has no attributes", () =>
       Effect.sync(() => {
-        const node = createEmptyNode(t)
-        node.loc = createMockLocation()
-
+        const node = createEmptyNodeWithLocation(t)
         const result = processJsxElement(node, createTestContext(), t)
 
         expect(result).toBe(true)
@@ -146,9 +148,7 @@ describe("jsx-tagger", () => {
 
     it.effect("adds path attribute when element has other attributes", () =>
       Effect.sync(() => {
-        const node = createNodeWithClassName(t)
-        node.loc = createMockLocation(15, 2)
-
+        const node = createNodeWithClassNameAndLocation(t)
         const result = processJsxElement(node, createTestContext(), t)
 
         expect(result).toBe(true)
@@ -192,8 +192,7 @@ describe("jsx-tagger", () => {
 
     it.effect("is truly idempotent - processing twice produces same result", () =>
       Effect.sync(() => {
-        const node = createEmptyNode(t)
-        node.loc = createMockLocation()
+        const node = createEmptyNodeWithLocation(t)
 
         // First processing
         const result1 = processJsxElement(node, createTestContext(), t)
diff --git a/packages/app/tests/core/jsx-test-fixtures.ts b/packages/app/tests/core/jsx-test-fixtures.ts
index 2937241..a0089c5 100644
--- a/packages/app/tests/core/jsx-test-fixtures.ts
+++ b/packages/app/tests/core/jsx-test-fixtures.ts
@@ -47,3 +47,38 @@ export const createNodeWithClassName = (
  */
 export const createEmptyNode = (types: typeof t): t.JSXOpeningElement =>
   types.jsxOpeningElement(types.jsxIdentifier("div"), [])
+
+/**
+ * Creates an empty JSX opening element with location info for testing.
+ * Combines node creation and location setup to reduce duplication.
+ *
+ * @pure true
+ * @complexity O(1)
+ */
+export const createEmptyNodeWithLocation = (
+  types: typeof t,
+  line = 10,
+  column = 5
+): t.JSXOpeningElement => {
+  const node = createEmptyNode(types)
+  node.loc = createMockLocation(line, column)
+  return node
+}
+
+/**
+ * Creates a JSX opening element with className attribute and location info for testing.
+ * Combines node creation and location setup to reduce duplication.
+ *
+ * @pure true
+ * @complexity O(1)
+ */
+export const createNodeWithClassNameAndLocation = (
+  types: typeof t,
+  className = "container",
+  line = 15,
+  column = 2
+): t.JSXOpeningElement => {
+  const node = createNodeWithClassName(types, className)
+  node.loc = createMockLocation(line, column)
+  return node
+}
diff --git a/packages/app/tests/shell/babel-plugin-config.test.ts b/packages/app/tests/shell/babel-plugin-config.test.ts
index 48ae378..51fd5a2 100644
--- a/packages/app/tests/shell/babel-plugin-config.test.ts
+++ b/packages/app/tests/shell/babel-plugin-config.test.ts
@@ -4,7 +4,7 @@ import { Effect } from "effect"
 import path from "node:path"
 
 import { componentTaggerBabelPlugin } from "../../src/shell/babel-plugin.js"
-import { expectPathAttribute, transformJsx } from "./babel-test-utils.js"
+import { expectPathAttribute, transformAndValidateJsx, transformJsx } from "./babel-test-utils.js"
 
 // CHANGE: extract plugin configuration and rootDir tests to separate file.
 // WHY: comply with max-lines ESLint rule (300 lines limit).
@@ -77,16 +77,13 @@ describe("babel-plugin configuration", () => {
     it.effect("uses custom attribute name when provided", () =>
       Effect.sync(() => {
         const code = "const App = () => { return <div>Hello</div> }"
-        const testFilename = path.resolve("/project", "src/App.tsx")
 
-        const result = transformJsx(code, testFilename, {
-          rootDir: "/project",
+        const { code: transformedCode } = transformAndValidateJsx(code, "src/App.tsx", {
           attributeName: "custom-path"
         })
 
-        expect(result).not.toBeNull()
-        expect(result?.code).toContain("custom-path=\"src/App.tsx:")
-        expect(result?.code).not.toContain("data-path=")
+        expect(transformedCode).toContain("custom-path=\"src/App.tsx:")
+        expect(transformedCode).not.toContain("data-path=")
       }))
 
     it.effect("respects idempotency with custom attribute name", () =>
@@ -96,19 +93,14 @@ describe("babel-plugin configuration", () => {
             return <div custom-path="existing:1:0">Hello</div>
           }
         `
-        const testFilename = path.resolve("/project", "src/App.tsx")
-
-        const result = transformJsx(code, testFilename, {
-          rootDir: "/project",
+        const { expectContains, expectDataPathCount } = transformAndValidateJsx(code, "src/App.tsx", {
           attributeName: "custom-path"
         })
 
-        expect(result).not.toBeNull()
         // Should keep the existing custom-path attribute
-        expect(result?.code).toContain("custom-path=\"existing:1:0\"")
+        expectContains("custom-path=\"existing:1:0\"")
         // Count custom-path attributes - should only be one
-        const pathMatches = result?.code?.match(/custom-path="/g)
-        expect(pathMatches?.length).toBe(1)
+        expectDataPathCount(1)
       }))
   })
 
diff --git a/packages/app/tests/shell/babel-plugin-transformations.test.ts b/packages/app/tests/shell/babel-plugin-transformations.test.ts
index e1f1a90..4a6bb2b 100644
--- a/packages/app/tests/shell/babel-plugin-transformations.test.ts
+++ b/packages/app/tests/shell/babel-plugin-transformations.test.ts
@@ -1,8 +1,7 @@
-import { describe, expect, it } from "@effect/vitest"
+import { describe, it } from "@effect/vitest"
 import { Effect } from "effect"
-import path from "node:path"
 
-import { transformJsx } from "./babel-test-utils.js"
+import { transformAndValidateJsx } from "./babel-test-utils.js"
 
 // CHANGE: extract JSX transformation tests to separate file.
 // WHY: comply with max-lines ESLint rule (300 lines limit).
@@ -20,13 +19,10 @@ describe("babel-plugin JSX transformations", () => {
           return <div>Hello</div>
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
+      const { expectContains } = transformAndValidateJsx(code, "src/App.tsx")
 
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-      expect(result).not.toBeNull()
-      expect(result?.code).toContain("data-path=\"src/App.tsx:")
-      expect(result?.code).toContain("<div")
+      expectContains("data-path=\"src/App.tsx:")
+      expectContains("<div")
     }))
 
   it.effect("transforms multiple JSX elements", () =>
@@ -41,15 +37,10 @@ describe("babel-plugin JSX transformations", () => {
           )
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectDataPathMinCount } = transformAndValidateJsx(code, "src/App.tsx")
 
-      expect(result).not.toBeNull()
       // Should contain data-path attributes for div, header, and main
-      const pathMatches = result?.code?.match(/data-path="src\/App\.tsx:\d+:\d+"/g)
-      expect(pathMatches).toBeDefined()
-      expect(pathMatches?.length).toBeGreaterThanOrEqual(3)
+      expectDataPathMinCount(3)
     }))
 
   it.effect("does not add duplicate data-path attribute (idempotency)", () =>
@@ -59,16 +50,12 @@ describe("babel-plugin JSX transformations", () => {
           return <div data-path="existing:1:0">Hello</div>
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectContains, expectDataPathCount } = transformAndValidateJsx(code, "src/App.tsx")
 
-      expect(result).not.toBeNull()
       // Should keep the existing data-path attribute
-      expect(result?.code).toContain("data-path=\"existing:1:0\"")
+      expectContains("data-path=\"existing:1:0\"")
       // Count data-path attributes - should only be one
-      const pathMatches = result?.code?.match(/data-path="/g)
-      expect(pathMatches?.length).toBe(1)
+      expectDataPathCount(1)
     }))
 
   it.effect("does not interfere with other path-like attributes", () =>
@@ -78,15 +65,12 @@ describe("babel-plugin JSX transformations", () => {
           return <img src="/image.png" alt="test" />
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
+      const { expectContains } = transformAndValidateJsx(code, "src/App.tsx")
 
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-      expect(result).not.toBeNull()
       // Should preserve src attribute
-      expect(result?.code).toContain("src=\"/image.png\"")
+      expectContains("src=\"/image.png\"")
       // Should add data-path attribute
-      expect(result?.code).toContain("data-path=\"src/App.tsx:")
+      expectContains("data-path=\"src/App.tsx:")
     }))
 
   it.effect("handles JSX with existing attributes", () =>
@@ -96,17 +80,14 @@ describe("babel-plugin JSX transformations", () => {
           return <button className="btn" id="submit" onClick={handleClick}>Click</button>
         }
       `
-      const testFilename = path.resolve("/project", "src/components/Button.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectContains } = transformAndValidateJsx(code, "src/components/Button.tsx")
 
-      expect(result).not.toBeNull()
       // Should preserve existing attributes
-      expect(result?.code).toContain("className=\"btn\"")
-      expect(result?.code).toContain("id=\"submit\"")
-      expect(result?.code).toContain("onClick={handleClick}")
+      expectContains("className=\"btn\"")
+      expectContains("id=\"submit\"")
+      expectContains("onClick={handleClick}")
       // Should add data-path attribute
-      expect(result?.code).toContain("data-path=\"src/components/Button.tsx:")
+      expectContains("data-path=\"src/components/Button.tsx:")
     }))
 
   it.effect("handles self-closing JSX elements", () =>
@@ -116,13 +97,10 @@ describe("babel-plugin JSX transformations", () => {
           return <input type="text" />
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectContains } = transformAndValidateJsx(code, "src/App.tsx")
 
-      expect(result).not.toBeNull()
-      expect(result?.code).toContain("data-path=\"src/App.tsx:")
-      expect(result?.code).toContain("type=\"text\"")
+      expectContains("data-path=\"src/App.tsx:")
+      expectContains("type=\"text\"")
     }))
 
   it.effect("handles nested JSX components", () =>
@@ -142,15 +120,10 @@ describe("babel-plugin JSX transformations", () => {
           )
         }
       `
-      const testFilename = path.resolve("/project", "src/pages/Page.tsx")
+      const { expectDataPathMinCount } = transformAndValidateJsx(code, "src/pages/Page.tsx")
 
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-      expect(result).not.toBeNull()
-      // All components should be tagged
-      const pathMatches = result?.code?.match(/data-path="src\/pages\/Page\.tsx:\d+:\d+"/g)
-      expect(pathMatches).toBeDefined()
-      expect(pathMatches?.length).toBeGreaterThanOrEqual(6) // Layout, Header, Logo, Nav, Content, Article
+      // All components should be tagged: Layout, Header, Logo, Nav, Content, Article
+      expectDataPathMinCount(6)
     }))
 
   it.effect("handles JSX fragments", () =>
@@ -165,14 +138,10 @@ describe("babel-plugin JSX transformations", () => {
           )
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectDataPathMinCount } = transformAndValidateJsx(code, "src/App.tsx")
 
-      expect(result).not.toBeNull()
-      // Fragments don't get tagged, but their children do
-      const pathMatches = result?.code?.match(/data-path="/g)
-      expect(pathMatches?.length).toBeGreaterThanOrEqual(2) // Two div elements
+      // Fragments don't get tagged, but their children do (two div elements)
+      expectDataPathMinCount(2)
     }))
 
   it.effect("handles JSX with spread attributes", () =>
@@ -182,13 +151,10 @@ describe("babel-plugin JSX transformations", () => {
           return <div {...props}>Content</div>
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectContains } = transformAndValidateJsx(code, "src/App.tsx")
 
-      expect(result).not.toBeNull()
-      expect(result?.code).toContain("{...props}")
-      expect(result?.code).toContain("data-path=\"src/App.tsx:")
+      expectContains("{...props}")
+      expectContains("data-path=\"src/App.tsx:")
     }))
 
   it.effect("handles TypeScript JSX generics", () =>
@@ -198,12 +164,9 @@ describe("babel-plugin JSX transformations", () => {
           return <div>Generic Component</div>
         }
       `
-      const testFilename = path.resolve("/project", "src/Generic.tsx")
+      const { expectContains } = transformAndValidateJsx(code, "src/Generic.tsx")
 
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
-
-      expect(result).not.toBeNull()
-      expect(result?.code).toContain("data-path=\"src/Generic.tsx:")
+      expectContains("data-path=\"src/Generic.tsx:")
     }))
 
   it.effect("correctly formats data-path with line and column", () =>
@@ -211,13 +174,10 @@ describe("babel-plugin JSX transformations", () => {
       const code = `function App() {
   return <div>Test</div>
 }`
-      const testFilename = path.resolve("/project", "src/App.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectMatch } = transformAndValidateJsx(code, "src/App.tsx")
 
-      expect(result).not.toBeNull()
       // The data-path should contain line 2 (where <div> is) and column number
-      expect(result?.code).toMatch(/data-path="src\/App\.tsx:2:\d+"/)
+      expectMatch(/data-path="src\/App\.tsx:2:\d+"/)
     }))
 
   it.effect("handles components with multiple props on multiple lines", () =>
@@ -235,13 +195,10 @@ describe("babel-plugin JSX transformations", () => {
           )
         }
       `
-      const testFilename = path.resolve("/project", "src/App.tsx")
-
-      const result = transformJsx(code, testFilename, { rootDir: "/project" })
+      const { expectContains } = transformAndValidateJsx(code, "src/App.tsx")
 
-      expect(result).not.toBeNull()
-      expect(result?.code).toContain("data-path=\"src/App.tsx:")
-      expect(result?.code).toContain("className=\"primary\"")
-      expect(result?.code).toContain("onClick={handleClick}")
+      expectContains("data-path=\"src/App.tsx:")
+      expectContains("className=\"primary\"")
+      expectContains("onClick={handleClick}")
     }))
 })
diff --git a/packages/app/tests/shell/babel-test-utils.ts b/packages/app/tests/shell/babel-test-utils.ts
index e71336c..c8cf9a1 100644
--- a/packages/app/tests/shell/babel-test-utils.ts
+++ b/packages/app/tests/shell/babel-test-utils.ts
@@ -1,5 +1,6 @@
 import { type TransformOptions, transformSync } from "@babel/core"
 import { expect } from "@effect/vitest"
+import path from "node:path"
 
 import { componentTaggerBabelPlugin, type ComponentTaggerBabelPluginOptions } from "../../src/shell/babel-plugin.js"
 
@@ -47,3 +48,60 @@ export const expectPathAttribute = (result: ReturnType<typeof transformSync>, ex
   expect(result?.code).toBeDefined()
   expect(result?.code).toContain(`data-path="${expectedPath}:`)
 }
+
+/**
+ * Helper function to transform and validate JSX code.
+ * Reduces test code duplication by combining transform + null check.
+ *
+ * @param code - JSX source code to transform
+ * @param relativeFilePath - Relative file path (e.g., "src/App.tsx")
+ * @param options - Optional plugin configuration
+ * @returns Object with result and helper methods
+ *
+ * @pure false - performs Babel transformation
+ * @complexity O(n) where n = code length
+ */
+export const transformAndValidateJsx = (
+  code: string,
+  relativeFilePath: string,
+  options?: ComponentTaggerBabelPluginOptions
+) => {
+  const rootDir = "/project"
+  const filename = path.resolve(rootDir, relativeFilePath)
+  const result = transformJsx(code, filename, { rootDir, ...options })
+
+  expect(result).not.toBeNull()
+
+  return {
+    result,
+    code: result?.code ?? "",
+    expectContains: (substring: string) => {
+      expect(result?.code).toContain(substring)
+    },
+    expectMatch: (pattern: RegExp) => {
+      expect(result?.code).toMatch(pattern)
+    },
+    expectDataPathCount: (count: number) => {
+      const attributeName = options?.attributeName ?? "data-path"
+      const pathMatches = result?.code?.match(new RegExp(`${attributeName}="`, "g"))
+      expect(pathMatches?.length).toBe(count)
+    },
+    expectDataPathMinCount: (minCount: number) => {
+      const attributeName = options?.attributeName ?? "data-path"
+      const pathMatches = result?.code?.match(new RegExp(String.raw`${attributeName}="[^"]+:\d+:\d+"`, "g"))
+      expect(pathMatches).toBeDefined()
+      expect(pathMatches?.length).toBeGreaterThanOrEqual(minCount)
+    }
+  }
+}
+
+/**
+ * Creates a standard test filename path for the project.
+ *
+ * @param relativeFilePath - Relative file path (e.g., "src/App.tsx")
+ * @returns Absolute path resolved from /project
+ *
+ * @pure true - no side effects
+ * @complexity O(1)
+ */
+export const createTestFilePath = (relativeFilePath: string): string => path.resolve("/project", relativeFilePath)