fix(lint/noSuspiciousSemicolonInJsx): catch suspicious semicolon in f…

…ragment (#4287)

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

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);
             }

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>;
+      </>
+  );
+}

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.
+  
+
+```