diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index f6f5027fb..af3784e8f 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,6 +1,7 @@
 {
   "recommendations": [
     "dprint.dprint",
-    "dbaeumer.vscode-eslint"
+    "dbaeumer.vscode-eslint",
+    "bierner.comment-tagged-templates"
   ]
 }
diff --git a/eslint.config.mts b/eslint.config.mts
index c414b5306..1e28c22d8 100644
--- a/eslint.config.mts
+++ b/eslint.config.mts
@@ -197,7 +197,23 @@ const config: FlatConfig[] = [
         },
       ],
       // Part: unicorn rules
-      "unicorn/template-indent": "warn",
+      "unicorn/template-indent": [
+        "warn",
+        {
+          comments: [
+            "outdent",
+            "dedent",
+            "html",
+            "tsx",
+          ],
+          tags: [
+            "outdent",
+            "dedent",
+            "html",
+            "tsx",
+          ],
+        },
+      ],
       // Part: eslint-comments rules
       "eslint-comments/disable-enable-pair": ["error", { allowWholeFile: true }],
       "eslint-comments/no-aggregating-enable": "error",
diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts
index f6e8fb386..6447fbf4e 100644
--- a/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts
+++ b/packages/plugins/eslint-plugin-react-debug/src/rules/class-component.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./class-component";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             return <div />;
@@ -16,7 +14,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ClassComponent = class extends React.Component {
             render() {
                 return <div />;
@@ -26,7 +24,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           class UnstableNestedClassComponent extends React.Component {
             render() {
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             class UnstableNestedClassComponent extends React.Component {
@@ -67,7 +65,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             class UnstableNestedClassComponent extends React.Component {
@@ -90,7 +88,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedFunctionComponent() {
@@ -108,7 +106,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedClassComponent() {
@@ -126,7 +124,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const UnstableNestedVariableComponent = () => {
@@ -144,25 +142,25 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: `
-            class ParentComponent extends React.Component {
-              render() {
-                const UnstableNestedClassComponent = () => {
-                  return React.createElement("div", null);
-                }
-
-                return React.createElement(
-                  "div",
-                  null,
-                  React.createElement(UnstableNestedClassComponent, null)
-                );
-              }
+      code: /* tsx */ `
+        class ParentComponent extends React.Component {
+          render() {
+            const UnstableNestedClassComponent = () => {
+              return React.createElement("div", null);
             }
-          `,
+
+            return React.createElement(
+              "div",
+              null,
+              React.createElement(UnstableNestedClassComponent, null)
+            );
+          }
+        }
+      `,
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = () => {
@@ -176,7 +174,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "CLASS_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = (props) => {
diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts
index 910857ca7..4be86d028 100644
--- a/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts
+++ b/packages/plugins/eslint-plugin-react-debug/src/rules/function-component.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allFunctions, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./function-component";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         function App() {
             return <div>foo</div>
         }
@@ -24,7 +22,9 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "const App = () => <div>foo</div>",
+      code: /* tsx */ `
+        const App = () => <div>foo</div>
+      `,
       errors: [{
         data: {
           name: "App",
@@ -36,7 +36,9 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "const App = React.memo(() => <div>foo</div>)",
+      code: /* tsx */ `
+        const App = React.memo(() => <div>foo</div>)
+      `,
       errors: [{
         data: {
           name: "App",
@@ -48,7 +50,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = React.memo(function App() {
             return <div>foo</div>
         })
@@ -66,7 +68,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = React.memo(function App() {
             const [state, setState] = useState(0);
 
@@ -86,7 +88,9 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "const App = React.forwardRef(() => <div>foo</div>)",
+      code: /* tsx */ `
+        const App = React.forwardRef(() => <div>foo</div>)
+      `,
       errors: [{
         data: {
           name: "App",
@@ -98,7 +102,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { memo } from "react";
 
         const MemoComponent = memo(() => <div></div>)
@@ -114,7 +118,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { memo } from "react";
 
         const MemoComponent = memo(function Component() {
@@ -133,7 +137,9 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "const ForwardRefComponent = React.forwardRef(() => <div></div>)",
+      code: /* tsx */ `
+        const ForwardRefComponent = React.forwardRef(() => <div></div>)
+      `,
       errors: [{
         data: {
           name: "ForwardRefComponent",
@@ -145,7 +151,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { memo, forwardRef } from "react";
 
         const MemoForwardRefComponent = memo(forwardRef(() => <div></div>))
@@ -161,7 +167,9 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "const MemoForwardRefComponent = React.memo(React.forwardRef(() => <div></div>))",
+      code: /* tsx */ `
+        const MemoForwardRefComponent = React.memo(React.forwardRef(() => <div></div>))
+      `,
       errors: [{
         data: {
           name: "MemoForwardRefComponent",
@@ -173,7 +181,9 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "const App = () => React.createElement('div', null, 'foo')",
+      code: /* tsx */ `
+        const App = () => React.createElement('div', null, 'foo')
+      `,
       errors: [{
         data: {
           name: "App",
@@ -185,7 +195,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function UnstableNestedFunctionComponent() {
             return <div />;
@@ -220,7 +230,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function UnstableNestedFunctionComponent() {
             return React.createElement("div", null);
@@ -255,7 +265,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedVariableComponent = () => {
             return <div />;
@@ -290,7 +300,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedVariableComponent = () => {
             return React.createElement("div", null);
@@ -325,7 +335,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           function UnstableNestedFunctionComponent() {
             return <div />;
@@ -360,7 +370,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           function UnstableNestedFunctionComponent() {
             return React.createElement("div", null);
@@ -395,7 +405,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export default () => {
           function UnstableNestedFunctionComponent() {
             return <div />;
@@ -430,7 +440,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export default () => {
           function UnstableNestedFunctionComponent() {
             return React.createElement("div", null);
@@ -465,7 +475,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           const UnstableNestedVariableComponent = () => {
             return <div />;
@@ -500,7 +510,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           const UnstableNestedVariableComponent = () => {
             return React.createElement("div", null);
@@ -535,7 +545,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           class UnstableNestedClassComponent extends React.Component {
             render() {
@@ -561,7 +571,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           class UnstableNestedClassComponent extends React.Component {
             render() {
@@ -587,7 +597,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedFunctionComponent() {
@@ -613,7 +623,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedClassComponent() {
@@ -639,7 +649,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const UnstableNestedVariableComponent = () => {
@@ -693,7 +703,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function getComponent() {
             function NestedUnstableFunctionComponent() {
@@ -732,7 +742,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function getComponent() {
             function NestedUnstableFunctionComponent() {
@@ -767,7 +777,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ComponentWithProps(props) {
           return <div />;
         }
@@ -805,7 +815,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ComponentWithProps(props) {
           return React.createElement("div", null);
         }
@@ -849,7 +859,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ComponentWithProps(props) {
           return <div />;
         }
@@ -882,7 +892,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ComponentWithProps(props) {
           return React.createElement("div", null);
         }
@@ -915,7 +925,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function RenderPropComponent(props) {
           return props.render({});
         }
@@ -960,7 +970,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ComponentForProps(props) {
           return <div />;
         }
@@ -993,7 +1003,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ComponentForProps(props) {
           return React.createElement("div", null);
         }
@@ -1026,7 +1036,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           return (
             <ComponentForProps someMap={{ Header: () => <div /> }} />
@@ -1055,7 +1065,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = () => {
@@ -1079,7 +1089,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = (props) => {
@@ -1110,7 +1120,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           return (
             <SomeComponent>
@@ -1138,7 +1148,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const thingElement = thing.match({
             loading: () => <div />,
@@ -1165,7 +1175,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const rows = [
             {
@@ -1190,7 +1200,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(() => {
             return <div />;
@@ -1225,7 +1235,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(
             () => React.createElement("div", null),
@@ -1260,7 +1270,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(
             function () {
@@ -1297,7 +1307,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(
             function () {
@@ -1336,9 +1346,9 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allFunctions,
-    dedent`const results = data.flatMap((x) => x?.name || []) || []`,
-    dedent`const results = allSettled.map((x) => (x.status === 'fulfilled' ? <div /> : null))`,
-    dedent`const results = allSettled.map((x) => (x.status === 'fulfilled' ? format(x.value) : null))`,
-    dedent`const results = allSettled.mapLike((x) => (x.status === 'fulfilled' ? format(x.value) : null))`,
+    "const results = data.flatMap((x) => x?.name || []) || []",
+    "const results = allSettled.map((x) => (x.status === 'fulfilled' ? <div /> : null))",
+    "const results = allSettled.map((x) => (x.status === 'fulfilled' ? format(x.value) : null))",
+    "const results = allSettled.mapLike((x) => (x.status === 'fulfilled' ? format(x.value) : null))",
   ],
 });
diff --git a/packages/plugins/eslint-plugin-react-debug/src/rules/react-hooks.spec.ts b/packages/plugins/eslint-plugin-react-debug/src/rules/react-hooks.spec.ts
index 6f0609b10..0eecb5550 100644
--- a/packages/plugins/eslint-plugin-react-debug/src/rules/react-hooks.spec.ts
+++ b/packages/plugins/eslint-plugin-react-debug/src/rules/react-hooks.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allFunctions, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./react-hooks";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         function useToggle() {
             const [value, setValue] = useState(false);
             return [value, () => setValue(x => !x)];
@@ -23,7 +21,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         // 🔴 Avoid: A Hook that doesn't use Hooks
         function useSorted(items) {
           return items.slice().sort();
@@ -40,7 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function useToggle() {
             const [value, setValue] = useState(false);
             return [value, () => setValue(x => !x)];
@@ -69,7 +67,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const useClassnames = (obj) => {
             // Invalid, because useClassnames doesn't use any other React Hooks.
             var k, cls='';
@@ -93,7 +91,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function useClassnames(obj) {
             // Invalid, because useClassnames doesn't use any other React Hooks.
             var k, cls='';
@@ -117,7 +115,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export function useNestedHook() {
             const [state, setState] = useState("state");
             const useInnerHook = () => {
@@ -145,7 +143,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export function useNestedHook() {
             const useInnerHook = () => {
                 const [state, setState] = useState("state");
@@ -173,7 +171,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export function useNestedHook() {
             const fn = () => {
                 const [state, setState] = useState("state");
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.spec.ts
index 2d16d46c2..aece62865 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-children-in-void-dom-elements.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-children-in-void-dom-elements";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<br>Foo</br>;",
+      code: /* tsx */ `<br>Foo</br>;`,
       errors: [
         {
           data: { element: "br" },
@@ -15,7 +13,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: '<br children="Foo" />;',
+      code: /* tsx */ `<br children="Foo" />;`,
       errors: [
         {
           data: { element: "br" },
@@ -24,7 +22,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: '<img {...props} children="Foo" />;',
+      code: /* tsx */ `<img {...props} children="Foo" />;`,
       errors: [
         {
           data: { element: "img" },
@@ -33,7 +31,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: '<br dangerouslySetInnerHTML={{ __html: "Foo" }} />;',
+      code: /* tsx */ `<br dangerouslySetInnerHTML={{ __html: "Foo" }} />;`,
       errors: [
         {
           data: { element: "br" },
@@ -42,7 +40,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: 'React.createElement("br", {}, "Foo");',
+      code: /* tsx */ `React.createElement("br", {}, "Foo");`,
       errors: [
         {
           data: { element: "br" },
@@ -51,7 +49,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: 'React.createElement("br", { children: "Foo" });',
+      code: /* tsx */ `React.createElement("br", { children: "Foo" });`,
       errors: [
         {
           data: { element: "br" },
@@ -60,7 +58,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: 'React.createElement("br", { dangerouslySetInnerHTML: { __html: "Foo" } });',
+      code: /* tsx */ `React.createElement("br", { dangerouslySetInnerHTML: { __html: "Foo" } });`,
       errors: [
         {
           data: { element: "br" },
@@ -69,7 +67,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React, {createElement} from "react";
         createElement("img", {}, "Foo");
       `,
@@ -81,7 +79,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React, {createElement} from "react";
         createElement("img", { children: "Foo" });
       `,
@@ -93,7 +91,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React, {createElement} from "react";
         createElement("img", { dangerouslySetInnerHTML: { __html: "Foo" } });
       `,
@@ -109,39 +107,27 @@ ruleTester.run(RULE_NAME, rule, {
     ...allValid,
     "<div>Foo</div>;",
     '<div children="Foo" />;',
-
     '<div dangerouslySetInnerHTML={{ __html: "Foo" }} />;',
-
     'React.createElement("div", {}, "Foo");',
-
     'React.createElement("div", { children: "Foo" });',
-
     'React.createElement("div", { dangerouslySetInnerHTML: { __html: "Foo" } });',
-
     'document.createElement("img");',
-
     'React.createElement("img");',
-
     "React.createElement();",
-
     "document.createElement();",
-
-    dedent`
+    /* tsx */ `
       const props = {};
       React.createElement("img", props);
     `,
-
-    dedent`
+    /* tsx */ `
       import React, {createElement} from "react";
       createElement("div");
     `,
-
-    dedent`
+    /* tsx */ `
       import React, {createElement} from "react";
       createElement("img");
     `,
-
-    dedent`
+    /* tsx */ `
       import React, {createElement, PureComponent} from "react";
       class Button extends PureComponent {
         handleClick(ev) {
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.spec.ts
index dfb22c51d..713fbed89 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml-with-children.spec.ts
@@ -1,72 +1,81 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-dangerously-set-innerhtml-with-children";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: '<div dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</div>',
+      code: /* tsx */ `<div dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</div>`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: '<div dangerouslySetInnerHTML={{ __html: "HTML" }} children="Children" />',
+      code: /* tsx */ `<div dangerouslySetInnerHTML={{ __html: "HTML" }} children="Children" />`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: `const props = { dangerouslySetInnerHTML: { __html: "HTML" } }
-            ;<div {...props}>Children</div>`,
+      code: /* tsx */ `
+        const props = { dangerouslySetInnerHTML: { __html: "HTML" } }
+        ;<div {...props}>Children</div>
+      `,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: `const props = { children: "Children", dangerouslySetInnerHTML: { __html: "HTML" } }
-            ;<div {...props} />`,
+      code: /* tsx */ `
+        const props = { children: "Children", dangerouslySetInnerHTML: { __html: "HTML" } }
+        ;<div {...props} />
+      `,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: '<App dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</App>',
+      code: /* tsx */ `<App dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</App>`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: '<App dangerouslySetInnerHTML={{ __html: "HTML" }} children="Children" />',
+      code: /* tsx */ `<App dangerouslySetInnerHTML={{ __html: "HTML" }} children="Children" />`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: '<App dangerouslySetInnerHTML={{ __html: "HTML" }}> </App>',
+      code: /* tsx */ `<App dangerouslySetInnerHTML={{ __html: "HTML" }}> </App>`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: 'React.createElement("div", { dangerouslySetInnerHTML: { __html: "HTML" } }, "Children")',
+      code: /* tsx */ `React.createElement("div", { dangerouslySetInnerHTML: { __html: "HTML" } }, "Children")`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: 'React.createElement("div", { dangerouslySetInnerHTML: { __html: "HTML" }, children: "Children" })',
+      code:
+        /* tsx */ `React.createElement("div", { dangerouslySetInnerHTML: { __html: "HTML" }, children: "Children" })`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: 'React.createElement("App", { dangerouslySetInnerHTML: { __html: "HTML" } }, "Children")',
+      code: /* tsx */ `React.createElement("App", { dangerouslySetInnerHTML: { __html: "HTML" } }, "Children")`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: 'React.createElement("App", { dangerouslySetInnerHTML: { __html: "HTML" }, children: "Children" })',
+      code:
+        /* tsx */ `React.createElement("App", { dangerouslySetInnerHTML: { __html: "HTML" }, children: "Children" })`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: `const props = { dangerouslySetInnerHTML: { __html: "HTML" } }
-            React.createElement("div", props, "Children")`,
+      code: /* tsx */ `
+        const props = { dangerouslySetInnerHTML: { __html: "HTML" } }
+        React.createElement("div", props, "Children")
+      `,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: `const props = { children: "Children", dangerouslySetInnerHTML: { __html: "HTML" } }
-            React.createElement("div", props)`,
+      code: /* tsx */ `
+        const props = { children: "Children", dangerouslySetInnerHTML: { __html: "HTML" } }
+        React.createElement("div", props)
+      `,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
     {
-      code: `
-            const moreProps = { children: "Children" }
-            const otherProps = { ...moreProps }
-            const props = { ...otherProps, dangerouslySetInnerHTML: { __html: "HTML" } }
-            React.createElement("div", props)`,
+      code: /* tsx */ `
+        const moreProps = { children: "Children" }
+        const otherProps = { ...moreProps }
+        const props = { ...otherProps, dangerouslySetInnerHTML: { __html: "HTML" } }
+        React.createElement("div", props)
+      `,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML_WITH_CHILDREN" }],
     },
   ],
@@ -76,16 +85,16 @@ ruleTester.run(RULE_NAME, rule, {
     "<div {...props} />",
     '<div dangerouslySetInnerHTML={{ __html: "HTML" }} />',
     '<div children="Children" />',
-    dedent`
+    /* tsx */ `
       const props = { dangerouslySetInnerHTML: { __html: "HTML" } }
       const div = <div {...props} />
     `,
-    dedent`
+    /* tsx */ `
       const moreProps = { className: "eslint" }
       const props = { children: "Children", ...moreProps }
       const div = <div {...props} />
     `,
-    dedent`
+    /* tsx */ `
       const otherProps = { children: "Children" }
       const { a, b, ...props } = otherProps
       const div = <div {...props} />
@@ -93,13 +102,13 @@ ruleTester.run(RULE_NAME, rule, {
     "<App>Children</App>",
     '<App dangerouslySetInnerHTML={{ __html: "HTML" }} />',
     '<App dangerouslySetInnerHTML={{ __html: "HTML" }}>\n</App>',
-    dedent`
+    /* tsx */ `
       React.createElement("div", {
           dangerouslySetInnerHTML: { __html: "HTML" }
       })
     `,
     'React.createElement("div", {}, "Children")',
-    dedent`
+    /* tsx */ `
       React.createElement("App", {
           dangerouslySetInnerHTML: { __html: "HTML" }
       })
@@ -107,7 +116,9 @@ ruleTester.run(RULE_NAME, rule, {
     'React.createElement("App", {}, "Children")',
     "<App {...undefined}>Children</App>",
     'React.createElement("App", undefined, "Children")',
-    `const props = { ...props, scratch: {mode: 'edit'} }
-        const component = shallow(<TaskEditableTitle {...props} />)`,
+    /* tsx */ `
+      const props = { ...props, scratch: {mode: 'edit'} }
+      const component = shallow(<TaskEditableTitle {...props} />)
+    `,
   ],
 });
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.spec.ts
index ce9cdbd6a..3ce35406c 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-dangerously-set-innerhtml.spec.ts
@@ -1,20 +1,18 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-dangerously-set-innerhtml";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: '<div dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</div>',
+      code: /* tsx */ `<div dangerouslySetInnerHTML={{ __html: "HTML" }}>Children</div>`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML" }],
     },
     {
-      code: '<div dangerouslySetInnerHTML={{ __html: "HTML" }} children="Children" />',
+      code: /* tsx */ `<div dangerouslySetInnerHTML={{ __html: "HTML" }} children="Children" />`,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const props = {
             dangerouslySetInnerHTML: { __html: "HTML" }
         }
@@ -23,7 +21,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const props = {
             children: "Children",
             dangerouslySetInnerHTML: { __html: "HTML" }
@@ -61,17 +59,21 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML" }],
     },
     {
-      code: `const props = { dangerouslySetInnerHTML: { __html: "HTML" } }
-            React.createElement("div", props, "Children")`,
+      code: /* tsx */ `
+        const props = { dangerouslySetInnerHTML: { __html: "HTML" } }
+        React.createElement("div", props, "Children")
+      `,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML" }],
     },
     {
-      code: `const props = { children: "Children", dangerouslySetInnerHTML: { __html: "HTML" } }
-            React.createElement("div", props)`,
+      code: /* tsx */ `
+        const props = { children: "Children", dangerouslySetInnerHTML: { __html: "HTML" } }
+        React.createElement("div", props)
+      `,
       errors: [{ messageId: "NO_DANGEROUSLY_SET_INNERHTML" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const moreProps = { children: "Children" }
         const otherProps = { ...moreProps }
         const props = { ...otherProps, dangerouslySetInnerHTML: { __html: "HTML" } }
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.spec.ts
index 01815c63e..cfef7eb1e 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-find-dom-node.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-find-dom-node";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import ReactDOM from "react-dom";
 
         export const Component = () => {
@@ -18,7 +16,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { findDOMNode } from "react-dom";
 
         export const Component = () => {
@@ -31,7 +29,7 @@ ruleTester.run(RULE_NAME, rule, {
     },
 
     {
-      code: `
+      code: /* tsx */ `
         var Hello = createReactClass({
           componentDidMount: function() {
             React.findDOMNode(this).scrollIntoView();
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_FIND_DOM_NODE" }],
     },
     {
-      code: `
+      code: /* tsx */ `
         var Hello = createReactClass({
           componentDidMount: function() {
             ReactDOM.findDOMNode(this).scrollIntoView();
@@ -57,7 +55,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_FIND_DOM_NODE" }],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Hello extends Component {
           componentDidMount() {
             findDOMNode(this).scrollIntoView();
@@ -70,7 +68,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_FIND_DOM_NODE" }],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Hello extends Component {
           componentDidMount() {
             this.node = findDOMNode(this);
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts
index 06f45e0e0..67831abbe 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-button-type.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-missing-button-type";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<button>Click me</button>;",
+      code: /* tsx */ `<button>Click me</button>;`,
       errors: [
         {
           messageId: "NO_MISSING_BUTTON_TYPE",
@@ -14,7 +12,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         function App() {
@@ -28,7 +26,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { createElement } from "react";
 
         function App() {
@@ -48,38 +46,38 @@ ruleTester.run(RULE_NAME, rule, {
     "<span />;",
     '<button type="button">Click me</button>;',
     'const Button = () => <button type="button">Click me</button>;',
-    dedent`
+    /* tsx */ `
       function App() {
           return <button type="button">Click me</button>;
       }
     `,
-    dedent`
+    /* tsx */ `
       function App() {
           return <button type={ true ? "button" : "submit" }>Click me</button>;
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       function App() {
           return React.createElement("button", { type: "button" }, "Click me");
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createElement } from "react";
 
       function App() {
           return createElement("button", { type: "button" }, "Click me");
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createElement } from "react";
 
       function App() {
           return createElement("button", { type: true ? "button" : "submit" }, "Click me");
       }
     `,
-    dedent`
+    /* tsx */ `
       const props = {
         type: "button",
       };
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.spec.ts
index c5f5fc73f..051ffe850 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-missing-iframe-sandbox.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-missing-iframe-sandbox";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<iframe />;",
+      code: /* tsx */ `<iframe />;`,
       errors: [
         {
           messageId: "NO_MISSING_IFRAME_SANDBOX",
@@ -14,7 +12,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "<iframe sandbox />;",
+      code: /* tsx */ `<iframe sandbox />;`,
       errors: [
         {
           messageId: "NO_MISSING_IFRAME_SANDBOX",
@@ -22,7 +20,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: '<iframe sandbox="" />;',
+      code: /* tsx */ `<iframe sandbox="" />;`,
       errors: [
         {
           messageId: "NO_MISSING_IFRAME_SANDBOX",
@@ -31,7 +29,7 @@ ruleTester.run(RULE_NAME, rule, {
     },
     // has sandbox attribute but not explicitly set to iframe element
     {
-      code: dedent`
+      code: /* tsx */ `
         const props = {
           sandbox: "allow-downloads",
         };
@@ -47,7 +45,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         function App() {
@@ -61,7 +59,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { createElement } from "react";
 
         function App() {
@@ -84,19 +82,19 @@ ruleTester.run(RULE_NAME, rule, {
     '<iframe sandbox="allow-downloads allow-scripts" />;',
     '<iframe sandbox="allow-downloads allow-scripts allow-forms" />;',
     'const IFrame = () => <iframe sandbox="allow-downloads" />;',
-    dedent`
+    /* tsx */ `
       function App() {
           return <iframe sandbox="allow-downloads" />;
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       function App() {
           return React.createElement("iframe", { sandbox: "allow-downloads" });
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createElement } from "react";
 
       function App() {
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.spec.ts
index 35a0ecf3d..bfc97660d 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-namespace.spec.ts
@@ -4,7 +4,7 @@ import rule, { RULE_NAME } from "./no-namespace";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<ns:testcomponent />",
+      code: /* tsx */ `<ns:testcomponent />`,
       errors: [{
         data: {
           name: "ns:testcomponent",
@@ -22,7 +22,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "<ns:testComponent />",
+      code: /* tsx */ `<ns:testComponent />`,
       errors: [{
         data: {
           name: "ns:testComponent",
@@ -40,7 +40,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "<ns:test_component />",
+      code: /* tsx */ `<ns:test_component />`,
       errors: [{
         data: {
           name: "ns:test_component",
@@ -58,7 +58,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "<ns:TestComponent />",
+      code: /* tsx */ `<ns:TestComponent />`,
       errors: [{
         data: {
           name: "ns:TestComponent",
@@ -76,7 +76,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "<Ns:testcomponent />",
+      code: /* tsx */ `<Ns:testcomponent />`,
       errors: [{
         data: {
           name: "Ns:testcomponent",
@@ -94,7 +94,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "<Ns:testComponent />",
+      code: /* tsx */ `<Ns:testComponent />`,
       errors: [{
         data: {
           name: "Ns:testComponent",
@@ -112,7 +112,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "<Ns:test_component />",
+      code: /* tsx */ `<Ns:test_component />`,
       errors: [{
         data: {
           name: "Ns:test_component",
@@ -130,7 +130,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "<Ns:TestComponent />",
+      code: /* tsx */ `<Ns:TestComponent />`,
       errors: [{
         data: {
           name: "Ns:TestComponent",
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.spec.ts
index b4d70b8ef..54558494b 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-render-return-value.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-render-return-value";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "var Hello = ReactDOM.render(<div />, document.body);",
+      code: /* tsx */ `var Hello = ReactDOM.render(<div />, document.body);`,
       errors: [
         {
           messageId: "NO_RENDER_RETURN_VALUE",
@@ -14,7 +12,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         var o = {
           inst: ReactDOM.render(<div />, document.body)
         };
@@ -26,7 +24,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         function render () {
           return ReactDOM.render(<div />, document.body)
         }
@@ -38,7 +36,9 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "var render = (a, b) => ReactDOM.render(a, b)",
+      code: /* tsx */ `
+        var render = (a, b) => ReactDOM.render(a, b)
+      `,
       errors: [
         {
           messageId: "NO_RENDER_RETURN_VALUE",
@@ -46,7 +46,9 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "this.o = ReactDOM.render(<div />, document.body);",
+      code: /* tsx */ `
+        this.o = ReactDOM.render(<div />, document.body);
+      `,
       errors: [
         {
           messageId: "NO_RENDER_RETURN_VALUE",
@@ -54,7 +56,9 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "var v; v = ReactDOM.render(<div />, document.body);",
+      code: /* tsx */ `
+        var v; v = ReactDOM.render(<div />, document.body);
+      `,
       errors: [
         {
           messageId: "NO_RENDER_RETURN_VALUE",
@@ -65,7 +69,7 @@ ruleTester.run(RULE_NAME, rule, {
   valid: [
     ...allValid,
     "ReactDOM.render(<div />, document.body);",
-    dedent`
+    /* tsx */ `
       let node;
       ReactDOM.render(<div ref={ref => node = ref}/>, document.body);
     `,
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.spec.ts
index 6e7aec867..10305b65e 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-script-url.spec.ts
@@ -1,5 +1,3 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-script-url";
 
@@ -30,7 +28,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_SCRIPT_URL" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         <div>
           <Foo href="javascript:"></Foo>
           <Bar link="javascript:"></Bar>
diff --git a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.spec.ts b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.spec.ts
index 664a84746..3554bd273 100644
--- a/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.spec.ts
+++ b/packages/plugins/eslint-plugin-react-dom/src/rules/no-unsafe-iframe-sandbox.spec.ts
@@ -1,5 +1,3 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unsafe-iframe-sandbox";
 
@@ -14,7 +12,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         function App() {
@@ -28,7 +26,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { createElement } from "react";
 
         function App() {
@@ -51,19 +49,19 @@ ruleTester.run(RULE_NAME, rule, {
     '<iframe sandbox="allow-downloads allow-scripts" />;',
     '<iframe sandbox="allow-downloads allow-scripts allow-forms" />;',
     'const IFrame = () => <iframe sandbox="allow-downloads" />;',
-    dedent`
+    /* tsx */ `
       function App() {
           return <iframe sandbox="allow-downloads" />;
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       function App() {
           return React.createElement("iframe", { sandbox: "allow-downloads" });
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createElement } from "react";
 
       function App() {
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-custom-hooks-using-other-hooks.spec.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-custom-hooks-using-other-hooks.spec.ts
index 3acc91891..d9213ec5b 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-custom-hooks-using-other-hooks.spec.ts
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-custom-hooks-using-other-hooks.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./ensure-custom-hooks-using-other-hooks";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         const useClassnames = (obj) => {
             // Invalid, because useClassnames doesn't use any other React Hooks.
             var k, cls='';
@@ -29,7 +27,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function useClassnames(obj) {
             // Invalid, because useClassnames doesn't use any other React Hooks.
             var k, cls='';
@@ -52,7 +50,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export function useNestedHook() {
             const [state, setState] = useState("state");
             function useInnerHook () {
@@ -72,7 +70,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export function useNestedHook() {
             const useInnerHook = () => {
                 const [state, setState] = useState("state");
@@ -92,7 +90,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export function useNestedHook() {
             const useInnerHook = () => {
                 return "inner hook";
@@ -117,7 +115,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export function useNestedHook() {
             const fn = () => {
                 const [state, setState] = useState("state");
@@ -139,7 +137,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       import { useState } from "react";
 
       const Comp = () => {
@@ -148,23 +146,23 @@ ruleTester.run(RULE_NAME, rule, {
         return <Button />;
       };
     `,
-    dedent`
+    /* tsx */ `
       const useData = (key) => {
           return useSWR(key);
       }
     `,
-    dedent`
+    /* tsx */ `
       function useData(key) {
           return useSWR(key);
       }
     `,
-    dedent`
+    /* tsx */ `
       function useData(key) {
           const data = useSWR(key);
           return data;
       }
     `,
-    dedent`
+    /* tsx */ `
       const useData = (key) => useSWR(key);
     `,
   ],
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-callback-has-non-empty-deps.spec.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-callback-has-non-empty-deps.spec.ts
index 6d1026975..b8d501f61 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-callback-has-non-empty-deps.spec.ts
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-callback-has-non-empty-deps.spec.ts
@@ -1,5 +1,3 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./ensure-use-callback-has-non-empty-deps";
 
@@ -7,7 +5,7 @@ import rule, { RULE_NAME } from "./ensure-use-callback-has-non-empty-deps";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useCallback } from "react";
 
         const Comp = () => {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useCallback } from "react";
 
         const deps = [];
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useCallback } from "react";
 
         const Comp = () => {
@@ -63,7 +61,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useCallback } from "react";
 
         const Comp = () => {
@@ -82,7 +80,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useCallback } from "react";
 
         const Comp = () => {
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { useCallback } = require("react");
 
         const Comp = () => {
@@ -120,7 +118,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         const Comp = () => {
@@ -139,7 +137,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "roact";
 
         function App({ items }) {
@@ -160,7 +158,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import Roact from "roact";
 
         function App({ items }) {
@@ -181,7 +179,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useCallback } from "roact";
 
         function App({ items }) {
@@ -202,7 +200,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "@pika/react";
 
         function App({ items }) {
@@ -223,7 +221,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import Pika from "@pika/react";
 
         function App({ items }) {
@@ -244,7 +242,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useCallback } from "@pika/react";
 
         function App({ items }) {
@@ -265,7 +263,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("roact");
 
         function App({ items }) {
@@ -286,7 +284,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Roact = require("roact");
 
         function App({ items }) {
@@ -307,7 +305,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { useCallback } = require("roact");
 
         function App({ items }) {
@@ -328,7 +326,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("@pika/react");
 
         function App({ items }) {
@@ -349,7 +347,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Pika = require("@pika/react");
 
         function App({ items }) {
@@ -370,7 +368,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { useCallback } = require("@pika/react");
 
         function App({ items }) {
@@ -391,7 +389,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         const Comp = () => {
@@ -419,7 +417,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       import { useState } from "react";
 
       const Comp = () => {
@@ -428,26 +426,26 @@ ruleTester.run(RULE_NAME, rule, {
         return <Button />;
       };
     `,
-    dedent`
+    /* tsx */ `
       const useData = (key) => {
           return useSWR(key);
       }
     `,
-    dedent`
+    /* tsx */ `
       function useData(key) {
           return useSWR(key);
       }
     `,
-    dedent`
+    /* tsx */ `
       function useData(key) {
           const data = useSWR(key);
           return data;
       }
     `,
-    dedent`
+    /* tsx */ `
       const useData = (key) => useSWR(key);
     `,
-    dedent`
+    /* tsx */ `
       const onClick = () => {
         console.log("clicked");
       };
@@ -456,7 +454,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <Button onClick={onClick} />;
       };
     `,
-    dedent`
+    /* tsx */ `
       import { useCallback } from "react";
 
       const Comp = ({ theme }) => {
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-memo-has-non-empty-deps.spec.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-memo-has-non-empty-deps.spec.ts
index f5e693c37..209ea4b97 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-memo-has-non-empty-deps.spec.ts
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/ensure-use-memo-has-non-empty-deps.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./ensure-use-memo-has-non-empty-deps";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useMemo } from "react";
 
         const Comp = () => {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useMemo } from "react";
 
         const deps = [];
@@ -45,7 +43,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useMemo } from "react";
 
         const Comp = () => {
@@ -65,7 +63,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useMemo } from "react";
 
         function App({ items }) {
@@ -80,7 +78,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { useMemo } = require("react");
 
         function App({ items }) {
@@ -95,7 +93,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         function App({ items }) {
@@ -111,7 +109,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "roact";
 
         function App({ items }) {
@@ -132,7 +130,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import Roact from "roact";
 
         function App({ items }) {
@@ -153,7 +151,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useMemo } from "roact";
 
         function App({ items }) {
@@ -174,7 +172,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "@pika/react";
 
         function App({ items }) {
@@ -195,7 +193,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import Pika from "@pika/react";
 
         function App({ items }) {
@@ -216,7 +214,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useMemo } from "@pika/react";
 
         function App({ items }) {
@@ -237,7 +235,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("roact");
 
         function App({ items }) {
@@ -258,7 +256,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Roact = require("roact");
 
         function App({ items }) {
@@ -279,7 +277,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { useMemo } = require("roact");
 
         function App({ items }) {
@@ -300,7 +298,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("@pika/react");
 
         function App({ items }) {
@@ -321,7 +319,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Pika = require("@pika/react");
 
         function App({ items }) {
@@ -342,7 +340,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { useMemo } = require("@pika/react");
 
         function App({ items }) {
@@ -363,7 +361,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         function App({ items }) {
@@ -388,7 +386,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       import { useState } from "react";
 
       const Comp = () => {
@@ -397,26 +395,26 @@ ruleTester.run(RULE_NAME, rule, {
         return <Button />;
       };
     `,
-    dedent`
+    /* tsx */ `
       const useData = (key) => {
           return useSWR(key);
       }
     `,
-    dedent`
+    /* tsx */ `
       function useData(key) {
           return useSWR(key);
       }
     `,
-    dedent`
+    /* tsx */ `
       function useData(key) {
           const data = useSWR(key);
           return data;
       }
     `,
-    dedent`
+    /* tsx */ `
       const useData = (key) => useSWR(key);
     `,
-    dedent`
+    /* tsx */ `
       const onClick = () => {
         console.log("clicked");
       };
@@ -425,7 +423,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <Button onClick={onClick} />;
       };
     `,
-    dedent`
+    /* tsx */ `
       import { useMemo } from "react";
 
       function App({ items }) {
diff --git a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.spec.ts b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.spec.ts
index ca5fa726d..21c76a789 100644
--- a/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.spec.ts
+++ b/packages/plugins/eslint-plugin-react-hooks-extra/src/rules/prefer-use-state-lazy-initialization.spec.ts
@@ -168,7 +168,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "useLocalStorageState(1 || getValue())",
+      code: /* tsx */ `useLocalStorageState(1 || getValue())`,
       errors: [
         {
           type: NodeType.LogicalExpression,
diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.spec.ts b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.spec.ts
index 11264fef8..e0dfbd940 100644
--- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.spec.ts
+++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/component-name.spec.ts
@@ -1,26 +1,24 @@
-import dedent from "dedent";
-
 import { allFunctions, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./component-name";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<Test_component />",
+      code: /* tsx */ `<Test_component />`,
       errors: [{ messageId: "COMPONENT_NAME" }],
     },
     {
-      code: "<TestComponent />",
+      code: /* tsx */ `<TestComponent />`,
       errors: [{ messageId: "COMPONENT_NAME" }],
       options: [{ rule: "CONSTANT_CASE" }],
     },
     {
-      code: "<TestComponent />",
+      code: /* tsx */ `<TestComponent />`,
       errors: [{ messageId: "COMPONENT_NAME" }],
       options: ["CONSTANT_CASE"],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function APP_HOME() {
             return <div>foo</div>
         }
@@ -28,7 +26,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "COMPONENT_NAME" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function AppHome() {
             return <div>foo</div>
         }
@@ -61,41 +59,41 @@ ruleTester.run(RULE_NAME, rule, {
     "<motion.div />",
     "<FULLUPPERCASE />",
     {
-      code: "<_TestComponent />",
+      code: /* tsx */ `<_TestComponent />`,
       options: ["PascalCase"],
     },
     {
-      code: "<_TEST_COMPONENT />",
+      code: /* tsx */ `<_TEST_COMPONENT />`,
       options: ["CONSTANT_CASE"],
     },
     {
-      code: "<_TestComponent />",
+      code: /* tsx */ `<_TestComponent />`,
       options: [{ rule: "PascalCase" }],
     },
     {
-      code: "<_TEST_COMPONENT />",
+      code: /* tsx */ `<_TEST_COMPONENT />`,
       options: [{ rule: "CONSTANT_CASE" }],
     },
-    dedent`
+    /* tsx */ `
       function AppHome() {
           return <div>foo</div>
       }
     `,
     {
-      code: dedent`
+      code: /* tsx */ `
         function APP_HOME() {
             return <div>foo</div>
         }
       `,
       options: [{ rule: "CONSTANT_CASE" }],
     },
-    dedent`
+    /* tsx */ `
       const AppHome = () => {
           return <div>foo</div>
       }
     `,
     {
-      code: dedent`
+      code: /* tsx */ `
         const APP_HOME = () => {
             return <div>foo</div>
         }
@@ -103,7 +101,7 @@ ruleTester.run(RULE_NAME, rule, {
       options: [{ rule: "CONSTANT_CASE" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const AppHome = function () {
             return <div>foo</div>
         }
@@ -111,7 +109,7 @@ ruleTester.run(RULE_NAME, rule, {
       options: [{ rule: "PascalCase" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const AppHome = function () {
             return <div>foo</div>
         }
diff --git a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.spec.ts b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.spec.ts
index 14d143299..9666952d2 100644
--- a/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.spec.ts
+++ b/packages/plugins/eslint-plugin-react-naming-convention/src/rules/use-state.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allFunctions, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./use-state";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useState } from "react";
 
         function Component() {
@@ -24,7 +22,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useState } from "react";
 
         function Component() {
@@ -42,7 +40,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useState } from "react";
 
         function Component() {
@@ -60,7 +58,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { useState } from "react";
 
         function Component() {
@@ -87,7 +85,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allFunctions,
-    dedent`
+    /* tsx */ `
       import { useState } from "react";
 
       function Component() {
@@ -96,7 +94,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <div />;
       }
     `,
-    dedent`
+    /* tsx */ `
       import { useState } from "react";
 
       function Component() {
@@ -105,7 +103,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <div />;
       }
     `,
-    dedent`
+    /* tsx */ `
       import { useState } from "react";
 
       function Component() {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.spec.ts
index 8e9ab012c..5e1935975 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-boolean.spec.ts
@@ -4,14 +4,14 @@ import rule, { RULE_NAME } from "./avoid-shorthand-boolean";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<App foo />",
+      code: /* tsx */ `<App foo />`,
       errors: [{
         data: { propName: "foo" },
         messageId: "AVOID_SHORTHAND_BOOLEAN",
       }],
     },
     {
-      code: "<App foo bar />",
+      code: /* tsx */ `<App foo bar />`,
       errors: [
         {
           data: { propName: "foo" },
@@ -26,9 +26,9 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    "<App foo={true} />",
-    "<App foo={true} bar={true} />",
-    "<App foo={false} bar={false} />",
-    "<App foo={false} bar={false} baz={false} />",
+    /* tsx */ `<App foo={true} />`,
+    /* tsx */ `<App foo={true} bar={true} />`,
+    /* tsx */ `<App foo={false} bar={false} />`,
+    /* tsx */ `<App foo={false} bar={false} baz={false} />`,
   ],
 });
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.spec.ts
index 6a2aab603..ce5f7e757 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/avoid-shorthand-fragment.spec.ts
@@ -4,7 +4,7 @@ import rule, { RULE_NAME } from "./avoid-shorthand-fragment";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<><div /></>",
+      code: /* tsx */ `<><div /></>`,
       errors: [
         {
           messageId: "AVOID_SHORTHAND_FRAGMENT",
@@ -12,7 +12,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "<><div /><div /></>",
+      code: /* tsx */ `<><div /><div /></>`,
       errors: [
         {
           messageId: "AVOID_SHORTHAND_FRAGMENT",
@@ -20,7 +20,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "<>text</>",
+      code: /* tsx */ `<>text</>`,
       errors: [
         {
           messageId: "AVOID_SHORTHAND_FRAGMENT",
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/ensure-forward-ref-using-ref.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/ensure-forward-ref-using-ref.spec.ts
index 36fde0bbb..db808879c 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/ensure-forward-ref-using-ref.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/ensure-forward-ref-using-ref.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./ensure-forward-ref-using-ref";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { forwardRef } from 'react'
         forwardRef((props) => {
           return null;
@@ -15,14 +13,14 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "ENSURE_FORWARD_REF_USING_REF" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { forwardRef } from 'react'
         forwardRef((props) => null);
       `,
       errors: [{ messageId: "ENSURE_FORWARD_REF_USING_REF" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { forwardRef } from 'react'
         forwardRef(function (props) {
           return null;
@@ -31,7 +29,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "ENSURE_FORWARD_REF_USING_REF" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { forwardRef } from 'react'
         forwardRef(function Component(props) {
           return null;
@@ -40,7 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "ENSURE_FORWARD_REF_USING_REF" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react'
         React.forwardRef((props) => {
           return null;
@@ -49,14 +47,14 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "ENSURE_FORWARD_REF_USING_REF" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react'
         React.forwardRef((props) => null);
       `,
       errors: [{ messageId: "ENSURE_FORWARD_REF_USING_REF" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react'
         React.forwardRef(function (props) {
           return null;
@@ -65,7 +63,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "ENSURE_FORWARD_REF_USING_REF" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react'
         React.forwardRef(function Component(props) {
           return null;
@@ -76,51 +74,51 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       import { forwardRef } from 'react'
       forwardRef((props, ref) => {
         return null;
       });
     `,
-    dedent`
+    /* tsx */ `
       import { forwardRef } from 'react'
       forwardRef((props, ref) => null);
     `,
-    dedent`
+    /* tsx */ `
       import { forwardRef } from 'react'
       forwardRef(function (props, ref) {
         return null;
       });
     `,
-    dedent`
+    /* tsx */ `
       import { forwardRef } from 'react'
       forwardRef(function Component(props, ref) {
         return null;
       });
     `,
-    dedent`
+    /* tsx */ `
       import * as React from 'react'
       React.forwardRef((props, ref) => {
         return null;
       });
     `,
-    dedent`
+    /* tsx */ `
       import * as React from 'react'
       React.forwardRef((props, ref) => null);
     `,
-    dedent`
+    /* tsx */ `
       import * as React from 'react'
       React.forwardRef(function (props, ref) {
         return null;
       });
     `,
-    dedent`
+    /* tsx */ `
       import * as React from 'react'
       React.forwardRef(function Component(props, ref) {
         return null;
       });
     `,
-    dedent`
+    /* tsx */ `
       import * as React from 'react'
       function Component(props) {
         return null;
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.spec.ts
index 7c5665a6a..69e10497d 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-access-state-in-setstate.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-access-state-in-setstate";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         class Component extends React.Component {
           state = {
             foo: 1,
@@ -23,7 +21,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Component extends React.Component {
           state = {
             foo: 1,
@@ -40,7 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Component extends React.Component {
           state = {
             foo: 1,
@@ -57,7 +55,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Component extends React.Component {
           state = {
             foo: 1,
@@ -74,7 +72,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Component extends React.Component {
           state = {
             foo: 1,
@@ -93,7 +91,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Component extends React.Component {
         state = {
           foo: 1,
@@ -103,7 +101,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Component extends React.Component {
         state = {
           foo: 1,
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.spec.ts
index dd276b1c5..92eb51aaf 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-array-index-key.spec.ts
@@ -1,40 +1,38 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-array-index-key";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "foo.map((bar, i) => <Foo key={i} />)",
+      code: /* tsx */ `foo.map((bar, i) => <Foo key={i} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "[{}, {}].map((bar, i) => <Foo key={i} />)",
+      code: /* tsx */ `[{}, {}].map((bar, i) => <Foo key={i} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, anything) => <Foo key={anything} />)",
+      code: /* tsx */ `foo.map((bar, anything) => <Foo key={anything} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, i) => <Foo key={`foo-${i}`} />)",
+      code: /* tsx */ `foo.map((bar, i) => <Foo key={\`foo-\${i}\`} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, i) => <Foo key={'foo-' + i} />)",
+      code: /* tsx */ `foo.map((bar, i) => <Foo key={'foo-' + i} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, i) => <Foo key={'foo-' + i + '-bar'} />)",
+      code: /* tsx */ `foo.map((bar, i) => <Foo key={'foo-' + i + '-bar'} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((baz, i) => React.cloneElement(someChild, { ...someChild.props, key: i }))",
+      code: /* tsx */ `foo.map((baz, i) => React.cloneElement(someChild, { ...someChild.props, key: i }))`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from 'react';
 
         foo.map((baz, i) => cloneElement(someChild, { ...someChild.props, key: i }))
@@ -42,7 +40,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         foo.map((item, i) => {
           return React.cloneElement(someChild, {
             key: i
@@ -52,7 +50,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from 'react';
 
         foo.map((item, i) => {
@@ -64,83 +62,83 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.forEach((bar, i) => { baz.push(<Foo key={i} />); })",
+      code: /* tsx */ `foo.forEach((bar, i) => { baz.push(<Foo key={i} />); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.filter((bar, i) => { baz.push(<Foo key={i} />); })",
+      code: /* tsx */ `foo.filter((bar, i) => { baz.push(<Foo key={i} />); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.some((bar, i) => { baz.push(<Foo key={i} />); })",
+      code: /* tsx */ `foo.some((bar, i) => { baz.push(<Foo key={i} />); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.every((bar, i) => { baz.push(<Foo key={i} />); })",
+      code: /* tsx */ `foo.every((bar, i) => { baz.push(<Foo key={i} />); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.find((bar, i) => { baz.push(<Foo key={i} />); })",
+      code: /* tsx */ `foo.find((bar, i) => { baz.push(<Foo key={i} />); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.findIndex((bar, i) => { baz.push(<Foo key={i} />); })",
+      code: /* tsx */ `foo.findIndex((bar, i) => { baz.push(<Foo key={i} />); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.reduce((a, b, i) => a.concat(<Foo key={i} />), [])",
+      code: /* tsx */ `foo.reduce((a, b, i) => a.concat(<Foo key={i} />), [])`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.flatMap((a, i) => <Foo key={i} />)",
+      code: /* tsx */ `foo.flatMap((a, i) => <Foo key={i} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.reduceRight((a, b, i) => a.concat(<Foo key={i} />), [])",
+      code: /* tsx */ `foo.reduceRight((a, b, i) => a.concat(<Foo key={i} />), [])`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, i) => React.createElement('Foo', { key: i }))",
+      code: /* tsx */ `foo.map((bar, i) => React.createElement('Foo', { key: i }))`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, i) => React.createElement('Foo', { key: `foo-${i}` }))",
+      code: /* tsx */ `foo.map((bar, i) => React.createElement('Foo', { key: \`foo-\${i}\` }))`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, i) => React.createElement('Foo', { key: 'foo-' + i }))",
+      code: /* tsx */ `foo.map((bar, i) => React.createElement('Foo', { key: 'foo-' + i }))`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.map((bar, i) => React.createElement('Foo', { key: 'foo-' + i + '-bar' }))",
+      code: /* tsx */ `foo.map((bar, i) => React.createElement('Foo', { key: 'foo-' + i + '-bar' }))`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.forEach((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })",
+      code: /* tsx */ `foo.forEach((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.filter((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })",
+      code: /* tsx */ `foo.filter((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.some((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })",
+      code: /* tsx */ `foo.some((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.every((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })",
+      code: /* tsx */ `foo.every((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.find((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })",
+      code: /* tsx */ `foo.find((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo.findIndex((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })",
+      code: /* tsx */ `foo.findIndex((bar, i) => { baz.push(React.createElement('Foo', { key: i })); })`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         Children.map(this.props.children, (child, index) => {
           return React.cloneElement(child, { key: index });
         })
@@ -148,7 +146,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from 'react';
 
         Children.map(this.props.children, (child, index) => {
@@ -158,7 +156,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         React.Children.map(this.props.children, (child, index) => {
           return React.cloneElement(child, { key: index });
         })
@@ -166,7 +164,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from 'react';
 
         React.Children.map(this.props.children, (child, index) => {
@@ -176,7 +174,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         Children.forEach(this.props.children, (child, index) => {
           return React.cloneElement(child, { key: index });
         })
@@ -184,7 +182,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from 'react';
 
         Children.forEach(this.props.children, (child, index) => {
@@ -194,7 +192,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         React.Children.forEach(this.props.children, (child, index) => {
           return React.cloneElement(child, { key: index });
         })
@@ -202,7 +200,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from 'react';
 
         React.Children.forEach(this.props.children, (child, index) => {
@@ -212,11 +210,11 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: "foo?.map((child, i) => <Foo key={i} />)",
+      code: /* tsx */ `foo?.map((child, i) => <Foo key={i} />)`,
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         foo.map((bar, index) => (
           <Element key={index.toString()} bar={bar} />
         ))
@@ -224,7 +222,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         foo.map((bar, index) => (
           <Element key={String(index)} bar={bar} />
         ))
@@ -232,7 +230,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_ARRAY_INDEX_KEY" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         foo.map((bar, index) => (
           <Element key={index} bar={bar} />
         ))
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.spec.ts
index 982eb83e5..9c01ea9a2 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-count.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-children-count";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Children } from 'react';
 
         function RowList({ children }) {
@@ -23,7 +21,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { Children } = require('react');
 
         function RowList({ children }) {
@@ -40,7 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import Roact from 'roact';
 
         function RowList({ children }) {
@@ -62,7 +60,7 @@ ruleTester.run(RULE_NAME, rule, {
       },
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react';
 
         function RowList({ children }) {
@@ -81,7 +79,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       // import { Children } from 'react';
 
       const Children = {
@@ -97,7 +95,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function SeparatorList({ children }) {
@@ -109,7 +107,7 @@ ruleTester.run(RULE_NAME, rule, {
         // ...
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function RowList({ children }) {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.spec.ts
index d7af6f864..f7c56d7b6 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-for-each.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-children-for-each";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Children } from 'react';
 
         function SeparatorList({ children }) {
@@ -23,7 +21,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { Children } = require('react');
 
         function SeparatorList({ children }) {
@@ -40,7 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from 'react';
 
         function SeparatorList({ children }) {
@@ -57,7 +55,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react';
 
         function SeparatorList({ children }) {
@@ -76,7 +74,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       // import { Children } from 'react';
 
       const Children = {
@@ -92,7 +90,7 @@ ruleTester.run(RULE_NAME, rule, {
         // ...
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function RowList({ children }) {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.spec.ts
index 8dcee3c8c..600cfbc0b 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-map.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-children-map";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Children } from 'react';
 
         function RowList({ children }) {
@@ -26,7 +24,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { Children } = require('react');
 
         function RowList({ children }) {
@@ -46,7 +44,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from 'react';
 
         function RowList({ children }) {
@@ -66,7 +64,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react';
 
         function RowList({ children }) {
@@ -88,7 +86,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       // import { Children } from 'react';
 
       const Children = {
@@ -107,7 +105,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function SeparatorList({ children }) {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.spec.ts
index 93edea361..c1bff7ebd 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-only.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-children-only";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Children } from 'react';
 
         function Box({ children }) {
@@ -19,7 +17,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { Children } = require('react');
 
         function Box({ children }) {
@@ -32,7 +30,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from 'react';
 
         function Box({ children }) {
@@ -45,7 +43,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react';
 
         function Box({ children }) {
@@ -60,7 +58,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       // import { Children } from 'react';
 
       const Children = {
@@ -72,7 +70,7 @@ ruleTester.run(RULE_NAME, rule, {
         // ...
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function SeparatorList({ children }) {
@@ -84,7 +82,7 @@ ruleTester.run(RULE_NAME, rule, {
         // ...
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function RowList({ children }) {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.spec.ts
index 4674c6e10..48bb28b54 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-prop.spec.ts
@@ -4,7 +4,7 @@ import rule, { RULE_NAME } from "./no-children-prop";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<div children />;", // not a valid use case but make sure we don't crash
+      code: /* tsx */ `<div children />;`, // not a valid use case but make sure we don't crash
       errors: [{ messageId: "NO_CHILDREN_PROP" }],
     },
     {
@@ -12,11 +12,11 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_CHILDREN_PROP" }],
     },
     {
-      code: "<div children={<div />} />;",
+      code: /* tsx */ `<div children={<div />} />;`,
       errors: [{ messageId: "NO_CHILDREN_PROP" }],
     },
     {
-      code: "<div children={[<div />, <div />]} />;",
+      code: /* tsx */ `<div children={[<div />, <div />]} />;`,
       errors: [{ messageId: "NO_CHILDREN_PROP" }],
     },
     {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.spec.ts
index 17d218f4f..eb5b67f61 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-children-to-array.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-children-to-array";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Children } from 'react';
 
         export default function ReversedList({ children }) {
@@ -20,7 +18,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { Children } = require('react');
 
         export default function ReversedList({ children }) {
@@ -34,7 +32,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from 'react';
 
         export default function ReversedList({ children }) {
@@ -48,7 +46,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import * as React from 'react';
 
         export default function ReversedList({ children }) {
@@ -64,7 +62,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       // import { Children } from 'react';
 
       const Children = {
@@ -77,7 +75,7 @@ ruleTester.run(RULE_NAME, rule, {
         // ...
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function SeparatorList({ children }) {
@@ -89,7 +87,7 @@ ruleTester.run(RULE_NAME, rule, {
         // ...
       }
     `,
-    dedent`
+    /* tsx */ `
       import { Children } from 'react';
 
       function RowList({ children }) {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.spec.ts
index 9fb360dd0..cdf6948d5 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-class-component.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-class-component";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           class UnstableNestedClassComponent extends React.Component {
             render() {
@@ -31,7 +29,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           class UnstableNestedClassComponent extends React.Component {
             render() {
@@ -54,7 +52,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             class UnstableNestedClassComponent extends React.Component {
@@ -87,7 +85,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             class UnstableNestedClassComponent extends React.Component {
@@ -120,7 +118,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedFunctionComponent() {
@@ -145,7 +143,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedClassComponent() {
@@ -170,7 +168,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const UnstableNestedVariableComponent = () => {
@@ -220,7 +218,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = () => {
@@ -241,7 +239,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = (props) => {
@@ -269,7 +267,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ErrorBoundary extends React.Component {
           static componentDidCatch(error, info) {}
         }
@@ -284,7 +282,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ErrorBoundary extends React.Component {
           getDerivedStateFromError(error) {}
         }
@@ -301,7 +299,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <div>
@@ -310,7 +308,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(
           "div",
@@ -319,7 +317,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent
@@ -329,7 +327,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(SomeComponent, {
           footer: React.createElement(OutsideDefinedComponent, null),
@@ -337,7 +335,7 @@ ruleTester.run(RULE_NAME, rule, {
         });
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const MemoizedNestedComponent = React.useCallback(() => <div />, []);
 
@@ -348,7 +346,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const MemoizedNestedComponent = React.useCallback(
           () => React.createElement("div", null),
@@ -362,7 +360,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const MemoizedNestedFunctionComponent = React.useCallback(
           function () {
@@ -378,7 +376,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const MemoizedNestedFunctionComponent = React.useCallback(
           function () {
@@ -394,7 +392,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         // Should not interfere handler declarations
         function onClick(event) {
@@ -428,7 +426,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function getComponent() {
           return <div />;
@@ -441,7 +439,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function getComponent() {
           return React.createElement("div", null);
@@ -450,7 +448,7 @@ ruleTester.run(RULE_NAME, rule, {
         return React.createElement("div", null, getComponent());
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <ComplexRenderPropComponent
@@ -468,7 +466,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(
             RenderPropComponent,
@@ -477,7 +475,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return (
           <ul>
@@ -490,7 +488,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return (
           <List items={props.items.map(item => {
@@ -504,7 +502,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return React.createElement(
           "ul",
@@ -519,7 +517,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return (
           <ul>
@@ -534,7 +532,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return React.createElement(
           "ul",
@@ -549,19 +547,19 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function createTestComponent(props) {
         return (
           <div />
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function createTestComponent(props) {
         return React.createElement("div", null);
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent>
@@ -576,7 +574,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const thingElement = thing.match({
           renderLoading: () => <div />,
@@ -590,21 +588,21 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <ComponentForProps renderFooter={() => <div />} />
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(ComponentForProps, {
           renderFooter: () => React.createElement("div", null)
         });
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         useEffect(() => {
           return () => null;
@@ -613,14 +611,14 @@ ruleTester.run(RULE_NAME, rule, {
         return <div />;
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent renderers={{ Header: () => <div /> }} />
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent renderMenu={() => (
@@ -633,7 +631,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = () => (
         <SomeComponent
           components={[
@@ -646,7 +644,7 @@ ruleTester.run(RULE_NAME, rule, {
         />
       );
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const rows = [
           {
@@ -658,12 +656,12 @@ ruleTester.run(RULE_NAME, rule, {
         return <Table rows={rows} />;
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return <SomeComponent renderers={{ notComponent: () => null }} />;
       }
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = createReactClass({
         displayName: "ParentComponent",
         statics: {
@@ -676,13 +674,13 @@ ruleTester.run(RULE_NAME, rule, {
         },
       });
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const _renderHeader = () => <div />;
         return <div>{_renderHeader()}</div>;
       }
     `,
-    dedent`
+    /* tsx */ `
       const testCases = {
         basic: {
           render() {
@@ -692,7 +690,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       function App({ locale }: AppProps) {
           const route = Router.useRoute(["Home", "BotArea", "NotFound"]);
 
@@ -715,7 +713,7 @@ ruleTester.run(RULE_NAME, rule, {
           );
       }
     `,
-    dedent`
+    /* tsx */ `
       function BotArea({ botName }: BotAreaProps) {
           const bot = useAtomValue(botsDb.item(botName));
           const route = Router.useRoute(["BotRoot", "BotChat", "BotNewChat", "BotSettings"]);
@@ -755,7 +753,7 @@ ruleTester.run(RULE_NAME, rule, {
           );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function UnstableNestedFunctionComponent() {
           return <div />;
@@ -768,7 +766,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function UnstableNestedFunctionComponent() {
           return React.createElement("div", null);
@@ -781,7 +779,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const UnstableNestedVariableComponent = () => {
           return <div />;
@@ -794,7 +792,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const UnstableNestedVariableComponent = () => {
           return React.createElement("div", null);
@@ -807,7 +805,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = () => {
         function UnstableNestedFunctionComponent() {
           return <div />;
@@ -820,7 +818,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = () => {
         function UnstableNestedFunctionComponent() {
           return React.createElement("div", null);
@@ -833,7 +831,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       export default () => {
         function UnstableNestedFunctionComponent() {
           return <div />;
@@ -846,7 +844,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       export default () => {
         function UnstableNestedFunctionComponent() {
           return React.createElement("div", null);
@@ -859,7 +857,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       };
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = () => {
         const UnstableNestedVariableComponent = () => {
           return <div />;
@@ -872,7 +870,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = () => {
         const UnstableNestedVariableComponent = () => {
           return React.createElement("div", null);
@@ -885,7 +883,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function getComponent() {
           function NestedUnstableFunctionComponent() {
@@ -902,7 +900,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function getComponent() {
           function NestedUnstableFunctionComponent() {
@@ -915,7 +913,7 @@ ruleTester.run(RULE_NAME, rule, {
         return React.createElement("div", null, getComponent());
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentWithProps(props) {
         return <div />;
       }
@@ -931,7 +929,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentWithProps(props) {
         return React.createElement("div", null);
       }
@@ -944,7 +942,7 @@ ruleTester.run(RULE_NAME, rule, {
         });
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentWithProps(props) {
         return React.createElement("div", null);
       }
@@ -955,7 +953,7 @@ ruleTester.run(RULE_NAME, rule, {
         });
       }
     `,
-    dedent`
+    /* tsx */ `
       function RenderPropComponent(props) {
         return props.render({});
       }
@@ -978,7 +976,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentForProps(props) {
         return <div />;
       }
@@ -989,7 +987,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentForProps(props) {
         return React.createElement("div", null);
       }
@@ -1000,14 +998,14 @@ ruleTester.run(RULE_NAME, rule, {
         });
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <ComponentForProps someMap={{ Header: () => <div /> }} />
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent>
@@ -1022,7 +1020,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const thingElement = thing.match({
           loading: () => <div />,
@@ -1036,7 +1034,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const rows = [
           {
@@ -1048,7 +1046,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <Table rows={rows} />;
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const UnstableNestedComponent = React.memo(() => {
           return <div />;
@@ -1061,7 +1059,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const UnstableNestedComponent = React.memo(
           () => React.createElement("div", null),
@@ -1074,7 +1072,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const UnstableNestedComponent = React.memo(
           function () {
@@ -1089,7 +1087,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const UnstableNestedComponent = React.memo(
           function () {
@@ -1104,7 +1102,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       class ErrorBoundary extends React.Component {
         componentDidCatch(error, info) {}
         render() {
@@ -1112,7 +1110,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ErrorBoundary extends React.Component {
         static getDerivedStateFromError(error) {}
         render() {
@@ -1120,7 +1118,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ErrorBoundary extends React.Component {
         static getDerivedStateFromError = () => {};
         render() {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.spec.ts
index 3185c4c14..013d00b50 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-clone-element.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-clone-element";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from "react";
 
         // ...
@@ -24,7 +22,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { cloneElement } from "react";
 
         function Component() {
@@ -40,7 +38,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React, { cloneElement } from 'react';
 
         const element = <div />;
@@ -51,7 +49,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { cloneElement } = require("react");
 
         const element = <div />;
@@ -62,7 +60,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const cloneElement = require("react").cloneElement;
 
         const element = <div />;
@@ -73,7 +71,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("react");
         const { cloneElement } = React;
 
@@ -85,7 +83,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("react");
         const cloneElement = React.cloneElement
 
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.spec.ts
index b632ec3ce..febf31de6 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-comment-textnodes.spec.ts
@@ -1,24 +1,22 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-comment-textnodes";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<div>// invalid</div>",
+      code: /* tsx */ `<div>// invalid</div>`,
       errors: [{ messageId: "NO_COMMENT_TEXTNODES" }],
     },
     {
-      code: "<>// invalid</>",
+      code: /* tsx */ `<>// invalid</>`,
       errors: [{ messageId: "NO_COMMENT_TEXTNODES" }],
     },
     {
-      code: "<div>/* invalid */</div>",
+      code: /* tsx */ `<div>/* invalid */</div>`,
       errors: [{ messageId: "NO_COMMENT_TEXTNODES" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         <div>
         // invalid
         </div>
@@ -26,7 +24,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_COMMENT_TEXTNODES" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         <div>
         abcdef
         /* invalid */
@@ -36,7 +34,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_COMMENT_TEXTNODES" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         <div>
         {'abcdef'}
         // invalid
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-complicated-conditional-rendering.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-complicated-conditional-rendering.spec.ts
index 5ba8bc632..8eb4e736b 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-complicated-conditional-rendering.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-complicated-conditional-rendering.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-complicated-conditional-rendering";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         function Component({ hideShapes, debugSvg }) {
           return <div>{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}</div>;
         }
@@ -18,7 +16,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         type AppProps = {
           items: string[];
           count: number;
@@ -35,7 +33,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = 0;
         const SomeComponent = () => <div />;
 
@@ -61,7 +59,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = 0;
         const SomeComponent = () => <div />;
 
@@ -87,7 +85,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = 0;
         const SomeComponent = () => <div />;
 
@@ -113,7 +111,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = 0;
         const SomeComponent = () => <div />;
 
@@ -142,7 +140,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
           return (
               <>
@@ -162,7 +160,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
           return (
               <>
@@ -184,7 +182,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       function Component({ hideShapes, debugSvg }) {
         // Early return if nothing to render
         if (hideShapes) {
@@ -194,7 +192,7 @@ ruleTester.run(RULE_NAME, rule, {
         return debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />;
       }
     `,
-    dedent`
+    /* tsx */ `
         const foo = Math.random() > 0.5;
         const bar = "bar";
 
@@ -202,7 +200,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{foo || bar}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type AppProps = {
           foo: string;
         }
@@ -211,7 +209,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{foo}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type AppProps = {
           items: string[];
         }
@@ -220,7 +218,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>There are {items.length} elements</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type AppProps = {
           items: string[];
           count: number;
@@ -230,7 +228,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{!count && 'No results found'}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -247,7 +245,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{!!items.length && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -264,7 +262,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{Boolean(items.length) && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -281,7 +279,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{items.length > 0 && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -298,7 +296,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{items.length ? <List items={items}/> : null}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -316,7 +314,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{count ? <List items={items}/> : null}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -334,7 +332,7 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{!!count && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
         return (
             <>
@@ -345,7 +343,7 @@ ruleTester.run(RULE_NAME, rule, {
             )
         }
     `,
-    dedent`
+    /* tsx */ `
       const foo = Math.random() > 0.5;
       const bar = 0;
       function App() {
@@ -375,7 +373,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
       `,
-    dedent`
+    /* tsx */ `
       const someCondition = JSON.parse("") as any;
       const SomeComponent = () => <div />;
 
@@ -392,7 +390,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = JSON.parse("") as unknown;
       const SomeComponent = () => <div />;
 
@@ -409,7 +407,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = 0
       const SomeComponent = () => <div />;
 
@@ -426,7 +424,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = 1
       const SomeComponent = () => <div />;
 
@@ -443,7 +441,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const SomeComponent = () => <div />;
       const App = ({
         someCondition,
@@ -460,7 +458,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = true
       const SomeComponent = () => <div />;
 
@@ -479,7 +477,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const SomeComponent = () => <div />;
       const someFunction = (input: unknown): 10 => 10
 
@@ -487,7 +485,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <>{someCondition ? someFunction(someCondition) : <SomeComponent />}</>;
       };
     `,
-    dedent`
+    /* tsx */ `
       const SomeComponent = () => <div />;
 
       const App = ({
@@ -502,7 +500,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       type AppProps<T> = {
         someFunction: (data: T) => React.ReactNode;
       };
@@ -511,7 +509,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <>{!!someFunction && someFunction<number>(1)}</>;
       }
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
         return (
             <>
@@ -521,7 +519,7 @@ ruleTester.run(RULE_NAME, rule, {
             )
         }
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
         return (
             <>
@@ -531,7 +529,7 @@ ruleTester.run(RULE_NAME, rule, {
             )
         }
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
         return <div title={0 && 1 && 2 || 3 && 4 && 5}>Hello</div>
         }
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.spec.ts
index 8016de20f..d730135c3 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-mount.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-component-will-mount";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.Component {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.PureComponent {
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Component } from "react";
 
         class Foo extends Component {
@@ -63,7 +61,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { PureComponent } from "react";
 
         class Foo extends PureComponent {
@@ -84,12 +82,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends Bar {
         componentWillMount() {}
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.Component {
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.PureComponent {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.spec.ts
index 199dedfbf..450739dfd 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-receive-props.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-component-will-receive-props";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.Component {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.PureComponent {
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Component } from "react";
 
         class Foo extends Component {
@@ -63,7 +61,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { PureComponent } from "react";
 
         class Foo extends PureComponent {
@@ -84,12 +82,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends Bar {
         componentWillReceiveProps() {}
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.Component {
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.PureComponent {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.spec.ts
index a5027ec39..0af115cfc 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-component-will-update.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-component-will-update";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.Component {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.PureComponent {
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Component } from "react";
 
         class Foo extends Component {
@@ -63,7 +61,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { PureComponent } from "react";
 
         class Foo extends PureComponent {
@@ -84,12 +82,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends Bar {
         componentWillUpdate() {}
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.Component {
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.PureComponent {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.spec.ts
index 21d68c903..f6a664463 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-create-ref.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-create-ref";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import { createRef } from 'react';
 
         function Component() {
@@ -20,7 +18,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { createRef } from 'react';
 
         const Component = () => {
@@ -34,7 +32,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { createRef } from 'react';
 
         function Component() {
@@ -48,7 +46,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React, { createRef } from 'react';
 
         function Component() {
@@ -62,7 +60,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const { createRef } = require("react");
 
         function Component() {
@@ -76,7 +74,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const createRef = require("react").createRef;
 
         function Component() {
@@ -90,7 +88,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("react");
         const { createRef } = React;
 
@@ -105,7 +103,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const React = require("react");
         const createRef = React.createRef;
 
@@ -122,33 +120,33 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       import { createRef } from 'react';
 
       const ref = createRef();
     `,
-    dedent`
+    /* tsx */ `
       import { createRef } from 'react';
 
       function notComponent() {
         const ref = createRef();
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createRef } from 'react';
 
       function NotComponent() {
         const ref = createRef();
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createRef } from 'react';
 
       function NotComponent() {
         return () => createRef();
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createRef } from 'react';
 
       function Component() {
@@ -157,7 +155,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <div ref={ref} />;
       }
     `,
-    dedent`
+    /* tsx */ `
       import { createRef, Component } from 'react';
 
       class Input extends Component {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.spec.ts
index fcf4bd30b..2b940ea38 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-direct-mutation-state.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-direct-mutation-state";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         class Hello extends React.Component {
           constructor(props) {
             super(props)
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         componentDidMount() {
           class Bar extends Baz {
@@ -36,7 +34,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Hello extends React.Component {
         constructor(props) {
           super(props)
@@ -47,7 +45,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class MyComponent extends React.Component {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.spec.ts
index 7f99a6ab6..bed8d38f4 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-duplicate-key.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-duplicate-key";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
             return [
                     <div key="1">1</div>,
@@ -37,7 +35,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
             return  (<div>
                         <div key="1">1</div>
@@ -68,7 +66,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
             return [1, 2, 3].map((item) => <div key="1">{item}</div>)
         };
@@ -85,12 +83,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       const App = () => {
           return [<div key="1">1</div>]
       };
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
           return [
                   <div key="1">1</div>,
@@ -99,7 +97,7 @@ ruleTester.run(RULE_NAME, rule, {
                ]
       };
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
           return [1, 2, 3].map((item) => <div key={Math.random()}>{item}</div>)
       };
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.spec.ts
index 42570766a..a780f6b8c 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-implicit-key.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-implicit-key";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         const props = { key: "1" };
 
         const App = () => {
@@ -24,7 +22,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
 
         const App = () => {
         const props = { key: "1" };
@@ -43,7 +41,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
             return [
                     <div {...{ key: "1" }}>1</div>,
@@ -59,7 +57,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
             return [
                     <div {...{...{ key: "1" }}}>1</div>,
@@ -75,7 +73,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const props1 = { key: "1" };
         const App = () => {
             const props2 = { key: "1" };
@@ -95,7 +93,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const props1 = { key: "1" };
         const props4 = { key: "4" };
         const App = () => {
@@ -120,12 +118,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       const App = () => {
           return [<div key="1">1</div>]
       };
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
           return [
                   <div key="1">1</div>,
@@ -134,7 +132,7 @@ ruleTester.run(RULE_NAME, rule, {
                ]
       };
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
           return [1, 2, 3].map((item) => <div key={Math.random()}>{item}</div>)
       };
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.spec.ts
index 08c13d8dc..f8a668975 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-leaked-conditional-rendering.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTesterWithTypes } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-leaked-conditional-rendering";
 
 ruleTesterWithTypes.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
           return (
               <>
@@ -26,7 +24,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = () => {
           return (
               <>
@@ -46,7 +44,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = JSON.parse("") as unknown;
         const SomeComponent = () => <div />;
 
@@ -70,7 +68,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = 0
         const SomeComponent = () => <div />;
 
@@ -94,7 +92,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = 1
         const SomeComponent = () => <div />;
 
@@ -118,7 +116,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const someCondition = 0;
         const SomeComponent = () => <div />;
 
@@ -144,7 +142,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = ({
           someCondition,
         }: {
@@ -164,7 +162,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const SomeComponent = () => <div />;
 
         const App = ({
@@ -188,7 +186,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
         const foo = Math.random() > 0.5;
         const bar = "bar";
 
@@ -196,7 +194,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{foo || bar}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type AppProps = {
           foo: string;
         }
@@ -205,7 +203,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{foo}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type AppProps = {
           items: string[];
         }
@@ -214,7 +212,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>There are {items.length} elements</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type AppProps = {
           items: string[];
           count: number;
@@ -224,7 +222,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{!count && 'No results found'}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -241,7 +239,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{!!items.length && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -258,7 +256,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{Boolean(items.length) && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -275,7 +273,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{items.length > 0 && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -292,7 +290,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{items.length ? <List items={items}/> : null}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -310,7 +308,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{count ? <List items={items}/> : null}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
         type ListProps = {
           items: string[];
         }
@@ -328,7 +326,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{!!count && <List items={items}/>}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       type AppProps = {
         items: string[];
         count: number;
@@ -338,7 +336,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div>{direction ? (direction === "down" ? "▼" : "▲") : ""}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       const App = () => {
         return (
             <>
@@ -349,7 +347,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
             )
         }
     `,
-    dedent`
+    /* tsx */ `
       const foo = Math.random() > 0.5;
       const bar = 0;
       function App() {
@@ -379,7 +377,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
       `,
-    dedent`
+    /* tsx */ `
       const someCondition = JSON.parse("") as any;
       const SomeComponent = () => <div />;
 
@@ -396,7 +394,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = JSON.parse("") as unknown;
       const SomeComponent = () => <div />;
 
@@ -413,7 +411,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = 0
       const SomeComponent = () => <div />;
 
@@ -430,7 +428,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = 1
       const SomeComponent = () => <div />;
 
@@ -447,7 +445,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = 0;
       const SomeComponent = () => <div />;
 
@@ -466,7 +464,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const SomeComponent = () => <div />;
       const App = ({
         someCondition,
@@ -483,7 +481,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = 0;
       const SomeComponent = () => <div />;
 
@@ -505,7 +503,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = true
       const SomeComponent = () => <div />;
 
@@ -524,7 +522,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = 0;
       const SomeComponent = () => <div />;
 
@@ -543,7 +541,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const SomeComponent = () => <div />;
       const someFunction = (input: unknown): 10 => 10
 
@@ -551,7 +549,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         return <>{someCondition ? someFunction(someCondition) : <SomeComponent />}</>;
       };
     `,
-    dedent`
+    /* tsx */ `
       const SomeComponent = () => <div />;
 
       const App = ({
@@ -566,7 +564,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       type AppProps<T> = {
         someFunction: (data: T) => React.ReactNode;
       };
@@ -575,7 +573,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         return <>{!!someFunction && someFunction<number>(1)}</>;
       }
     `,
-    dedent`
+    /* tsx */ `
       const someCondition = JSON.parse("") as any;
       const SomeComponent = () => <div />;
 
@@ -592,7 +590,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function App() {
         const a = {} as {};
         const b = {} as {} | null;
@@ -607,7 +605,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       declare function getData(): { id: number; name: string }[] | undefined;
       function List({ items }: { items: string[] }) {
         return <div>{items.map(item => <div key={item}>{item}</div>)}</div>;
@@ -623,7 +621,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       export const MyComponent = ({ isVisible1 }: { isVisible1: boolean }) => {
         const isVisible2 = true;
         const isVisible3 = 1 > 2;
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.spec.ts
index 39abfca77..e78973fa3 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-component-display-name.spec.ts
@@ -1,18 +1,16 @@
-import dedent from "dedent";
-
 import { allFunctions, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-missing-component-display-name";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "const App = React.memo(() => <div>foo</div>)",
+      code: /* tsx */ `const App = React.memo(() => <div>foo</div>)`,
       errors: [{
         messageId: "NO_MISSING_COMPONENT_DISPLAY_NAME",
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = React.memo(function () {
             return <div>foo</div>
         })
@@ -22,31 +20,31 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: "const App = React.forwardRef(() => <div>foo</div>)",
+      code: /* tsx */ `const App = React.forwardRef(() => <div>foo</div>)`,
       errors: [{
         messageId: "NO_MISSING_COMPONENT_DISPLAY_NAME",
       }],
     },
     {
-      code: "const MemoComponent = React.memo(() => <div></div>)",
+      code: /* tsx */ `const MemoComponent = React.memo(() => <div></div>)`,
       errors: [{
         messageId: "NO_MISSING_COMPONENT_DISPLAY_NAME",
       }],
     },
     {
-      code: "const ForwardRefComponent = React.forwardRef(() => <div></div>)",
+      code: /* tsx */ `const ForwardRefComponent = React.forwardRef(() => <div></div>)`,
       errors: [{
         messageId: "NO_MISSING_COMPONENT_DISPLAY_NAME",
       }],
     },
     {
-      code: "const MemoForwardRefComponent = React.memo(forwardRef(() => <div></div>))",
+      code: /* tsx */ `const MemoForwardRefComponent = React.memo(forwardRef(() => <div></div>))`,
       errors: [{
         messageId: "NO_MISSING_COMPONENT_DISPLAY_NAME",
       }],
     },
     {
-      code: "const MemoForwardRefComponent = React.memo(React.forwardRef(() => <div></div>))",
+      code: /* tsx */ `const MemoForwardRefComponent = React.memo(React.forwardRef(() => <div></div>))`,
       errors: [{
         messageId: "NO_MISSING_COMPONENT_DISPLAY_NAME",
       }],
@@ -55,45 +53,45 @@ ruleTester.run(RULE_NAME, rule, {
   valid: [
     ...allFunctions,
     "const App = () => <div>foo</div>",
-    dedent`
+    /* tsx */ `
       function App() {
           return <div>foo</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       function App() {
           return <div>foo</div>
       }
 
       App.displayName = "TestDisplayName";
     `,
-    dedent`
+    /* tsx */ `
       import { memo } from 'react'
 
       const App = memo(function App() {
           return <div>foo</div>
       })
     `,
-    dedent`
+    /* tsx */ `
       const App = forwardRef(function App() {
           return <div>foo</div>
       })
     `,
-    dedent`
+    /* tsx */ `
       const App = React.memo(function () {
           return <div>foo</div>
       })
 
       App.displayName = "TestDisplayName";
     `,
-    dedent`
+    /* tsx */ `
       const App = React.memo(function () {
           return <div>foo</div>
       })
 
       App.displayName = \`\${"TestDisplayName"}\`;
     `,
-    dedent`
+    /* tsx */ `
       const App = React.memo(function () {
           return <div>foo</div>
       })
@@ -102,25 +100,25 @@ ruleTester.run(RULE_NAME, rule, {
 
       App.displayName = displayName;
     `,
-    dedent`
+    /* tsx */ `
       const someThing = {
         displayName: "someThing",
       }
       const Component = React.forwardRef(() => <div/>)
       Component.displayName = someThing.displayName
     `,
-    dedent`
+    /* tsx */ `
       function getDisplayName() { return "someThing" }
       const Component = React.forwardRef(() => <div/>)
       Component.displayName = getDisplayName()
     `,
-    dedent`
+    /* tsx */ `
       function getDisplayName() { return "someThing" }
       const Component = React.forwardRef(() => <div/>)
       Component.displayName = (true, 1 + 1, getDisplayName)()
     `,
     // https://github.com/Rel1cx/eslint-react/issues/177
-    dedent`
+    /* tsx */ `
       import { forwardRef, ReactNode } from 'react';
 
       interface Props {
@@ -141,7 +139,7 @@ ruleTester.run(RULE_NAME, rule, {
 
       FancyButton.displayName = 'FancyButton';
     `,
-    dedent`
+    /* tsx */ `
       import { forwardRef, ReactNode } from 'react';
 
       interface Props {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.spec.ts
index ef8eff6a9..3d3518c5f 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-missing-key.spec.ts
@@ -1,32 +1,30 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-missing-key";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "[<App />];",
+      code: /* tsx */ `[<App />];`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[<App {...key} />];",
+      code: /* tsx */ `[<App {...key} />];`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[<App key={0}/>, <App />];",
+      code: /* tsx */ `[<App key={0}/>, <App />];`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[1, 2 ,3].map(function(x) { return <App /> });",
+      code: /* tsx */ `[1, 2 ,3].map(function(x) { return <App /> });`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[1, 2 ,3].map(x => <App />);",
+      code: /* tsx */ `[1, 2 ,3].map(x => <App />);`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[1, 2 ,3].map(x => x && <App x={x} />);",
+      code: /* tsx */ `[1, 2 ,3].map(x => x && <App x={x} />);`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
@@ -38,31 +36,31 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[1, 2 ,3].map(x => { return <App /> });",
+      code: /* tsx */ `[1, 2 ,3].map(x => { return <App /> });`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "Array.from([1, 2 ,3], function(x) { return <App /> });",
+      code: /* tsx */ `Array.from([1, 2 ,3], function(x) { return <App /> });`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "Array.from([1, 2 ,3], (x => { return <App /> }));",
+      code: /* tsx */ `Array.from([1, 2 ,3], (x => { return <App /> }));`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "Array.from([1, 2 ,3], (x => <App />));",
+      code: /* tsx */ `Array.from([1, 2 ,3], (x => <App />));`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[1, 2, 3]?.map(x => <BabelEslintApp />)",
+      code: /* tsx */ `[1, 2, 3]?.map(x => <BabelEslintApp />)`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[1, 2, 3]?.map(x => <TypescriptEslintApp />)",
+      code: /* tsx */ `[1, 2, 3]?.map(x => <TypescriptEslintApp />)`,
       errors: [{ messageId: "NO_MISSING_KEY" }],
     },
     {
-      code: "[1, 2, 3].map(x => <>{x}</>);",
+      code: /* tsx */ `[1, 2, 3].map(x => <>{x}</>);`,
       errors: [
         {
           messageId: "NO_MISSING_KEY_WITH_FRAGMENT",
@@ -70,7 +68,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "[<></>];",
+      code: /* tsx */ `[<></>];`,
       errors: [
         {
           messageId: "NO_MISSING_KEY_WITH_FRAGMENT",
@@ -78,7 +76,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Test = () => {
           const list = [1, 2, 3, 4, 5];
 
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const TestO = () => {
           const list = [1, 2, 3, 4, 5];
 
@@ -130,7 +128,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const TestCase = () => {
           const list = [1, 2, 3, 4, 5];
 
@@ -152,7 +150,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function Explain() {
           return (
             <div>
@@ -214,13 +212,13 @@ ruleTester.run(RULE_NAME, rule, {
     "<App {...{}} />;",
     '<App key="keyBeforeSpread" {...{}} />;',
     '<div key="keyBeforeSpread" {...{}} />;',
-    dedent`
+    /* tsx */ `
       const spans = [
         <span key="notunique"/>,
         <span key="notunique"/>,
       ];
     `,
-    dedent`
+    /* tsx */ `
       function Component(props) {
         return hasPayment ? (
           <div className="stuff">
@@ -232,7 +230,7 @@ ruleTester.run(RULE_NAME, rule, {
         ) : null;
       }
     `,
-    dedent`
+    /* tsx */ `
       import React, { FC, useRef, useState } from 'react';
 
       import './ResourceVideo.sass';
@@ -256,14 +254,14 @@ ruleTester.run(RULE_NAME, rule, {
 
       export default ResourceVideo;
     `,
-    dedent`
+    /* tsx */ `
       // testrule.jsx
       const trackLink = () => {};
       const getAnalyticsUiElement = () => {};
 
       const onTextButtonClick = (e, item) => trackLink([, getAnalyticsUiElement(item), item.name], e);
     `,
-    dedent`
+    /* tsx */ `
       function Component({ allRatings }) {
         return (
           <RatingDetailsStyles>
@@ -284,14 +282,14 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       const baz = foo?.bar?.()?.[1] ?? 'qux';
 
       qux()?.map()
 
       const directiveRanges = comments?.map(tryParseTSDirective)
     `,
-    dedent`
+    /* tsx */ `
       import { observable } from "mobx";
 
       export interface ClusterFrameInfo {
@@ -302,11 +300,11 @@ ruleTester.run(RULE_NAME, rule, {
       export const clusterFrameMap = observable.map<string, ClusterFrameInfo>();
     `,
     "React.Children.toArray([1, 2 ,3].map(x => <App />));",
-    dedent`
+    /* tsx */ `
       import { Children } from "react";
       Children.toArray([1, 2 ,3].map(x => <App />));
     `,
-    dedent`
+    /* tsx */ `
       import React from 'react';
       import { Children as ReactChildren } from 'react';
       import dedent from 'dedent';
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-components.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-components.spec.ts
index 28e21fdb1..cee0636e3 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-components.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-nested-components.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-nested-components";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function UnstableNestedFunctionComponent() {
             return <div />;
@@ -22,7 +20,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function UnstableNestedFunctionComponent() {
             return React.createElement("div", null);
@@ -38,7 +36,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedVariableComponent = () => {
             return <div />;
@@ -54,7 +52,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedVariableComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedVariableComponent = () => {
             return React.createElement("div", null);
@@ -70,7 +68,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedVariableComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           function UnstableNestedFunctionComponent() {
             return <div />;
@@ -86,7 +84,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           function UnstableNestedFunctionComponent() {
             return React.createElement("div", null);
@@ -102,7 +100,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export default () => {
           function UnstableNestedFunctionComponent() {
             return <div />;
@@ -118,7 +116,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         export default () => {
           function UnstableNestedFunctionComponent() {
             return React.createElement("div", null);
@@ -134,7 +132,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           const UnstableNestedVariableComponent = () => {
             return <div />;
@@ -150,7 +148,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedVariableComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const ParentComponent = () => {
           const UnstableNestedVariableComponent = () => {
             return React.createElement("div", null);
@@ -166,7 +164,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedVariableComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           class UnstableNestedClassComponent extends React.Component {
             render() {
@@ -184,7 +182,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedClassComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           class UnstableNestedClassComponent extends React.Component {
             render() {
@@ -202,7 +200,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedClassComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             class UnstableNestedClassComponent extends React.Component {
@@ -222,7 +220,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedClassComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             class UnstableNestedClassComponent extends React.Component {
@@ -242,7 +240,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedClassComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedFunctionComponent() {
@@ -260,7 +258,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             function UnstableNestedClassComponent() {
@@ -278,7 +276,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedClassComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const UnstableNestedVariableComponent = () => {
@@ -296,25 +294,25 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedVariableComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: `
-            class ParentComponent extends React.Component {
-              render() {
-                const UnstableNestedClassComponent = () => {
-                  return React.createElement("div", null);
-                }
-
-                return React.createElement(
-                  "div",
-                  null,
-                  React.createElement(UnstableNestedClassComponent, null)
-                );
-              }
+      code: /* tsx */ `
+        class ParentComponent extends React.Component {
+          render() {
+            const UnstableNestedClassComponent = () => {
+              return React.createElement("div", null);
             }
-          `,
+
+            return React.createElement(
+              "div",
+              null,
+              React.createElement(UnstableNestedClassComponent, null)
+            );
+          }
+        }
+      `,
       errors: [{ data: { name: "UnstableNestedClassComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function getComponent() {
             function NestedUnstableFunctionComponent() {
@@ -334,7 +332,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "NestedUnstableFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           function getComponent() {
             function NestedUnstableFunctionComponent() {
@@ -350,7 +348,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "NestedUnstableFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ComponentWithProps(props) {
           return React.createElement("div", null);
         }
@@ -366,7 +364,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "SomeFooter" }, messageId: "NESTED_COMPONENT_IN_PROPS" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function RenderPropComponent(props) {
           return props.render({});
         }
@@ -392,7 +390,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           return (
             <ComponentForProps someMap={{ Header: () => <div /> }} />
@@ -402,7 +400,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "Header" }, messageId: "NESTED_COMPONENT_IN_PROPS" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = () => {
@@ -416,7 +414,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "List" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ParentComponent extends React.Component {
           render() {
             const List = (props) => {
@@ -437,7 +435,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "List" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(() => {
             return <div />;
@@ -453,7 +451,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(
             () => React.createElement("div", null),
@@ -469,7 +467,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(
             function () {
@@ -487,7 +485,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const UnstableNestedComponent = React.memo(
             function () {
@@ -505,7 +503,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "UnstableNestedComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const MemoizedNestedComponent = React.useCallback(() => <div />, []);
 
@@ -519,7 +517,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "MemoizedNestedComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const MemoizedNestedComponent = React.useCallback(
             () => React.createElement("div", null),
@@ -536,7 +534,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "MemoizedNestedComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const MemoizedNestedFunctionComponent = React.useCallback(
             function () {
@@ -555,7 +553,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "MemoizedNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           const MemoizedNestedFunctionComponent = React.useCallback(
             function () {
@@ -574,7 +572,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ data: { name: "MemoizedNestedFunctionComponent" }, messageId: "NESTED_COMPONENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function ParentComponent() {
           return (
             <SomeComponent components={{ Header: () => <div /> }} />
@@ -586,7 +584,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <div>
@@ -595,7 +593,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(
           "div",
@@ -604,7 +602,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent
@@ -614,7 +612,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(SomeComponent, {
           footer: React.createElement(OutsideDefinedComponent, null),
@@ -622,7 +620,7 @@ ruleTester.run(RULE_NAME, rule, {
         });
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         // Should not interfere handler declarations
         function onClick(event) {
@@ -656,7 +654,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function getComponent() {
           return <div />;
@@ -669,7 +667,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         function getComponent() {
           return React.createElement("div", null);
@@ -678,7 +676,7 @@ ruleTester.run(RULE_NAME, rule, {
         return React.createElement("div", null, getComponent());
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <ComplexRenderPropComponent
@@ -696,7 +694,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(
             RenderPropComponent,
@@ -705,7 +703,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return (
           <ul>
@@ -718,7 +716,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return (
           <List items={props.items.map(item => {
@@ -732,7 +730,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return React.createElement(
           "ul",
@@ -747,7 +745,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return (
           <ul>
@@ -762,7 +760,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent(props) {
         return React.createElement(
           "ul",
@@ -777,19 +775,19 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function createTestComponent(props) {
         return (
           <div />
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function createTestComponent(props) {
         return React.createElement("div", null);
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent>
@@ -804,7 +802,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const thingElement = thing.match({
           renderLoading: () => <div />,
@@ -818,21 +816,21 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <ComponentForProps renderFooter={() => <div />} />
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return React.createElement(ComponentForProps, {
           renderFooter: () => React.createElement("div", null)
         });
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         useEffect(() => {
           return () => null;
@@ -841,7 +839,7 @@ ruleTester.run(RULE_NAME, rule, {
         return <div />;
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return (
           <SomeComponent renderMenu={() => (
@@ -854,7 +852,7 @@ ruleTester.run(RULE_NAME, rule, {
         )
       }
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = () => (
         <SomeComponent
           components={[
@@ -867,7 +865,7 @@ ruleTester.run(RULE_NAME, rule, {
         />
       );
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const rows = [
           {
@@ -879,12 +877,12 @@ ruleTester.run(RULE_NAME, rule, {
         return <Table rows={rows} />;
       }
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         return <SomeComponent renderers={{ notComponent: () => null }} />;
       }
     `,
-    dedent`
+    /* tsx */ `
       const ParentComponent = createReactClass({
         displayName: "ParentComponent",
         statics: {
@@ -897,13 +895,13 @@ ruleTester.run(RULE_NAME, rule, {
         },
       });
     `,
-    dedent`
+    /* tsx */ `
       function ParentComponent() {
         const _renderHeader = () => <div />;
         return <div>{_renderHeader()}</div>;
       }
     `,
-    dedent`
+    /* tsx */ `
       const testCases = {
         basic: {
           render() {
@@ -913,7 +911,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentWithProps(props) {
         return <div />;
       }
@@ -929,7 +927,7 @@ ruleTester.run(RULE_NAME, rule, {
         );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentWithProps(props) {
         return <div />;
       }
@@ -940,7 +938,7 @@ ruleTester.run(RULE_NAME, rule, {
           );
       }
     `,
-    dedent`
+    /* tsx */ `
       function ComponentForProps(props) {
         return <div />;
       }
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.spec.ts
index 51695f3e6..209b04d89 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-redundant-should-component-update.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-redundant-should-component-update";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.PureComponent {
           shouldComponentUpdate() {
             return true;
@@ -21,7 +19,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends PureComponent {
           shouldComponentUpdate() {
             return true;
@@ -36,7 +34,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.PureComponent {
           shouldComponentUpdate = () => {
             return true;
@@ -51,7 +49,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         function Foo() {
           return class Bar extends React.PureComponent {
             shouldComponentUpdate() {
@@ -68,7 +66,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         function Foo() {
           return class Bar extends PureComponent {
             shouldComponentUpdate() {
@@ -85,7 +83,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         var Foo = class extends PureComponent {
           shouldComponentUpdate() {
             return true;
@@ -102,21 +100,21 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         shouldComponentUpdate() {
           return true;
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         shouldComponentUpdate = () => {
           return true;
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       function Foo() {
         return class Bar extends React.Component {
           shouldComponentUpdate() {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.spec.ts
index 925f4a24a..b8d3e9b45 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-mount.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-set-state-in-component-did-mount";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           componentDidMount() {
             this.setState({ foo: "bar" });
@@ -18,7 +16,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Foo = class extends React.Component {
           componentDidMount() {
             this.setState({ foo: "bar" });
@@ -32,7 +30,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         componentDidMount() {
           class Bar extends Baz {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.spec.ts
index c47b671c8..abf6e4705 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-did-update.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-set-state-in-component-did-update";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           componentDidUpdate() {
             this.setState({ foo: "bar" });
@@ -18,7 +16,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Foo = class extends React.Component {
           componentDidUpdate() {
             this.setState({ foo: "bar" });
@@ -32,7 +30,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         componentDidUpdate() {
           class Bar extends Baz {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.spec.ts
index d05905165..0681f465f 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-set-state-in-component-will-update.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-set-state-in-component-will-update";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           componentWillUpdate() {
             this.setState({ foo: "bar" });
@@ -18,7 +16,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Foo = class extends React.Component {
           componentWillUpdate() {
             this.setState({ foo: "bar" });
@@ -32,7 +30,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
       componentWillUpdate() {
                 class Bar extends Baz {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.spec.ts
index 5a60c0101..e0be5af36 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-string-refs.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-string-refs";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         function App() {
             return <div ref="ref" />
         }
@@ -14,7 +12,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_STRING_REFS" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Input extends React.Component {
           focus = () => {
             this.refs.input.focus();
@@ -30,12 +28,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       function App() {
           return <div ref={ref} />
       }
     `,
-    dedent`
+    /* tsx */ `
       function App() {
           return <div ref={() => {}} />;
       }
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.spec.ts
index 945738aa4..bb8a3ff62 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-mount.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unsafe-component-will-mount";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.Component {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.PureComponent {
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Component } from "react";
 
         class Foo extends Component {
@@ -63,7 +61,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { PureComponent } from "react";
 
         class Foo extends PureComponent {
@@ -84,12 +82,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends Bar {
         componentWillMount() {}
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.Component {
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.PureComponent {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.spec.ts
index 4354278d6..66a8f0d0e 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-receive-props.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unsafe-component-will-receive-props";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.Component {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.PureComponent {
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Component } from "react";
 
         class Foo extends Component {
@@ -63,7 +61,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { PureComponent } from "react";
 
         class Foo extends PureComponent {
@@ -84,12 +82,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends Bar {
         componentWillReceiveProps() {}
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.Component {
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.PureComponent {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.spec.ts
index 8fb570424..fcd071285 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unsafe-component-will-update.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unsafe-component-will-update";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.Component {
@@ -25,7 +23,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         class Foo extends React.PureComponent {
@@ -44,7 +42,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { Component } from "react";
 
         class Foo extends Component {
@@ -63,7 +61,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { PureComponent } from "react";
 
         class Foo extends PureComponent {
@@ -84,12 +82,12 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends Bar {
         componentWillUpdate() {}
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.Component {
@@ -101,7 +99,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       class Foo extends React.PureComponent {
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.spec.ts
index 704bb53e6..bfc54f56a 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-context-value.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unstable-context-value";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
           function App() {
             const foo = {}
             return <Context.Provider value={foo}></Context.Provider>;
@@ -15,7 +13,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ messageId: "NO_UNSTABLE_CONTEXT_VALUE_WITH_IDENTIFIER" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
           function App() {
             const foo = []
             return <Context.Provider value={foo}></Context.Provider>
@@ -28,7 +26,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function App() {
             const foo = new Object();
             return <Context.Provider value={foo}></Context.Provider>
@@ -41,7 +39,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
           function App() {
             const foo = () => {}
             return <Context.Provider value={foo}></Context.Provider>
@@ -54,7 +52,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function App() {
             const foo = {
                 bar: () => {}
@@ -71,37 +69,37 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
         function App() {
           const foo = useMemo(() => ({}), [])
           return <Context.Provider value={foo}></Context.Provider>
       }
     `,
-    dedent`
+    /* tsx */ `
         function App() {
           const foo = useMemo(() => [], [])
           return <Context.Provider value={foo}></Context.Provider>
       }
     `,
-    dedent`
+    /* tsx */ `
         const foo = {}
         function App() {
           return <Context.Provider value={foo}></Context.Provider>;
       }
     `,
-    dedent`
+    /* tsx */ `
         const foo = []
         function App() {
           return <Context.Provider value={foo}></Context.Provider>;
       }
     `,
-    dedent`
+    /* tsx */ `
         const foo = new Object()
         function App() {
           return <Context.Provider value={foo}></Context.Provider>;
       }
     `,
-    dedent`
+    /* tsx */ `
       const foo = () => {}
               function App() {
                   return <Context.Provider value={foo}></Context.Provider>;
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.spec.ts
index a32456b33..d29f29ae7 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unstable-default-props.spec.ts
@@ -1,5 +1,3 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unstable-default-props";
 
@@ -81,7 +79,7 @@ const expectedViolations = [
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         function App({ foo = [], ...rest }) {
             return null
         }
@@ -95,7 +93,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function App({ foo = {}, ...rest }) {
             return null
         }
@@ -109,7 +107,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function App(props) {
             const { foo = [] } = props
             return null
@@ -124,7 +122,7 @@ ruleTester.run(RULE_NAME, rule, {
       }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function App({
             a = {},
             b = ['one', 'two'],
@@ -143,7 +141,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: expectedViolations,
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = ({
             a = {},
             b = ['one', 'two'],
@@ -164,31 +162,31 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       const emptyFunction = () => {}
 
       function App({ foo = emptyFunction }) {
           return null
       }
     `,
-    dedent`
+    /* tsx */ `
       const emptyFunction = () => {}
 
       function App({ foo = emptyFunction, ...rest }) {
           return null
       }
     `,
-    dedent`
+    /* tsx */ `
         function App({ foo = 1, baz = 'hello' }) {
           return null
       }
     `,
-    dedent`
+    /* tsx */ `
         function App(props) {
           return null
       }
     `,
-    dedent`
+    /* tsx */ `
         function App(props) {
             return null
         }
@@ -196,17 +194,17 @@ ruleTester.run(RULE_NAME, rule, {
           foo: () => {}
       }
     `,
-    dedent`
+    /* tsx */ `
         const App = () => {
           return null
       }
     `,
-    dedent`
+    /* tsx */ `
       const App = ({ foo = 1 }) => {
           return null
       }
     `,
-    dedent`
+    /* tsx */ `
       const emptyArray = [];
       function Component(props) {
         const { items = emptyArray } = props;
@@ -214,6 +212,6 @@ ruleTester.run(RULE_NAME, rule, {
         return <div>{items}</div>;
       }
     `,
-    dedent`export default function NonComponent({ foo = {} }) {}`,
+    /* tsx */ `export default function NonComponent({ foo = {} }) {}`,
   ],
 });
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.spec.ts
index 4b2601c4a..53b45d896 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-class-component-members.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unused-class-component-members";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           getDerivedStateFromProps() {}
           render() {
@@ -22,7 +20,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           handleClick() {}
           render() {
@@ -38,7 +36,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           handleScroll() {}
           handleClick() {}
@@ -59,7 +57,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           handleClick = () => {}
           render() {
@@ -75,7 +73,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           action = async () => {}
           render() {
@@ -91,7 +89,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           async action() {
             console.log('error');
@@ -109,7 +107,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           * action() {
             console.log('error');
@@ -127,7 +125,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           async * action() {
             console.log('error');
@@ -145,7 +143,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           getInitialState() {}
           render() {
@@ -161,7 +159,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
+      code: /* tsx */ `
         class Foo extends React.Component {
           action = function() {
             console.log('error');
@@ -179,14 +177,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class ClassAssignPropertyInMethodTest extends React.Component {
-           foo = 3;
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class ClassAssignPropertyInMethodTest extends React.Component {
+          foo = 3;
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "ClassAssignPropertyInMethodTest", methodName: "foo" },
@@ -195,16 +193,16 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class ClassAssignPropertyInMethodTest extends React.Component {
-           constructor() {
-             this.foo = 3;
-           }
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class ClassAssignPropertyInMethodTest extends React.Component {
+          constructor() {
+            this.foo = 3;
+          }
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "ClassAssignPropertyInMethodTest", methodName: "foo" },
@@ -213,14 +211,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           foo;
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          foo;
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -229,14 +227,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           foo = a;
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          foo = a;
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -245,14 +243,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           ['foo'];
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          ['foo'];
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -261,14 +259,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           ['foo'] = a;
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          ['foo'] = a;
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -277,14 +275,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           foo = a;
-           render() {
-             return <SomeComponent foo={this[foo]} />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          foo = a;
+          render() {
+            return <SomeComponent foo={this[foo]} />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -293,14 +291,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           private foo;
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          private foo;
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -309,14 +307,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           private foo() {}
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          private foo() {}
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -325,14 +323,14 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: `
-         class Foo extends React.Component {
-           private foo = 3;
-           render() {
-             return <SomeComponent />;
-           }
-         }
-       `,
+      code: /* tsx */ `
+        class Foo extends React.Component {
+          private foo = 3;
+          render() {
+            return <SomeComponent />;
+          }
+        }
+      `,
       errors: [
         {
           data: { className: "Foo", methodName: "foo" },
@@ -343,21 +341,21 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         shouldComponentUpdate() {
           return true;
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         shouldComponentUpdate = () => {
           return true;
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       function Foo() {
         return class Bar extends React.Component {
           shouldComponentUpdate() {
@@ -366,7 +364,7 @@ ruleTester.run(RULE_NAME, rule, {
         };
       }
     `,
-    dedent`
+    /* tsx */ `
       class SmockTestForTypeOfNullError extends React.Component {
         handleClick() {}
         foo;
@@ -376,7 +374,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         handleClick() {}
         render() {
@@ -384,7 +382,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       var Foo = createReactClass({
         handleClick() {},
         render() {
@@ -392,7 +390,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       })
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action() {}
         componentDidMount() {
@@ -403,7 +401,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       var Foo = createReactClass({
         action() {},
         componentDidMount() {
@@ -414,7 +412,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       })
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action() {}
         componentDidMount() {
@@ -426,7 +424,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         getValue() {}
         componentDidMount() {
@@ -437,7 +435,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         handleClick = () => {}
         render() {
@@ -445,7 +443,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         renderContent() {}
         render() {
@@ -453,7 +451,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         renderContent() {}
         render() {
@@ -465,7 +463,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         property = {}
         render() {
@@ -473,7 +471,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = () => {}
         anotherAction = () => {
@@ -484,7 +482,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = () => {}
         anotherAction = () => this.action()
@@ -493,7 +491,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         getValue = () => {}
         value = this.getValue()
@@ -502,13 +500,13 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo {
         action = () => {}
         anotherAction = () => this.action()
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = async () => {}
         render() {
@@ -516,7 +514,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         async action() {
           console.log('error');
@@ -526,7 +524,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         * action() {
           console.log('error');
@@ -536,7 +534,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         async * action() {
           console.log('error');
@@ -546,7 +544,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = function() {
           console.log('error');
@@ -556,7 +554,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassPropertyTest extends React.Component {
         foo;
         render() {
@@ -564,7 +562,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassPropertyTest extends React.Component {
         foo = a;
         render() {
@@ -572,7 +570,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         ['foo'] = a;
         render() {
@@ -580,7 +578,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         ['foo'];
         render() {
@@ -588,7 +586,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedTemplatePropertyTest extends React.Component {
         [\`foo\`] = a;
         render() {
@@ -596,7 +594,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedTemplatePropertyTest extends React.Component {
         state = {}
         render() {
@@ -604,7 +602,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassLiteralComputedMemberTest extends React.Component {
         ['foo']() {}
         render() {
@@ -612,7 +610,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedTemplateMemberTest extends React.Component {
         [\`foo\`]() {}
         render() {
@@ -620,7 +618,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseAssignTest extends React.Component {
         foo() {}
         render() {
@@ -629,7 +627,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseAssignTest extends React.Component {
         foo() {}
         render() {
@@ -638,7 +636,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseDestructuringTest extends React.Component {
         foo() {}
         render() {
@@ -647,7 +645,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseDestructuringTest extends React.Component {
         ['foo']() {}
         render() {
@@ -656,7 +654,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedMemberTest extends React.Component {
         [foo]() {}
         render() {
@@ -664,7 +662,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassWithLifecycleMethods extends React.Component {
         constructor(props) {
           super(props);
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.spec.ts
index 751218af6..9fe7ef85a 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-unused-state.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-unused-state";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         class ClassComputedTemplatePropertyTest extends React.Component {
           constructor() {
             this.state = {}
@@ -24,7 +22,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           handleClick() {}
@@ -41,7 +39,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           handleScroll() {}
@@ -59,7 +57,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           handleClick = () => {}
@@ -76,7 +74,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           action = async () => {}
@@ -93,7 +91,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {};
           async action() {
@@ -112,7 +110,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {};
           * action() {
@@ -131,7 +129,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {};
           async * action() {
@@ -150,7 +148,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           getInitialState() {}
@@ -167,7 +165,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           action = function() {
@@ -186,7 +184,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ClassAssignPropertyInMethodTest extends React.Component {
           state = {}
           foo = 3;
@@ -203,7 +201,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class ClassAssignPropertyInMethodTest extends React.Component {
           state = {}
           constructor() {
@@ -222,7 +220,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           foo;
@@ -239,7 +237,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           foo = a;
@@ -256,7 +254,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           ['foo'];
@@ -273,7 +271,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           ['foo'] = a;
@@ -290,7 +288,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           foo = a;
           state = {}
@@ -307,7 +305,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           private foo;
           state = {}
@@ -324,7 +322,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
          state = {}
          private foo() {}
@@ -341,7 +339,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         class Foo extends React.Component {
           state = {}
           private foo = 3;
@@ -360,21 +358,21 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         shouldComponentUpdate() {
           return true;
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         shouldComponentUpdate = () => {
           return true;
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       function Foo() {
         return class Bar extends React.Component {
           shouldComponentUpdate() {
@@ -383,7 +381,7 @@ ruleTester.run(RULE_NAME, rule, {
         };
       }
     `,
-    dedent`
+    /* tsx */ `
       class SmockTestForTypeOfNullError extends React.Component {
         handleClick() {}
         foo;
@@ -393,7 +391,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         handleClick() {}
         render() {
@@ -401,7 +399,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       var Foo = createReactClass({
         handleClick() {},
         render() {
@@ -409,7 +407,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       })
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action() {}
         componentDidMount() {
@@ -420,7 +418,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       var Foo = createReactClass({
         action() {},
         componentDidMount() {
@@ -431,7 +429,7 @@ ruleTester.run(RULE_NAME, rule, {
         },
       })
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action() {}
         componentDidMount() {
@@ -443,7 +441,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         getValue() {}
         componentDidMount() {
@@ -454,7 +452,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         handleClick = () => {}
         render() {
@@ -462,7 +460,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         renderContent() {}
         render() {
@@ -470,7 +468,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         renderContent() {}
         render() {
@@ -482,7 +480,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         property = {}
         render() {
@@ -490,7 +488,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = () => {}
         anotherAction = () => {
@@ -501,7 +499,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = () => {}
         anotherAction = () => this.action()
@@ -510,7 +508,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         getValue = () => {}
         value = this.getValue()
@@ -519,13 +517,13 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo {
         action = () => {}
         anotherAction = () => this.action()
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = async () => {}
         render() {
@@ -533,7 +531,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         async action() {
           console.log('error');
@@ -543,7 +541,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         * action() {
           console.log('error');
@@ -553,7 +551,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         async * action() {
           console.log('error');
@@ -563,7 +561,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         action = function() {
           console.log('error');
@@ -573,7 +571,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassPropertyTest extends React.Component {
         foo;
         render() {
@@ -581,7 +579,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassPropertyTest extends React.Component {
         foo = a;
         render() {
@@ -589,7 +587,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         ['foo'] = a;
         render() {
@@ -597,7 +595,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         ['foo'];
         render() {
@@ -605,7 +603,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedTemplatePropertyTest extends React.Component {
         [\`foo\`] = a;
         render() {
@@ -613,7 +611,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedTemplatePropertyTest extends React.Component {
         state = {}
         render() {
@@ -621,7 +619,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedTemplatePropertyTest extends React.Component {
         constructor() {
           this.state = {}
@@ -631,7 +629,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassLiteralComputedMemberTest extends React.Component {
         ['foo']() {}
         render() {
@@ -639,7 +637,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedTemplateMemberTest extends React.Component {
         [\`foo\`]() {}
         render() {
@@ -647,7 +645,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseAssignTest extends React.Component {
         foo() {}
         render() {
@@ -656,7 +654,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseAssignTest extends React.Component {
         foo() {}
         render() {
@@ -665,7 +663,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseDestructuringTest extends React.Component {
         foo() {}
         render() {
@@ -674,7 +672,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassUseDestructuringTest extends React.Component {
         ['foo']() {}
         render() {
@@ -683,7 +681,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassComputedMemberTest extends React.Component {
         [foo]() {}
         render() {
@@ -691,7 +689,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassWithLifecycleMethods extends React.Component {
         constructor(props) {
           super(props);
@@ -714,19 +712,19 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       function StatelessFnUnaffectedTest(props) {
         return <SomeComponent foo={props.foo} />;
       };
     `,
-    dedent`
+    /* tsx */ `
       class NoStateTest extends React.Component {
         render() {
           return <SomeComponent />;
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class CtorStateTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -736,7 +734,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromVariableTest extends React.Component {
         constructor() {
           this.state = { [foo]: 0 };
@@ -746,7 +744,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromBooleanLiteralTest extends React.Component {
         constructor() {
           this.state = { [false]: 0 };
@@ -756,7 +754,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromNumberLiteralTest extends React.Component {
         constructor() {
           this.state = { [345]: 0 };
@@ -766,7 +764,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromExpressionTest extends React.Component {
         constructor() {
           this.state = { [foo + bar]: 0 };
@@ -776,7 +774,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromBinaryExpressionTest extends React.Component {
         constructor() {
           this.state = { [1 + 2 * 8]: 0 };
@@ -786,7 +784,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromStringLiteralTest extends React.Component {
         constructor() {
           this.state = { ['foo']: 0 };
@@ -796,7 +794,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromTemplateLiteralTest extends React.Component {
         constructor() {
           this.state = { [\`foo\${bar}\`]: 0 };
@@ -806,7 +804,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedKeyFromTemplateLiteralTest extends React.Component {
         constructor() {
           this.state = { [\`foo\`]: 0 };
@@ -816,7 +814,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class SetStateTest extends React.Component {
         onFooChange(newFoo) {
           this.setState({ foo: newFoo });
@@ -826,7 +824,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ClassPropertyStateTest extends React.Component {
         state = { foo: 0 };
         render() {
@@ -834,7 +832,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class OptionalChaining extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -844,7 +842,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class VariableDeclarationTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -855,7 +853,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class DestructuringTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -866,7 +864,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ShorthandDestructuringTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -877,7 +875,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class AliasDeclarationTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -888,7 +886,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class AliasAssignmentTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -900,7 +898,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class DestructuringAliasTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -911,7 +909,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ShorthandDestructuringAliasTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -922,7 +920,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class RestPropertyTest extends React.Component {
         constructor() {
           this.state = {
@@ -936,7 +934,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class DeepDestructuringTest extends React.Component {
         state = { foo: 0, bar: 0 };
         render() {
@@ -947,7 +945,7 @@ ruleTester.run(RULE_NAME, rule, {
     `,
     // A cleverer analysis might recognize that the following should be errors,
     // but they're out of scope for this lint rule.
-    dedent`
+    /* tsx */ `
       class MethodArgFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -959,7 +957,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class AssignedToObjectFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -970,7 +968,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComputedAccessFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0, bar: 1 };
@@ -981,7 +979,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class JsxSpreadFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -991,7 +989,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class AliasedJsxSpreadFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -1002,7 +1000,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ObjectSpreadFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -1013,7 +1011,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ShadowingFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -1029,7 +1027,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class NonRenderClassMethodFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0, bar: 0 };
@@ -1047,7 +1045,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ArrowFunctionClassMethodDestructuringFalseNegativeTest extends React.Component {
         constructor() {
           this.state = { foo: 0 };
@@ -1064,7 +1062,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ArrowFunctionClassMethodWithClassPropertyTransformFalseNegativeTest extends React.Component {
         state = { foo: 0 };
 
@@ -1079,7 +1077,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ArrowFunctionClassMethodDeepDestructuringFalseNegativeTest extends React.Component {
         state = { foo: { bar: 0 } };
 
@@ -1094,7 +1092,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ArrowFunctionClassMethodDestructuringAssignmentFalseNegativeTest extends React.Component {
         state = { foo: 0 };
 
@@ -1109,7 +1107,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ThisStateAsAnObject extends React.Component {
         state = {
           active: true
@@ -1120,7 +1118,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class GetDerivedStateFromPropsTest extends Component {
         constructor(props) {
           super(props);
@@ -1143,7 +1141,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ComponentDidUpdateTest extends Component {
         constructor(props) {
           super(props);
@@ -1164,7 +1162,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class ShouldComponentUpdateTest extends Component {
         constructor(props) {
           super(props);
@@ -1182,7 +1180,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class NestedScopesTest extends Component {
         constructor(props) {
           super(props);
@@ -1202,7 +1200,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends Component {
         state = {
           initial: 'foo',
@@ -1218,7 +1216,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends Component {
         constructor(props) {
           super(props);
@@ -1237,7 +1235,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends Component {
         constructor(props) {
           super(props);
@@ -1256,22 +1254,22 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    `
-        class SetStateDestructuringCallback extends Component {
-          state = {
-              used: 1, unused: 2
-          }
-          handleChange = () => {
-            this.setState(({unused}) => ({
-              used: unused * unused,
-            }));
-          }
-          render() {
-            return <div>{this.state.used}</div>
-          }
+    /* tsx */ `
+      class SetStateDestructuringCallback extends Component {
+        state = {
+            used: 1, unused: 2
         }
-      `,
-    dedent`
+        handleChange = () => {
+          this.setState(({unused}) => ({
+            used: unused * unused,
+          }));
+        }
+        render() {
+          return <div>{this.state.used}</div>
+        }
+      }
+    `,
+    /* tsx */ `
       class SetStateCallbackStateCondition extends Component {
         state = {
             isUsed: true,
@@ -1285,7 +1283,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends Component {
         handleChange = function() {
           this.setState(() => ({ foo: value }));
@@ -1295,7 +1293,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends Component {
         handleChange = function() {
           this.setState(state => ({ foo: value }));
@@ -1305,7 +1303,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends Component {
         static handleChange = () => {
           this.setState(state => ({ foo: value }));
@@ -1315,7 +1313,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends Component {
         state = {
           thisStateAliasProp,
@@ -1365,7 +1363,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       interface Props {}
 
       interface State {
@@ -1386,7 +1384,7 @@ ruleTester.run(RULE_NAME, rule, {
         };
       }
     `,
-    dedent`
+    /* tsx */ `
       class Foo extends React.Component {
         onCancel = (data) => {
           console.log('Cancelled', data)
@@ -1398,7 +1396,7 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class KarmaRefundPillComponent extends GenericPillComponent {
         renderContent = () => {
           const { action } = this.props
@@ -1415,13 +1413,13 @@ ruleTester.run(RULE_NAME, rule, {
         }
       }
     `,
-    dedent`
+    /* tsx */ `
       class AutoControlledComponent<P = {}, S = {}> extends UIComponent<P, S> {
         static getDerivedStateFromProps: React.GetDerivedStateFromProps<any, any>
       }
     `,
     {
-      code: dedent`
+      code: /* tsx */ `
         export const commonMixinWrapper = ComposeComponent => class extends ComposeComponent {
           static getDerivedStateFromProps = ComposeComponent.getDerivedStateFromProps;
           render() { return <div />; }
@@ -1429,7 +1427,7 @@ ruleTester.run(RULE_NAME, rule, {
       `,
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React, { PureComponent } from 'react';
 
         class TestNoUnusedState extends React.Component {
@@ -1458,7 +1456,7 @@ ruleTester.run(RULE_NAME, rule, {
         export default TestNoUnusedState;
       `,
     },
-    dedent`
+    /* tsx */ `
       class Component extends React.Component {
         static getDerivedStateFromProps = ({value, disableAnimation}: ToggleProps, {isControlled, isOn}: ToggleState) => {
           return { isControlled, isOn };
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.spec.ts
index 5e6045852..90f60704e 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/no-useless-fragment.spec.ts
@@ -1,5 +1,4 @@
 import { NodeType } from "@eslint-react/ast";
-import dedent from "dedent";
 
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./no-useless-fragment";
@@ -7,33 +6,33 @@ import rule, { RULE_NAME } from "./no-useless-fragment";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<></>",
+      code: /* tsx */ `<></>`,
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" }],
     },
     {
-      code: "<p><>foo</></p>",
+      code: /* tsx */ `<p><>foo</></p>`,
       errors: [
         { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
         { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" },
       ],
     },
     {
-      code: "<p>moo<>foo</></p>",
+      code: /* tsx */ `<p>moo<>foo</></p>`,
       errors: [
         { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
         { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" },
       ],
     },
     {
-      code: "<p><>{meow}</></p>",
+      code: /* tsx */ `<p><>{meow}</></p>`,
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" }],
     },
     {
-      code: "<><div/></>",
+      code: /* tsx */ `<><div/></>`,
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         <>
           <div/>
         </>
@@ -41,11 +40,11 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" }],
     },
     {
-      code: "<Fragment />",
+      code: /* tsx */ `<Fragment />`,
       errors: [{ type: NodeType.JSXElement, messageId: "NO_USELESS_FRAGMENT" }],
     },
     {
-      code: `
+      code: /* tsx */ `
         <React.Fragment>
           <Foo />
         </React.Fragment>
@@ -53,11 +52,11 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ type: NodeType.JSXElement, messageId: "NO_USELESS_FRAGMENT" }],
     },
     {
-      code: "<Eeee><>foo</></Eeee>",
+      code: /* tsx */ `<Eeee><>foo</></Eeee>`,
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" }],
     },
     {
-      code: "<div><>foo</></div>",
+      code: /* tsx */ `<div><>foo</></div>`,
       errors: [
         { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
         { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" },
@@ -68,7 +67,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         <section>
           <Eeee />
           <Eeee />
@@ -83,7 +82,7 @@ ruleTester.run(RULE_NAME, rule, {
     },
     {
       // whitepace tricky case
-      code: dedent`
+      code: /* tsx */ `
         <section>
           git<>
             <b>hub</b>.
@@ -93,8 +92,8 @@ ruleTester.run(RULE_NAME, rule, {
         </section>
       `,
       errors: [
-        { type: NodeType.JSXFragment, line: 2, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
-        { type: NodeType.JSXFragment, line: 6, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
+        { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
+        { type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
       ],
     },
     {
@@ -102,7 +101,7 @@ ruleTester.run(RULE_NAME, rule, {
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" }],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const Comp = () => (
           <html>
             <React.Fragment />
@@ -110,13 +109,13 @@ ruleTester.run(RULE_NAME, rule, {
         );
       `,
       errors: [
-        { type: NodeType.JSXElement, line: 3, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
-        { type: NodeType.JSXElement, line: 3, messageId: "NO_USELESS_FRAGMENT" },
+        { type: NodeType.JSXElement, messageId: "NO_USELESS_FRAGMENT_IN_BUILT_IN" },
+        { type: NodeType.JSXElement, messageId: "NO_USELESS_FRAGMENT" },
       ],
     },
     // Ensure allowExpressions still catches expected violations
     {
-      code: "<><Foo>{moo}</Foo></>",
+      code: /* tsx */ `<><Foo>{moo}</Foo></>`,
       errors: [{ type: NodeType.JSXFragment, messageId: "NO_USELESS_FRAGMENT" }],
     },
   ],
@@ -135,32 +134,32 @@ ruleTester.run(RULE_NAME, rule, {
     "<Fooo content={<>eeee ee eeeeeee eeeeeeee</>} />",
     "<>{foos.map(foo => foo)}</>",
     "<>{moo}</>",
-    dedent`
+    /* tsx */ `
       <>
         {moo}
       </>
     `,
-    dedent`
+    /* tsx */ `
       <>{children}</>
     `,
-    dedent`
+    /* tsx */ `
       <>{props.children}</>
     `,
-    dedent`
+    /* tsx */ `
       <>
         {children}
         {moo}
       </>
     `,
-    dedent`
+    /* tsx */ `
       <>
         {props.children}
         {moo}
       </>
     `,
-    dedent`<>{cloneElement(children, { ref: childrenRef })}</>`,
+    /* tsx */ `<>{cloneElement(children, { ref: childrenRef })}</>`,
     {
-      code: dedent`
+      code: /* tsx */ `
         <React.SomeFragment>
           {<Foo />}
         </React.SomeFragment>
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.spec.ts
index 6818f8c02..31b4df37f 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-destructuring-assignment.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTester } from "../../../../../test";
 import rule, { RULE_NAME } from "./prefer-destructuring-assignment";
 
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = (props) => {
             const { h, i } = hi
             return <div id={props.id} className={props.className} />
@@ -22,7 +20,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function App(props) {
             return <div id={props.id} className={props.className} />
         }
@@ -37,7 +35,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { forwardRef } from "react";
 
         interface Props {
@@ -58,7 +56,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { memo } from "react";
 
         interface Props {
@@ -79,7 +77,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { memo, forwardRef } from "react";
 
         interface Props {
@@ -104,7 +102,7 @@ ruleTester.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
         export function hof(namespace) {
           const initialState = {
               bounds: null,
@@ -118,7 +116,7 @@ ruleTester.run(RULE_NAME, rule, {
           }
       }
     `,
-    dedent`
+    /* tsx */ `
       export function hof(namespace) {
           const initialState = {
               bounds: null,
@@ -136,12 +134,12 @@ ruleTester.run(RULE_NAME, rule, {
       }
     `,
     "const App = ({ id, className }) => (<div id={id} className={className} />)",
-    dedent`
+    /* tsx */ `
       const App = ({ id, className }) => {
           return <div id={id} className={className} />
       }
     `,
-    dedent`
+    /* tsx */ `
       const App = ({ id, className }) => {
           return <div id={id} className={className} /> }
     `,
@@ -149,25 +147,25 @@ ruleTester.run(RULE_NAME, rule, {
     "const Component = (props) => (<div id={id} props={props} />)",
     "const App = (props, { color }) => (<div id={id} props={props} color={color} />)",
     "const Component = (props, { color }) => (<div id={id} props={props} color={color} />)",
-    dedent`
+    /* tsx */ `
       const div = styled.div\`
       & .button {
           border-radius: \${props => props.borderRadius}px;
       }
       \`
     `,
-    dedent`
+    /* tsx */ `
       export default (context: $Context) => ({
           foo: context.bar
       })
     `,
-    dedent`
+    /* tsx */ `
       function App({ context }) {
           const d = context.describe()
           return <div>{d}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       const obj = {
           foo(arg) {
               const a = arg.func()
@@ -175,7 +173,7 @@ ruleTester.run(RULE_NAME, rule, {
           }
       }
     `,
-    dedent`
+    /* tsx */ `
       const columns = [
           {
               render: (val) => {
@@ -191,7 +189,7 @@ ruleTester.run(RULE_NAME, rule, {
               }
           ]
     `,
-    dedent`
+    /* tsx */ `
       const columns = [
           {
               render: val => <span>{val}</span>
@@ -210,7 +208,7 @@ ruleTester.run(RULE_NAME, rule, {
               }
           ]
     `,
-    dedent`
+    /* tsx */ `
       export default (fileName) => {
           const match = fileName.match(/some expression/)
           if (match) {
@@ -219,14 +217,14 @@ ruleTester.run(RULE_NAME, rule, {
           return null
       }
     `,
-    dedent`
+    /* tsx */ `
       import { useContext } from 'react'
       const App = (props) => {
           const {foo} = useContext(aContext)
           return <div>{foo}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       import { useContext } from 'react'
       import dedent from 'dedent'
       const App = (props) => {
@@ -234,14 +232,14 @@ ruleTester.run(RULE_NAME, rule, {
           return <div>{foo.test}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       import { useContext } from 'react'
       const App = (props) => {
           const foo = useContext(aContext)
           return <div>{foo?.test}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       import { forwardRef } from "react";
 
       interface Props {
@@ -255,7 +253,7 @@ ruleTester.run(RULE_NAME, rule, {
           }
       );
     `,
-    dedent`
+    /* tsx */ `
       import { memo } from "react";
 
       interface Props {
@@ -269,7 +267,7 @@ ruleTester.run(RULE_NAME, rule, {
           }
       );
     `,
-    dedent`
+    /* tsx */ `
       import { memo, forwardRef } from "react";
 
       interface Props {
@@ -285,14 +283,14 @@ ruleTester.run(RULE_NAME, rule, {
           )
       );
     `,
-    dedent`
+    /* tsx */ `
       import { useContext } from 'react'
       const App = (props) => {
           const foo = useContext(aContext)
           return <div>{foo.test}</div>
       }
     `,
-    dedent`
+    /* tsx */ `
       export const DeleteRangeUndoMutationFactory = (
           accessor: IAccessor,
           params: IDeleteRangeMutationParams
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.spec.ts
index 6b409adb4..42b429e85 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-read-only-props.spec.ts
@@ -1,12 +1,10 @@
-import dedent from "dedent";
-
 import { allValid, ruleTesterWithTypes } from "../../../../../test";
 import rule, { RULE_NAME } from "./prefer-read-only-props";
 
 ruleTesterWithTypes.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = (props: { id: string; className: string }) => {
             return <div id={props.id} className={props.className} />
         }
@@ -18,7 +16,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         function App(props: { id: string; className: string }) {
             return <div id={props.id} className={props.className} />
         }
@@ -30,7 +28,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = function (props: { id: string; className: string }) {
             return <div id={props.id} className={props.className} />
         }
@@ -42,7 +40,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = function ({ id, className }: { id: string; className: string }) {
             return <div id={id} className={className} />
         }
@@ -54,7 +52,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         const App = function ({ id, className }: { readonly id: string; className: string }) {
             return <div id={id} className={className} />
         }
@@ -66,7 +64,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { FC } from "react";
         const App: FC<{ id: string; className: string }> = (props) => {
             return <div id={props.id} className={props.className} />
@@ -79,7 +77,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { FC } from "react";
         const App: FC<{ id: string; className: string }> = ({ id, className }) => {
             return <div id={id} className={className} />
@@ -92,7 +90,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         export const App: React.FC<{ id: string; className: string }> = (props) => {
@@ -106,7 +104,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import React from "react";
 
         export const App: React.FC<{ id: string; className: string } | { readonly id: string; readonly className: string }> = (props) => {
@@ -120,7 +118,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: dedent`
+      code: /* tsx */ `
         import { FC } from "react";
 
         const defaultProps = { id: "default-id", className: "default-class" };
@@ -139,7 +137,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
   ],
   valid: [
     ...allValid,
-    dedent`
+    /* tsx */ `
       import React from "react";
 
       type DeepReadonly<T> = Readonly<{[K in keyof T]: T[K] extends (number | string | symbol) ? Readonly<T[K]> : T[K] extends Array<infer A> ? Readonly<Array<DeepReadonly<A>>> : DeepReadonly<T[K]>;}>;
@@ -148,7 +146,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         return <div className={props.className} id={props.id} />
       }
     `,
-    dedent`
+    /* tsx */ `
       import React from "react";
       import { ReadonlyDeep } from "type-fest";
 
@@ -156,24 +154,24 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
         return <div className={props.className} id={props.id} />
       }
     `,
-    dedent`
+    /* tsx */ `
       const App = function ({ id, className }: { readonly id: string; readonly className: string }) {
           return <div id={id} className={className} />
       }
     `,
-    dedent`
+    /* tsx */ `
       import { FC } from "react";
       const App: FC<{ readonly id: string; readonly className: string }> = (props) => {
           return <div id={props.id} className={props.className} />
       }
     `,
-    dedent`
+    /* tsx */ `
       import { FC } from "react";
       const App: FC<{ readonly id: string; readonly className: string }> = ({ id, className }) => {
           return <div id={id} className={className} />
       }
     `,
-    dedent`
+    /* tsx */ `
       import { FC } from "react";
 
       const defaultProps = { id: "default-id", className: "default-class" } as const;
@@ -183,7 +181,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div id={id} className={className} />
       }
     `,
-    dedent`
+    /* tsx */ `
       import { FC } from "react";
 
       const defaultProps = { id: "default-id", className: "default-class" } as const;
@@ -192,7 +190,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div id={id} className={className} />
       }
     `,
-    dedent`
+    /* tsx */ `
       import { FC } from "react";
 
       const defaultProps = { id: "default-id", className: "default-class" } as const;
@@ -200,7 +198,7 @@ ruleTesterWithTypes.run(RULE_NAME, rule, {
           return <div id={id} className={className} />
       }
     `,
-    dedent`
+    /* tsx */ `
       const defaultProps = { id: "default-id", className: "default-class" } as const;
       const App = ({ id, className }: typeof defaultProps) => {
           return <div id={id} className={className} />
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.spec.ts
index 8526058bd..25db14987 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-boolean.spec.ts
@@ -4,14 +4,14 @@ import rule, { RULE_NAME } from "./prefer-shorthand-boolean";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<App foo={true} />",
+      code: /* tsx */ `<App foo={true} />`,
       errors: [{
         data: { propName: "foo" },
         messageId: "PREFER_SHORTHAND_BOOLEAN",
       }],
     },
     {
-      code: "<App foo={true} bar />",
+      code: /* tsx */ `<App foo={true} bar />`,
       errors: [{
         data: { propName: "foo" },
         messageId: "PREFER_SHORTHAND_BOOLEAN",
diff --git a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.spec.ts b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.spec.ts
index fefe387fd..87dc7e87d 100644
--- a/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.spec.ts
+++ b/packages/plugins/eslint-plugin-react-x/src/rules/prefer-shorthand-fragment.spec.ts
@@ -4,7 +4,7 @@ import rule, { RULE_NAME } from "./prefer-shorthand-fragment";
 ruleTester.run(RULE_NAME, rule, {
   invalid: [
     {
-      code: "<React.Fragment><div /></React.Fragment>",
+      code: /* tsx */ `<React.Fragment><div /></React.Fragment>`,
       errors: [
         {
           messageId: "PREFER_SHORTHAND_FRAGMENT",
@@ -12,7 +12,7 @@ ruleTester.run(RULE_NAME, rule, {
       ],
     },
     {
-      code: "<Fragment><div /></Fragment>",
+      code: /* tsx */ `<Fragment><div /></Fragment>`,
       errors: [
         {
           messageId: "PREFER_SHORTHAND_FRAGMENT",
diff --git a/test/cases/valid/components.ts b/test/cases/valid/components.ts
index 725c06181..ed216c5d5 100644
--- a/test/cases/valid/components.ts
+++ b/test/cases/valid/components.ts
@@ -1,28 +1,26 @@
-import dedent from "dedent";
-
 export const createElementComponent = "const CreateElementComponent = () => React.createElement('div', null, null)";
 
 export const arrowFunctionComponent = "const FunctionComponent = () => <div></div>";
 
-export const functionComponent = dedent`
+export const functionComponent = /* tsx */ `
   function FunctionComponent() {
       return <div></div>
   }
 `;
 
-export const memoComponent = dedent`
+export const memoComponent = /* tsx */ `
   import { memo } from 'react'
 
   const MemoComponent = memo(() => <div></div>)
 `;
 
-export const forwardRefComponent = dedent`
+export const forwardRefComponent = /* tsx */ `
   import { forwardRef } from 'react'
 
   const ForwardRefComponent = forwardRef((props, ref) => <div></div>)
 `;
 
-export const memoForwardRefComponent = dedent`
+export const memoForwardRefComponent = /* tsx */ `
   import { memo, forwardRef } from 'react'
 
   const MemoForwardRefComponent = memo(forwardRef((props, ref) => <div></div>))
diff --git a/test/cases/valid/functions.ts b/test/cases/valid/functions.ts
index ccd4baa38..d531aa695 100644
--- a/test/cases/valid/functions.ts
+++ b/test/cases/valid/functions.ts
@@ -1,8 +1,6 @@
-import dedent from "dedent";
-
 export const fn = "const fn = () => null";
 
-export const fnReturn = dedent`
+export const fnReturn = /* tsx */ `
   function fnWithReturn() {
       return null
   }
@@ -12,13 +10,13 @@ export const fnReturnJSX = "const footer = () => <div />";
 
 export const renderFunction = "const renderFunction = (id: string, name: string) => <div key={id} id={id}>{name}</div>";
 
-export const renderFunctionReturn = dedent`
+export const renderFunctionReturn = /* tsx */ `
   function renderFunctionWithReturn(id: string, name: string) {
       return <div key={id} id={id}>{name}</div>
   }
 `;
 
-export const renderFunctionNestedRenderFunction = dedent`
+export const renderFunctionNestedRenderFunction = /* tsx */ `
   function renderFunctionWithNestedRenderFunction(id: string, name: string) {
       return <Component footer={() => <div />} />
   }