From 5a1710f243e899b26e78e4c84e90922578991700 Mon Sep 17 00:00:00 2001
From: Vasu Singh <vasucp1207@gmail.com>
Date: Wed, 16 Oct 2024 11:15:20 +0530
Subject: [PATCH] fix(lint/noSuspiciousSemicolonInJsx): catch suspicious
 semicolon in fragment (#4287)

---
 CHANGELOG.md                                  |  2 +
 .../no_suspicious_semicolon_in_jsx.rs         | 15 +++--
 .../noSuspiciousSemicolonInJsx/invalid.jsx    | 18 ++++++
 .../invalid.jsx.snap                          | 60 +++++++++++++++++++
 4 files changed, 89 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 74c6ad075182..e5903d8a6b8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,8 @@ our [guidelines for writing a good changelog entry](https://github.com/biomejs/b
 
 - Improved the message for unused suppression comments. Contributed by @dyc3
 
+- Catch suspicious semicolon in react fragment in `noSuspiciousSemicolonInJsx`. Contributed by @vasucp1207
+
 ### CLI
 
 #### Enhancements
diff --git a/crates/biome_js_analyze/src/lint/suspicious/no_suspicious_semicolon_in_jsx.rs b/crates/biome_js_analyze/src/lint/suspicious/no_suspicious_semicolon_in_jsx.rs
index 000748a28589..17f8b36708cc 100644
--- a/crates/biome_js_analyze/src/lint/suspicious/no_suspicious_semicolon_in_jsx.rs
+++ b/crates/biome_js_analyze/src/lint/suspicious/no_suspicious_semicolon_in_jsx.rs
@@ -1,7 +1,7 @@
 use biome_analyze::{context::RuleContext, declare_lint_rule, Ast, Rule, RuleDiagnostic};
 use biome_console::markup;
-use biome_js_syntax::{jsx_ext::AnyJsxElement, JsxChildList, JsxElement};
-use biome_rowan::{AstNode, AstNodeList, TextRange};
+use biome_js_syntax::{AnyJsxTag, JsxChildList};
+use biome_rowan::{AstNodeList, TextRange};
 
 declare_lint_rule! {
     /// It detects possible "wrong" semicolons inside JSX elements.
@@ -51,16 +51,19 @@ declare_lint_rule! {
 }
 
 impl Rule for NoSuspiciousSemicolonInJsx {
-    type Query = Ast<AnyJsxElement>;
+    type Query = Ast<AnyJsxTag>;
     type State = TextRange;
     type Signals = Option<Self::State>;
     type Options = ();
 
     fn run(ctx: &RuleContext<Self>) -> Self::Signals {
         let node = ctx.query();
-        let jsx_element = node.parent::<JsxElement>()?;
-        if let AnyJsxElement::JsxOpeningElement(_) = node {
-            let has_semicolon = has_suspicious_semicolon(&jsx_element.children());
+        if let Some(children) = match node {
+            AnyJsxTag::JsxElement(element) => Some(element.children()),
+            AnyJsxTag::JsxFragment(fragment) => Some(fragment.children()),
+            _ => None,
+        } {
+            let has_semicolon = has_suspicious_semicolon(&children);
             if let Some(incorrect_semicolon) = has_semicolon {
                 return Some(incorrect_semicolon);
             }
diff --git a/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx b/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx
index 3d3c2b94ee4a..332d0ef63aa9 100644
--- a/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx
+++ b/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx
@@ -21,3 +21,21 @@ const Component3 = () => (
         <Component />;
     </div>
 )
+
+const Component4 = () => {
+  return (
+      <>
+          <div />;
+      </>
+  );
+}
+
+const Component5 = () => {
+  return (
+      <>
+        <Component>
+          <div />
+        </Component>;
+      </>
+  );
+}
diff --git a/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx.snap b/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx.snap
index 7b15d0759fe5..c99bf4241b35 100644
--- a/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx.snap
+++ b/crates/biome_js_analyze/tests/specs/suspicious/noSuspiciousSemicolonInJsx/invalid.jsx.snap
@@ -28,6 +28,24 @@ const Component3 = () => (
     </div>
 )
 
+const Component4 = () => {
+  return (
+      <>
+          <div />;
+      </>
+  );
+}
+
+const Component5 = () => {
+  return (
+      <>
+        <Component>
+          <div />
+        </Component>;
+      </>
+  );
+}
+
 ```
 
 # Diagnostics
@@ -93,3 +111,45 @@ invalid.jsx:21:22 lint/suspicious/noSuspiciousSemicolonInJsx ━━━━━━
   
 
 ```
+
+```
+invalid.jsx:28:18 lint/suspicious/noSuspiciousSemicolonInJsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! There is a suspicious semicolon in the JSX element.
+  
+    26 │   return (
+    27 │       <>
+  > 28 │           <div />;
+       │                  ^
+  > 29 │       </>
+       │       
+    30 │   );
+    31 │ }
+  
+  i This is usually the result of a typo or some refactor gone wrong.
+  
+  i Remove the semicolon, or move it inside a JSX element.
+  
+
+```
+
+```
+invalid.jsx:38:21 lint/suspicious/noSuspiciousSemicolonInJsx ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  ! There is a suspicious semicolon in the JSX element.
+  
+    36 │         <Component>
+    37 │           <div />
+  > 38 │         </Component>;
+       │                     ^
+  > 39 │       </>
+       │       
+    40 │   );
+    41 │ }
+  
+  i This is usually the result of a typo or some refactor gone wrong.
+  
+  i Remove the semicolon, or move it inside a JSX element.
+  
+
+```