From 9a767d6a716647ea7c8ae89533640fd74259ef9b Mon Sep 17 00:00:00 2001
From: Micha Reiser <micha@rome.tools>
Date: Tue, 20 Sep 2022 11:18:24 +0200
Subject: [PATCH] test(rome_js_formatter): Add prettier's JSX tests (#3255)

---
 .../rome_js_formatter/tests/prettier_tests.rs |    2 +-
 ...k-line-between-specifiers.js.prettier-snap |    2 -
 .../blank-line-between-specifiers.js.snap     |   80 -
 .../specs/prettier/js/if/trailing_comment.js  |    7 -
 .../prettier/js/if/trailing_comment.js.snap   |   27 +-
 .../js/import-assertions/re-export.js         |    2 +-
 .../re-export.js.prettier-snap                |    2 +-
 .../specs/prettier/js/method-chain/13018.js   |    8 +
 .../js/method-chain/13018.js.prettier-snap    |   20 +
 .../prettier/js/method-chain/13018.js.snap    |   69 +
 .../specs/prettier/js/range/function-body.js  |    3 +
 .../js/range/function-body.js.prettier-snap   |    3 +
 .../prettier/js/range/function-body.js.snap   |   37 +
 .../tests/specs/prettier/js/record/spread.js  |    1 -
 .../specs/prettier/js/record/spread.js.snap   |    3 +-
 .../prettier/js/strings/multiline-literal.js  |    9 +
 .../multiline-literal.js.prettier-snap        |   10 +
 .../js/strings/multiline-literal.js.snap      |   55 +
 .../test_declarations.js.prettier-snap        |   80 +-
 .../test_declarations.js.snap                 |   92 +-
 .../prettier/jsx/attr-element/attr-element.js |    2 +
 .../attr-element.js.prettier-snap             |   12 +
 .../relational-operators.js                   |   19 +
 .../relational-operators.js.prettier-snap     |   19 +
 .../tests/specs/prettier/jsx/do/do.js         |    5 +
 .../specs/prettier/jsx/do/do.js.prettier-snap |    5 +
 .../tests/specs/prettier/jsx/do/do.js.snap    |   61 +
 .../tests/specs/prettier/jsx/escape/escape.js |    1 +
 .../jsx/escape/escape.js.prettier-snap        |    1 +
 .../tests/specs/prettier/jsx/escape/nbsp.js   |   13 +
 .../prettier/jsx/escape/nbsp.js.prettier-snap |    9 +
 .../tests/specs/prettier/jsx/fbt/test.js      |  115 ++
 .../prettier/jsx/fbt/test.js.prettier-snap    |  104 ++
 .../tests/specs/prettier/jsx/fbt/test.js.snap |  281 ++++
 .../specs/prettier/jsx/fragment/fragment.js   |   72 +
 .../jsx/fragment/fragment.js.prettier-snap    |   72 +
 .../prettier/jsx/fragment/fragment.js.snap    |  202 +++
 .../specs/prettier/jsx/ignore/jsx_ignore.js   |   56 +
 .../jsx/ignore/jsx_ignore.js.prettier-snap    |   55 +
 .../prettier/jsx/ignore/jsx_ignore.js.snap    |  193 +++
 .../prettier/jsx/multiline-assign/test.js     |   19 +
 .../multiline-assign/test.js.prettier-snap    |   31 +
 .../jsx/namespace/jsx_namespaced_name.js      |    3 +
 .../jsx_namespaced_name.js.prettier-snap      |    3 +
 .../tests/specs/prettier/jsx/newlines/test.js |   94 ++
 .../jsx/newlines/test.js.prettier-snap        |   57 +
 .../specs/prettier/jsx/newlines/test.js.snap  |  193 +++
 .../specs/prettier/jsx/newlines/windows.js    |    3 +
 .../jsx/newlines/windows.js.prettier-snap     |    1 +
 .../jsx/significant-space/comments.js         |    7 +
 .../comments.js.prettier-snap                 |    7 +
 .../prettier/jsx/significant-space/test.js    |   74 +
 .../significant-space/test.js.prettier-snap   |  117 ++
 .../jsx/significant-space/test.js.snap        |  290 ++++
 .../single-attribute-per-line.js              |   27 +
 ...single-attribute-per-line.js.prettier-snap |   38 +
 .../specs/prettier/jsx/split-attrs/test.js    |   49 +
 .../jsx/split-attrs/test.js.prettier-snap     |  170 ++
 .../prettier/jsx/split-attrs/test.js.snap     |  261 ++++
 .../specs/prettier/jsx/spread/attribute.js    |   25 +
 .../jsx/spread/attribute.js.prettier-snap     |   36 +
 .../prettier/jsx/spread/attribute.js.snap     |  115 ++
 .../tests/specs/prettier/jsx/spread/child.js  |   23 +
 .../jsx/spread/child.js.prettier-snap         |   32 +
 .../specs/prettier/jsx/spread/child.js.snap   |  116 ++
 .../prettier/jsx/stateless-arrow-fn/test.js   |   73 +
 .../stateless-arrow-fn/test.js.prettier-snap  |  170 ++
 .../jsx/stateless-arrow-fn/test.js.snap       |  300 ++++
 .../jsx/template/styled-components.js         |   18 +
 .../styled-components.js.prettier-snap        |   19 +
 .../jsx/template/styled-components.js.snap    |   75 +
 .../specs/prettier/jsx/text-wrap/test.js      |  458 ++++++
 .../jsx/text-wrap/test.js.prettier-snap       |  570 +++++++
 .../specs/prettier/jsx/text-wrap/test.js.snap | 1390 +++++++++++++++++
 .../tests/specs/prettier/prepare_tests.js     |    8 +
 .../conditional-types/issue-13275.ts          |    1 +
 .../issue-13275.ts.prettier-snap              |    1 +
 .../enum/computed-members.ts.prettier-snap    |    6 +-
 .../typescript/enum/computed-members.ts.snap  |    8 +-
 .../jsdoc_only_types.ts.prettier-snap         |    4 +-
 .../error-recovery/jsdoc_only_types.ts.snap   |    6 +-
 .../prettier/typescript/interface2/break.ts   |    4 +-
 .../typescript/interface2/break.ts.snap       |   61 +-
 .../prettier/typescript/literal/multiline.ts  |    6 +
 .../literal/multiline.ts.prettier-snap        |    7 +
 .../typescript/literal/multiline.ts.snap      |   47 +
 .../typescript/typeof-this/decorators.ts      |    6 +
 .../typeof-this/decorators.ts.prettier-snap   |    6 +
 .../typescript/typeof-this/decorators.ts.snap |   46 +
 .../typescript/typeof-this/typeof-this.ts     |    3 +
 .../typeof-this/typeof-this.ts.prettier-snap  |    3 +
 91 files changed, 6710 insertions(+), 186 deletions(-)
 delete mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.prettier-snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.snap
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts.prettier-snap

diff --git a/crates/rome_js_formatter/tests/prettier_tests.rs b/crates/rome_js_formatter/tests/prettier_tests.rs
index e3fbc3c72aa..503668524ee 100644
--- a/crates/rome_js_formatter/tests/prettier_tests.rs
+++ b/crates/rome_js_formatter/tests/prettier_tests.rs
@@ -31,7 +31,7 @@ struct TestInfo {
 
 mod check_reformat;
 
-tests_macros::gen_tests! {"tests/specs/prettier/{js,typescript}/**/*.{js,ts,jsx,tsx}", crate::test_snapshot, "script"}
+tests_macros::gen_tests! {"tests/specs/prettier/{js,typescript,jsx}/**/*.{js,ts,jsx,tsx}", crate::test_snapshot, "script"}
 
 const PRETTIER_IGNORE: &str = "prettier-ignore";
 const ROME_IGNORE: &str = "rome-ignore format: prettier ignore";
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.prettier-snap
index 82cd20637b6..8856b3df341 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.prettier-snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.prettier-snap
@@ -1,7 +1,6 @@
 export {
   // a
   foo1,
-
   // b
   bar1,
   baz1,
@@ -14,7 +13,6 @@ const baz2 = 1;
 export {
   // a
   foo2,
-
   // b
   bar2,
   baz2,
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.snap
deleted file mode 100644
index 51e23774716..00000000000
--- a/crates/rome_js_formatter/tests/specs/prettier/js/export/blank-line-between-specifiers.js.snap
+++ /dev/null
@@ -1,80 +0,0 @@
----
-source: crates/rome_js_formatter/tests/prettier_tests.rs
----
-
-# Input
-
-```js
-export {
-  // a
-  foo1,
-
-  // b
-  bar1,
-  baz1,
-} from "mod";
-
-const foo2 = 1;
-const bar2 = 1;
-const baz2 = 1;
-
-export {
-  // a
-  foo2,
-
-  // b
-  bar2,
-  baz2,
-};
-```
-
-
-# Prettier differences
-
-```diff
---- Prettier
-+++ Rome
-@@ -1,7 +1,6 @@
- export {
-   // a
-   foo1,
--
-   // b
-   bar1,
-   baz1,
-@@ -14,7 +13,6 @@
- export {
-   // a
-   foo2,
--
-   // b
-   bar2,
-   baz2,
-```
-
-# Output
-
-```js
-export {
-  // a
-  foo1,
-  // b
-  bar1,
-  baz1,
-} from "mod";
-
-const foo2 = 1;
-const bar2 = 1;
-const baz2 = 1;
-
-export {
-  // a
-  foo2,
-  // b
-  bar2,
-  baz2,
-};
-```
-
-
-
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js b/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js
index 9b745ed0727..575cf4d57d2 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js
@@ -10,10 +10,3 @@ if (
 ) {
   a;
 }
-
-if (
-	// comment
-	1
-) {
-	b;
-}
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js.snap
index 964019986f2..1ff518ef544 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js.snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/if/trailing_comment.js.snap
@@ -1,5 +1,7 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: js/if/trailing_comment.js
 ---
 
 # Input
@@ -17,13 +19,6 @@ if (
 ) {
   a;
 }
-
-if (
-	// comment
-	1
-) {
-	b;
-}
 ```
 
 
@@ -42,17 +37,6 @@ if (
  }
  if (code === 92) {
    /* '\' */
-@@ -16,3 +15,10 @@
- ) {
-   a;
- }
-+
-+if (
-+  // comment
-+  1
-+) {
-+  b;
-+}
 ```
 
 # Output
@@ -75,13 +59,6 @@ if (
 ) {
   a;
 }
-
-if (
-  // comment
-  1
-) {
-  b;
-}
 ```
 
 
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js b/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js
index dd9640ec20a..f7f9640a868 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js
@@ -1,3 +1,3 @@
-export { foo2 } from "foo.json" assert { type: "json" };
+export { default as foo2 } from "foo.json" assert { type: "json" };
 export * from "foo.json" assert { type: "json" };
 export * as foo3 from "foo.json" assert { type: "json" };
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js.prettier-snap
index dd9640ec20a..f7f9640a868 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js.prettier-snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/import-assertions/re-export.js.prettier-snap
@@ -1,3 +1,3 @@
-export { foo2 } from "foo.json" assert { type: "json" };
+export { default as foo2 } from "foo.json" assert { type: "json" };
 export * from "foo.json" assert { type: "json" };
 export * as foo3 from "foo.json" assert { type: "json" };
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js b/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js
new file mode 100644
index 00000000000..a0a4dc5ebf2
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js
@@ -0,0 +1,8 @@
+foo(_a).bar().leet();
+foo(-a).bar().leet();
+foo(+a).bar().leet();
+foo(~a).bar().leet();
+foo(++a).bar().leet();
+foo(--a).bar().leet();
+foo(a++).bar().leet();
+foo(a--).bar().leet();
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.prettier-snap
new file mode 100644
index 00000000000..7c19e0fb00b
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.prettier-snap
@@ -0,0 +1,20 @@
+foo(_a).bar().leet();
+foo(-a).bar().leet();
+foo(+a)
+  .bar()
+  .leet();
+foo(~a)
+  .bar()
+  .leet();
+foo(++a)
+  .bar()
+  .leet();
+foo(--a)
+  .bar()
+  .leet();
+foo(a++)
+  .bar()
+  .leet();
+foo(a--)
+  .bar()
+  .leet();
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.snap
new file mode 100644
index 00000000000..d3a5c2b1867
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/method-chain/13018.js.snap
@@ -0,0 +1,69 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: js/method-chain/13018.js
+---
+
+# Input
+
+```js
+foo(_a).bar().leet();
+foo(-a).bar().leet();
+foo(+a).bar().leet();
+foo(~a).bar().leet();
+foo(++a).bar().leet();
+foo(--a).bar().leet();
+foo(a++).bar().leet();
+foo(a--).bar().leet();
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -1,20 +1,8 @@
+ foo(_a).bar().leet();
+ foo(-a).bar().leet();
+-foo(+a)
+-  .bar()
+-  .leet();
+-foo(~a)
+-  .bar()
+-  .leet();
+-foo(++a)
+-  .bar()
+-  .leet();
+-foo(--a)
+-  .bar()
+-  .leet();
+-foo(a++)
+-  .bar()
+-  .leet();
+-foo(a--)
+-  .bar()
+-  .leet();
++foo(+a).bar().leet();
++foo(~a).bar().leet();
++foo(++a).bar().leet();
++foo(--a).bar().leet();
++foo(a++).bar().leet();
++foo(a--).bar().leet();
+```
+
+# Output
+
+```js
+foo(_a).bar().leet();
+foo(-a).bar().leet();
+foo(+a).bar().leet();
+foo(~a).bar().leet();
+foo(++a).bar().leet();
+foo(--a).bar().leet();
+foo(a++).bar().leet();
+foo(a--).bar().leet();
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js b/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js
new file mode 100644
index 00000000000..1705cd72985
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js
@@ -0,0 +1,3 @@
+let fn =a((x ) => {
+<<<PRETTIER_RANGE_START>>>  quux (); //<<<PRETTIER_RANGE_END>>>
+});
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.prettier-snap
new file mode 100644
index 00000000000..b9dc6f74df6
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.prettier-snap
@@ -0,0 +1,3 @@
+let fn = a((x) => {
+  quux(); //
+});
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.snap
new file mode 100644
index 00000000000..daadadf8510
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/range/function-body.js.snap
@@ -0,0 +1,37 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: js/range/function-body.js
+---
+
+# Input
+
+```js
+let fn =a((x ) => {
+  quux (); //
+});
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -1,3 +1,3 @@
+-let fn = a((x) => {
++let fn =a((x ) => {
+   quux(); //
+ });
+```
+
+# Output
+
+```js
+let fn =a((x ) => {
+  quux(); //
+});
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js b/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js
index 765d4270d55..31bfe0c7667 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js
@@ -4,4 +4,3 @@ const taskLater = #{ ...taskNow, status: "DONE" }
 
 // A reminder: The ordering of keys in record literals does not affect equality (and is not retained)
 assert(taskLater === #{ status: "DONE", title: formData.title, id: 42 })
-
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js.snap
index c5086def062..b45e5e818ec 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js.snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/record/spread.js.snap
@@ -1,5 +1,7 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: js/record/spread.js
 ---
 
 # Input
@@ -11,7 +13,6 @@ const taskLater = #{ ...taskNow, status: "DONE" }
 
 // A reminder: The ordering of keys in record literals does not affect equality (and is not retained)
 assert(taskLater === #{ status: "DONE", title: formData.title, id: 42 })
-
 ```
 
 
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js b/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js
new file mode 100644
index 00000000000..fcecf64f399
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js
@@ -0,0 +1,9 @@
+// https://github.com/prettier/prettier/pull/13274
+
+const loremIpsumFooBazBar1 = 'Multiline string\
+         Multiline string\
+'
+
+const loremIpsumFooBazBar2 = 'Multiline string\
+         Multiline string\
+         Multiline string'
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.prettier-snap
new file mode 100644
index 00000000000..5ccb636b7e7
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.prettier-snap
@@ -0,0 +1,10 @@
+// https://github.com/prettier/prettier/pull/13274
+
+const loremIpsumFooBazBar1 = "Multiline string\
+         Multiline string\
+";
+
+const loremIpsumFooBazBar2 =
+  "Multiline string\
+         Multiline string\
+         Multiline string";
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.snap
new file mode 100644
index 00000000000..caed317319a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/strings/multiline-literal.js.snap
@@ -0,0 +1,55 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: js/strings/multiline-literal.js
+---
+
+# Input
+
+```js
+// https://github.com/prettier/prettier/pull/13274
+
+const loremIpsumFooBazBar1 = 'Multiline string\
+         Multiline string\
+'
+
+const loremIpsumFooBazBar2 = 'Multiline string\
+         Multiline string\
+         Multiline string'
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -1,6 +1,7 @@
+ // https://github.com/prettier/prettier/pull/13274
+ 
+-const loremIpsumFooBazBar1 = "Multiline string\
++const loremIpsumFooBazBar1 =
++  "Multiline string\
+          Multiline string\
+ ";
+ 
+```
+
+# Output
+
+```js
+// https://github.com/prettier/prettier/pull/13274
+
+const loremIpsumFooBazBar1 =
+  "Multiline string\
+         Multiline string\
+";
+
+const loremIpsumFooBazBar2 =
+  "Multiline string\
+         Multiline string\
+         Multiline string";
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.prettier-snap
index 3bddc7bb29d..c07928430cd 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.prettier-snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.prettier-snap
@@ -85,43 +85,75 @@ skip(`does something really long and complicated so I have to write a very long
 
 skip("does something really long and complicated so I have to write a very long name for the test", () => {});
 
-test.step("does something really long and complicated so I have to write a very long name for the test", () => {});
+test.step(
+  "does something really long and complicated so I have to write a very long name for the test",
+  () => {},
+);
 
-test.step(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+test.step(
+  `does something really long and complicated so I have to write a very long name for the test`,
+  () => {},
+);
 
-test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});
+test.describe(
+  "does something really long and complicated so I have to write a very long name for the test",
+  () => {},
+);
 
-test.describe(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+test.describe(
+  `does something really long and complicated so I have to write a very long name for the test`,
+  () => {},
+);
 
-test.describe
-  .only("does something really long and complicated so I have to write a very long name for the test", () => {});
+test.describe.only(
+  "does something really long and complicated so I have to write a very long name for the test",
+  () => {},
+);
 
-test.describe
-  .only(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+test.describe.only(
+  `does something really long and complicated so I have to write a very long name for the test`,
+  () => {},
+);
 
-test.describe
-  .parallel("does something really long and complicated so I have to write a very long name for the test", () => {});
+test.describe.parallel(
+  "does something really long and complicated so I have to write a very long name for the test",
+  () => {},
+);
 
-test.describe
-  .parallel(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+test.describe.parallel(
+  `does something really long and complicated so I have to write a very long name for the test`,
+  () => {},
+);
 
-test.describe.parallel
-  .only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});
+test.describe.parallel.only(
+  "does something really long and complicated so I have to write a very long name for the testThis is a very",
+  () => {},
+);
 
-test.describe.parallel
-  .only(`does something really long and complicated so I have to write a very long name for the testThis is a very`, () => {});
+test.describe.parallel.only(
+  `does something really long and complicated so I have to write a very long name for the testThis is a very`,
+  () => {},
+);
 
-test.describe
-  .serial("does something really long and complicated so I have to write a very long name for the test", () => {});
+test.describe.serial(
+  "does something really long and complicated so I have to write a very long name for the test",
+  () => {},
+);
 
-test.describe
-  .serial(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+test.describe.serial(
+  `does something really long and complicated so I have to write a very long name for the test`,
+  () => {},
+);
 
-test.describe.serial
-  .only("does something really long and complicated so I have to write a very long name for the test", () => {});
+test.describe.serial.only(
+  "does something really long and complicated so I have to write a very long name for the test",
+  () => {},
+);
 
-test.describe.serial
-  .only(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+test.describe.serial.only(
+  `does something really long and complicated so I have to write a very long name for the test`,
+  () => {},
+);
 
 // Should break
 
diff --git a/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.snap b/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.snap
index 2b6182c096b..a3b6c802729 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/js/test-declarations/test_declarations.js.snap
@@ -1,5 +1,7 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: js/test-declarations/test_declarations.js
 ---
 
 # Input
@@ -175,53 +177,97 @@ it(
 ```diff
 --- Prettier
 +++ Rome
-@@ -93,35 +93,25 @@
+@@ -85,75 +85,33 @@
  
- test.describe(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+ skip("does something really long and complicated so I have to write a very long name for the test", () => {});
  
--test.describe
--  .only("does something really long and complicated so I have to write a very long name for the test", () => {});
+-test.step(
+-  "does something really long and complicated so I have to write a very long name for the test",
+-  () => {},
+-);
++test.step("does something really long and complicated so I have to write a very long name for the test", () => {});
+ 
+-test.step(
+-  `does something really long and complicated so I have to write a very long name for the test`,
+-  () => {},
+-);
++test.step(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+ 
+-test.describe(
+-  "does something really long and complicated so I have to write a very long name for the test",
+-  () => {},
+-);
++test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});
+ 
+-test.describe(
+-  `does something really long and complicated so I have to write a very long name for the test`,
+-  () => {},
+-);
++test.describe(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+ 
+-test.describe.only(
+-  "does something really long and complicated so I have to write a very long name for the test",
+-  () => {},
+-);
 +test.describe.only("does something really long and complicated so I have to write a very long name for the test", () => {});
  
--test.describe
--  .only(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+-test.describe.only(
+-  `does something really long and complicated so I have to write a very long name for the test`,
+-  () => {},
+-);
 +test.describe.only(`does something really long and complicated so I have to write a very long name for the test`, () => {});
  
--test.describe
--  .parallel("does something really long and complicated so I have to write a very long name for the test", () => {});
+-test.describe.parallel(
+-  "does something really long and complicated so I have to write a very long name for the test",
+-  () => {},
+-);
 +test.describe.parallel("does something really long and complicated so I have to write a very long name for the test", () => {});
  
--test.describe
--  .parallel(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+-test.describe.parallel(
+-  `does something really long and complicated so I have to write a very long name for the test`,
+-  () => {},
+-);
 +test.describe.parallel(`does something really long and complicated so I have to write a very long name for the test`, () => {});
  
--test.describe.parallel
--  .only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});
+-test.describe.parallel.only(
+-  "does something really long and complicated so I have to write a very long name for the testThis is a very",
+-  () => {},
+-);
 +test.describe.parallel.only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});
  
--test.describe.parallel
--  .only(`does something really long and complicated so I have to write a very long name for the testThis is a very`, () => {});
+-test.describe.parallel.only(
+-  `does something really long and complicated so I have to write a very long name for the testThis is a very`,
+-  () => {},
+-);
 +test.describe.parallel.only(`does something really long and complicated so I have to write a very long name for the testThis is a very`, () => {});
  
--test.describe
--  .serial("does something really long and complicated so I have to write a very long name for the test", () => {});
+-test.describe.serial(
+-  "does something really long and complicated so I have to write a very long name for the test",
+-  () => {},
+-);
 +test.describe.serial("does something really long and complicated so I have to write a very long name for the test", () => {});
  
--test.describe
--  .serial(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+-test.describe.serial(
+-  `does something really long and complicated so I have to write a very long name for the test`,
+-  () => {},
+-);
 +test.describe.serial(`does something really long and complicated so I have to write a very long name for the test`, () => {});
  
--test.describe.serial
--  .only("does something really long and complicated so I have to write a very long name for the test", () => {});
+-test.describe.serial.only(
+-  "does something really long and complicated so I have to write a very long name for the test",
+-  () => {},
+-);
 +test.describe.serial.only("does something really long and complicated so I have to write a very long name for the test", () => {});
  
--test.describe.serial
--  .only(`does something really long and complicated so I have to write a very long name for the test`, () => {});
+-test.describe.serial.only(
+-  `does something really long and complicated so I have to write a very long name for the test`,
+-  () => {},
+-);
 +test.describe.serial.only(`does something really long and complicated so I have to write a very long name for the test`, () => {});
  
  // Should break
  
-@@ -152,10 +142,7 @@
+@@ -184,10 +142,7 @@
    () => {},
  );
  
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js
new file mode 100644
index 00000000000..f31bd2306ce
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js
@@ -0,0 +1,2 @@
+<Foo prop=<Bar><Baz /></Bar> />;
+<Foo prop=<><Bar><Baz /></Bar></> />;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js.prettier-snap
new file mode 100644
index 00000000000..fc79981e98a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/attr-element/attr-element.js.prettier-snap
@@ -0,0 +1,12 @@
+<Foo
+  prop=<Bar>
+    <Baz />
+  </Bar>
+/>;
+<Foo
+  prop=<>
+    <Bar>
+      <Baz />
+    </Bar>
+  </>
+/>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js
new file mode 100644
index 00000000000..41d6bcc8b72
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js
@@ -0,0 +1,19 @@
+(<div />) < 5;
+<div /> > 5;
+(<div></div>) < 5;
+<div></div> > 5;
+
+<div /> <= 5;
+<div /> >= 5;
+<div></div> <= 5;
+<div></div> >= 5;
+
+(<div />) < <div />;
+<div /> > <div />;
+(<div></div>) < <div></div>;
+<div></div> > <div></div>;
+
+<div /> <= <div />;
+<div /> >= <div />;
+<div></div> <= <div></div>;
+<div></div> >= <div></div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js.prettier-snap
new file mode 100644
index 00000000000..41d6bcc8b72
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/binary-expressions/relational-operators.js.prettier-snap
@@ -0,0 +1,19 @@
+(<div />) < 5;
+<div /> > 5;
+(<div></div>) < 5;
+<div></div> > 5;
+
+<div /> <= 5;
+<div /> >= 5;
+<div></div> <= 5;
+<div></div> >= 5;
+
+(<div />) < <div />;
+<div /> > <div />;
+(<div></div>) < <div></div>;
+<div></div> > <div></div>;
+
+<div /> <= <div />;
+<div /> >= <div />;
+<div></div> <= <div></div>;
+<div></div> >= <div></div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js
new file mode 100644
index 00000000000..7890763ee5b
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js
@@ -0,0 +1,5 @@
+<div>
+  {do {
+	  1
+  }}
+</div>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.prettier-snap
new file mode 100644
index 00000000000..e3b5f2b7896
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.prettier-snap
@@ -0,0 +1,5 @@
+<div>
+  {do {
+    1;
+  }}
+</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.snap
new file mode 100644
index 00000000000..b08a2e5f23a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/do/do.js.snap
@@ -0,0 +1,61 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/do/do.js
+---
+
+# Input
+
+```js
+<div>
+  {do {
+	  1
+  }}
+</div>
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -1,5 +1,5 @@
+ <div>
+   {do {
+-    1;
++	  1
+   }}
+-</div>;
++</div>
+```
+
+# Output
+
+```js
+<div>
+  {do {
+	  1
+  }}
+</div>
+```
+
+
+# Errors
+```
+error[SyntaxError]: expected `}` but instead found `do`
+  ┌─ do.js:2:4
+  │
+2 │   {do {
+  │    ^^ unexpected
+
+error: Unexpected token. Did you mean `{'}'}` or `&rbrace;`?
+  ┌─ do.js:4:4
+  │
+4 │   }}
+  │    ^
+
+
+```
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js
new file mode 100644
index 00000000000..db12ce51b7a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js
@@ -0,0 +1 @@
+<div>&lt;</div>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js.prettier-snap
new file mode 100644
index 00000000000..167cd46e48d
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/escape.js.prettier-snap
@@ -0,0 +1 @@
+<div>&lt;</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js
new file mode 100644
index 00000000000..87d434f5f84
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js
@@ -0,0 +1,13 @@
+many_nbsp = <div>&nbsp; &nbsp; </div>
+single_nbsp = <div>&nbsp;</div>
+nbsp_with_newline =
+  <div>
+    &nbsp;
+  </div>
+
+many_raw_nbsp = <div>   </div>
+many_raw_spaces = <div>   </div>
+
+
+amp = <span>foo &amp; bar</span>
+raw_amp = <span>foo & bar</span>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js.prettier-snap
new file mode 100644
index 00000000000..af7aed664c7
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/escape/nbsp.js.prettier-snap
@@ -0,0 +1,9 @@
+many_nbsp = <div>&nbsp; &nbsp; </div>;
+single_nbsp = <div>&nbsp;</div>;
+nbsp_with_newline = <div>&nbsp;</div>;
+
+many_raw_nbsp = <div>   </div>;
+many_raw_spaces = <div> </div>;
+
+amp = <span>foo &amp; bar</span>;
+raw_amp = <span>foo & bar</span>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js
new file mode 100644
index 00000000000..1cc594b1957
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js
@@ -0,0 +1,115 @@
+x =
+  <fbt>
+    <fbt:param>
+      First
+    </fbt:param>,
+    <fbt:param>
+      Second
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt>
+    <fbt:param>
+      First
+    </fbt:param>
+    ,
+    <fbt:param>
+      Second
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt>
+    <fbt:param>First</fbt:param>,<fbt:param>Second</fbt:param>
+  </fbt>
+
+x =
+  <fbt>
+    <fbt:param>
+      First
+    </fbt:param>,<fbt:param>
+      Second
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt desc="example 1">
+    Prefix comes before
+    <fbt:param>
+      <b>
+        suffix
+      </b>
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt desc="example 2">
+    Prefix comes before
+    <fbt:param name="bold stuff">
+      <b>
+      suffix
+      </b>
+    </fbt:param>
+    <fbt:param name="a link">
+      <link href="#">
+        suffix
+      </link>
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt desc="example 3">
+    Count Chocula knows the the number
+    <fbt:enum enum-range={['one', 'two', 'three']} value={getValue()} />
+    is awesome
+  </fbt>
+
+x = (
+  <fbt>
+    {hour}:{minute}:{second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}
+    :
+    {minute}
+    :
+    {second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}:
+    {minute}:
+    {second}
+  </fbt>
+);
+
+first = (
+  <fbt>
+    Text<br />
+    More text<br />
+    And more<br />
+  </fbt>
+);
+
+second = (
+  <fbt>
+    Text<br />More text<br />And more<br />
+  </fbt>
+);
+
+third = (
+  <fbt>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </fbt>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.prettier-snap
new file mode 100644
index 00000000000..cf87039fe74
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.prettier-snap
@@ -0,0 +1,104 @@
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>,
+    <fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>
+    ,
+    <fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>,<fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>,<fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt desc="example 1">
+    Prefix comes before
+    <fbt:param>
+      <b>suffix</b>
+    </fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt desc="example 2">
+    Prefix comes before
+    <fbt:param name="bold stuff">
+      <b>suffix</b>
+    </fbt:param>
+    <fbt:param name="a link">
+      <link href="#">suffix</link>
+    </fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt desc="example 3">
+    Count Chocula knows the the number
+    <fbt:enum enum-range={["one", "two", "three"]} value={getValue()} />
+    is awesome
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}:{minute}:{second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}
+    :
+    {minute}
+    :
+    {second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}:
+    {minute}:
+    {second}
+  </fbt>
+);
+
+first = (
+  <fbt>
+    Text<br />
+    More text<br />
+    And more<br />
+  </fbt>
+);
+
+second = (
+  <fbt>
+    Text<br />More text<br />And more<br />
+  </fbt>
+);
+
+third = (
+  <fbt>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </fbt>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.snap
new file mode 100644
index 00000000000..ca247636882
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/fbt/test.js.snap
@@ -0,0 +1,281 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/fbt/test.js
+---
+
+# Input
+
+```js
+x =
+  <fbt>
+    <fbt:param>
+      First
+    </fbt:param>,
+    <fbt:param>
+      Second
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt>
+    <fbt:param>
+      First
+    </fbt:param>
+    ,
+    <fbt:param>
+      Second
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt>
+    <fbt:param>First</fbt:param>,<fbt:param>Second</fbt:param>
+  </fbt>
+
+x =
+  <fbt>
+    <fbt:param>
+      First
+    </fbt:param>,<fbt:param>
+      Second
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt desc="example 1">
+    Prefix comes before
+    <fbt:param>
+      <b>
+        suffix
+      </b>
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt desc="example 2">
+    Prefix comes before
+    <fbt:param name="bold stuff">
+      <b>
+      suffix
+      </b>
+    </fbt:param>
+    <fbt:param name="a link">
+      <link href="#">
+        suffix
+      </link>
+    </fbt:param>
+  </fbt>
+
+x =
+  <fbt desc="example 3">
+    Count Chocula knows the the number
+    <fbt:enum enum-range={['one', 'two', 'three']} value={getValue()} />
+    is awesome
+  </fbt>
+
+x = (
+  <fbt>
+    {hour}:{minute}:{second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}
+    :
+    {minute}
+    :
+    {second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}:
+    {minute}:
+    {second}
+  </fbt>
+);
+
+first = (
+  <fbt>
+    Text<br />
+    More text<br />
+    And more<br />
+  </fbt>
+);
+
+second = (
+  <fbt>
+    Text<br />More text<br />And more<br />
+  </fbt>
+);
+
+third = (
+  <fbt>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </fbt>
+);
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -80,15 +80,23 @@
+ 
+ first = (
+   <fbt>
+-    Text<br />
+-    More text<br />
+-    And more<br />
++    Text
++    <br />
++    More text
++    <br />
++    And more
++    <br />
+   </fbt>
+ );
+ 
+ second = (
+   <fbt>
+-    Text<br />More text<br />And more<br />
++    Text
++    <br />
++    More text
++    <br />
++    And more
++    <br />
+   </fbt>
+ );
+ 
+```
+
+# Output
+
+```js
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>,
+    <fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>
+    ,
+    <fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>,<fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt>
+    <fbt:param>First</fbt:param>,<fbt:param>Second</fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt desc="example 1">
+    Prefix comes before
+    <fbt:param>
+      <b>suffix</b>
+    </fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt desc="example 2">
+    Prefix comes before
+    <fbt:param name="bold stuff">
+      <b>suffix</b>
+    </fbt:param>
+    <fbt:param name="a link">
+      <link href="#">suffix</link>
+    </fbt:param>
+  </fbt>
+);
+
+x = (
+  <fbt desc="example 3">
+    Count Chocula knows the the number
+    <fbt:enum enum-range={["one", "two", "three"]} value={getValue()} />
+    is awesome
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}:{minute}:{second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}
+    :
+    {minute}
+    :
+    {second}
+  </fbt>
+);
+
+x = (
+  <fbt>
+    {hour}:
+    {minute}:
+    {second}
+  </fbt>
+);
+
+first = (
+  <fbt>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </fbt>
+);
+
+second = (
+  <fbt>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </fbt>
+);
+
+third = (
+  <fbt>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </fbt>
+);
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js
new file mode 100644
index 00000000000..c8c4657fd90
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js
@@ -0,0 +1,72 @@
+<></>;
+
+<>
+   text
+</>;
+
+<>
+  <Component />
+  <Component />
+</>;
+
+<>
+  text
+  <h2>heading</h2>
+  text
+  <h2>heading</h2>
+  text
+</>;
+
+<div>
+  <>
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>;
+
+foo = (
+  // comment
+  <></>
+);
+
+</* open fragment */>
+  <Component />
+  <Component />
+</ /* close fragment */>;
+
+< // open fragment
+>
+  <Component />
+  <Component />
+</ // close fragment
+>;
+
+[<></>, <></>];
+const fun1 = () => <></>;
+x = <></>
+function fun2(param = <></>) {}
+1 + <></>;
+1 || <></>;
+fun2(<></>);
+test ? <></> : x;
+<></>;
+<a>
+  <></>
+</a>;
+const obj = {
+  foo: <></>
+};
+const fragmentVar = <></>;
+function fun3() {
+  return <></>;
+}
+(<></>).toString();
+(<></>).props;
+(<></>)["computed"];
+(<></>)["computed"]();
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.prettier-snap
new file mode 100644
index 00000000000..6c2f55893d6
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.prettier-snap
@@ -0,0 +1,72 @@
+<></>;
+
+<>text</>;
+
+<>
+  <Component />
+  <Component />
+</>;
+
+<>
+  text
+  <h2>heading</h2>
+  text
+  <h2>heading</h2>
+  text
+</>;
+
+<div>
+  <>
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>;
+
+foo = (
+  // comment
+  <></>
+);
+
+</* open fragment */>
+  <Component />
+  <Component />
+</ /* close fragment */>;
+
+<
+  // open fragment
+>
+  <Component />
+  <Component />
+</
+  // close fragment
+>;
+
+[<></>, <></>];
+const fun1 = () => <></>;
+x = <></>;
+function fun2(param = <></>) {}
+1 + <></>;
+1 || <></>;
+fun2(<></>);
+test ? <></> : x;
+<></>;
+<a>
+  <></>
+</a>;
+const obj = {
+  foo: <></>,
+};
+const fragmentVar = <></>;
+function fun3() {
+  return <></>;
+}
+(<></>).toString();
+(<></>).props;
+(<></>)["computed"];
+(<></>)["computed"]();
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.snap
new file mode 100644
index 00000000000..24a6be4d5ab
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/fragment/fragment.js.snap
@@ -0,0 +1,202 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/fragment/fragment.js
+---
+
+# Input
+
+```js
+<></>;
+
+<>
+   text
+</>;
+
+<>
+  <Component />
+  <Component />
+</>;
+
+<>
+  text
+  <h2>heading</h2>
+  text
+  <h2>heading</h2>
+  text
+</>;
+
+<div>
+  <>
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>;
+
+foo = (
+  // comment
+  <></>
+);
+
+</* open fragment */>
+  <Component />
+  <Component />
+</ /* close fragment */>;
+
+< // open fragment
+>
+  <Component />
+  <Component />
+</ // close fragment
+>;
+
+[<></>, <></>];
+const fun1 = () => <></>;
+x = <></>
+function fun2(param = <></>) {}
+1 + <></>;
+1 || <></>;
+fun2(<></>);
+test ? <></> : x;
+<></>;
+<a>
+  <></>
+</a>;
+const obj = {
+  foo: <></>
+};
+const fragmentVar = <></>;
+function fun3() {
+  return <></>;
+}
+(<></>).toString();
+(<></>).props;
+(<></>)["computed"];
+(<></>)["computed"]();
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -28,24 +28,22 @@
+   </>
+ </div>;
+ 
+-foo = (
+-  // comment
+-  <></>
+-);
++foo =
++  (
++    // comment
++    <></>
++  );
+ 
+-</* open fragment */>
++< /* open fragment */ >
+   <Component />
+   <Component />
+-</ /* close fragment */>;
++</ /* close fragment */ >;
+ 
+-<
++<>
+   // open fragment
+->
+   <Component />
+   <Component />
+-</
+-  // close fragment
+->;
++</>; // close fragment
+ 
+ [<></>, <></>];
+ const fun1 = () => <></>;
+```
+
+# Output
+
+```js
+<></>;
+
+<>text</>;
+
+<>
+  <Component />
+  <Component />
+</>;
+
+<>
+  text
+  <h2>heading</h2>
+  text
+  <h2>heading</h2>
+  text
+</>;
+
+<div>
+  <>
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>;
+
+foo =
+  (
+    // comment
+    <></>
+  );
+
+< /* open fragment */ >
+  <Component />
+  <Component />
+</ /* close fragment */ >;
+
+<>
+  // open fragment
+  <Component />
+  <Component />
+</>; // close fragment
+
+[<></>, <></>];
+const fun1 = () => <></>;
+x = <></>;
+function fun2(param = <></>) {}
+1 + <></>;
+1 || <></>;
+fun2(<></>);
+test ? <></> : x;
+<></>;
+<a>
+  <></>
+</a>;
+const obj = {
+  foo: <></>,
+};
+const fragmentVar = <></>;
+function fun3() {
+  return <></>;
+}
+(<></>).toString();
+(<></>).props;
+(<></>)["computed"];
+(<></>)["computed"]();
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js
new file mode 100644
index 00000000000..f540cd8b2a8
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js
@@ -0,0 +1,56 @@
+// this should remain as-is
+<div>
+ {/* prettier-ignore */}
+ <style jsx global>{ComponentStyles}</style>
+</div>;
+
+// this should remain as-is
+<div>
+ {/* prettier-ignore */}
+ <span     ugly  format=''   />
+</div>;
+
+// this should remain as-is
+f(
+  <Component>
+    {/*prettier-ignore*/}
+    <span     ugly  format=''   />
+  </Component>
+);
+
+// this be formatted
+<div>
+  {/* prettier-ignore */} foo
+  <Bar   excessive    spaces    />
+</div>;
+
+// this should remain as-is
+<div>
+{
+  /* prettier-ignore */
+  foo ( )
+}
+</div>;
+
+// this should remain as-is
+<div>
+{
+  /* prettier-ignore */
+  x     ?   <Y/> : <Z/>
+}
+</div>;
+
+push(
+  // prettier-ignore
+  <td> :)
+  </td>,
+);
+
+function f() {
+	// rome-ignore format: Instability issue
+  return (
+    // prettier-ignore
+    /* $FlowFixMe(>=0.53.0) */
+    <JSX />
+  );
+}
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.prettier-snap
new file mode 100644
index 00000000000..d90e35e6e80
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.prettier-snap
@@ -0,0 +1,55 @@
+// this should remain as-is
+<div>
+  {/* prettier-ignore */}
+  <style jsx global>{ComponentStyles}</style>
+</div>;
+
+// this should remain as-is
+<div>
+  {/* prettier-ignore */}
+  <span     ugly  format=''   />
+</div>;
+
+// this should remain as-is
+f(
+  <Component>
+    {/*prettier-ignore*/}
+    <span     ugly  format=''   />
+  </Component>,
+);
+
+// this be formatted
+<div>
+  {/* prettier-ignore */} foo
+  <Bar excessive spaces />
+</div>;
+
+// this should remain as-is
+<div>
+  {
+    /* prettier-ignore */
+    foo ( )
+  }
+</div>;
+
+// this should remain as-is
+<div>
+  {
+    /* prettier-ignore */
+    x     ?   <Y/> : <Z/>
+  }
+</div>;
+
+push(
+  // prettier-ignore
+  <td> :)
+  </td>,
+);
+
+function f() {
+  return (
+    // prettier-ignore
+    /* $FlowFixMe(>=0.53.0) */
+    <JSX />
+  );
+}
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.snap
new file mode 100644
index 00000000000..7d74b6711bf
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/ignore/jsx_ignore.js.snap
@@ -0,0 +1,193 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/ignore/jsx_ignore.js
+---
+
+# Input
+
+```js
+// this should remain as-is
+<div>
+ {/* prettier-ignore */}
+ <style jsx global>{ComponentStyles}</style>
+</div>;
+
+// this should remain as-is
+<div>
+ {/* prettier-ignore */}
+ <span     ugly  format=''   />
+</div>;
+
+// this should remain as-is
+f(
+  <Component>
+    {/*prettier-ignore*/}
+    <span     ugly  format=''   />
+  </Component>
+);
+
+// this be formatted
+<div>
+  {/* prettier-ignore */} foo
+  <Bar   excessive    spaces    />
+</div>;
+
+// this should remain as-is
+<div>
+{
+  /* prettier-ignore */
+  foo ( )
+}
+</div>;
+
+// this should remain as-is
+<div>
+{
+  /* prettier-ignore */
+  x     ?   <Y/> : <Z/>
+}
+</div>;
+
+push(
+  // prettier-ignore
+  <td> :)
+  </td>,
+);
+
+function f() {
+	// rome-ignore format: Instability issue
+  return (
+    // prettier-ignore
+    /* $FlowFixMe(>=0.53.0) */
+    <JSX />
+  );
+}
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -1,20 +1,22 @@
+ // this should remain as-is
+ <div>
+   {/* prettier-ignore */}
+-  <style jsx global>{ComponentStyles}</style>
++  <style jsx global>
++    {ComponentStyles}
++  </style>
+ </div>;
+ 
+ // this should remain as-is
+ <div>
+   {/* prettier-ignore */}
+-  <span     ugly  format=''   />
++  <span ugly format='' />
+ </div>;
+ 
+ // this should remain as-is
+ f(
+   <Component>
+     {/*prettier-ignore*/}
+-    <span     ugly  format=''   />
++    <span ugly format='' />
+   </Component>,
+ );
+ 
+@@ -28,16 +30,15 @@
+ <div>
+   {
+     /* prettier-ignore */
+-    foo ( )
++  foo ( )
+   }
+ </div>;
+ 
+ // this should remain as-is
+ <div>
+   {
+-    /* prettier-ignore */
+-    x     ?   <Y/> : <Z/>
+-  }
++  /* prettier-ignore */
++  x     ?   <Y/> : <Z/>}
+ </div>;
+ 
+ push(
+@@ -47,6 +48,7 @@
+ );
+ 
+ function f() {
++  // rome-ignore format: Instability issue
+   return (
+     // prettier-ignore
+     /* $FlowFixMe(>=0.53.0) */
+```
+
+# Output
+
+```js
+// this should remain as-is
+<div>
+  {/* prettier-ignore */}
+  <style jsx global>
+    {ComponentStyles}
+  </style>
+</div>;
+
+// this should remain as-is
+<div>
+  {/* prettier-ignore */}
+  <span ugly format='' />
+</div>;
+
+// this should remain as-is
+f(
+  <Component>
+    {/*prettier-ignore*/}
+    <span ugly format='' />
+  </Component>,
+);
+
+// this be formatted
+<div>
+  {/* prettier-ignore */} foo
+  <Bar excessive spaces />
+</div>;
+
+// this should remain as-is
+<div>
+  {
+    /* prettier-ignore */
+  foo ( )
+  }
+</div>;
+
+// this should remain as-is
+<div>
+  {
+  /* prettier-ignore */
+  x     ?   <Y/> : <Z/>}
+</div>;
+
+push(
+  // prettier-ignore
+  <td> :)
+  </td>,
+);
+
+function f() {
+  // rome-ignore format: Instability issue
+  return (
+    // prettier-ignore
+    /* $FlowFixMe(>=0.53.0) */
+    <JSX />
+  );
+}
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js
new file mode 100644
index 00000000000..7c3649a6e7c
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js
@@ -0,0 +1,19 @@
+const comp1 = (
+  <div style={styles} key="something">
+    Keep the wrapping parens.
+  </div>
+);
+
+const comp2 = <div style={styles} key="something">
+  Create wrapping parens.
+</div>;
+
+comp2A = <div style={styles} key="something">
+  Create wrapping parens.
+</div>;
+
+const comp3 = <div style={styles} key="something">Bump to next line without parens</div>;
+
+const comp4 = <div style={styles} key="something">Create wrapping parens and indent <strong>all the things</strong>.</div>;
+
+const comp5 = <div>Keep it on one line.</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js.prettier-snap
new file mode 100644
index 00000000000..810b627f7c3
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/multiline-assign/test.js.prettier-snap
@@ -0,0 +1,31 @@
+const comp1 = (
+  <div style={styles} key="something">
+    Keep the wrapping parens.
+  </div>
+);
+
+const comp2 = (
+  <div style={styles} key="something">
+    Create wrapping parens.
+  </div>
+);
+
+comp2A = (
+  <div style={styles} key="something">
+    Create wrapping parens.
+  </div>
+);
+
+const comp3 = (
+  <div style={styles} key="something">
+    Bump to next line without parens
+  </div>
+);
+
+const comp4 = (
+  <div style={styles} key="something">
+    Create wrapping parens and indent <strong>all the things</strong>.
+  </div>
+);
+
+const comp5 = <div>Keep it on one line.</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js
new file mode 100644
index 00000000000..7f4591ee043
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js
@@ -0,0 +1,3 @@
+<jsx:namespacedname />;
+
+<jsx:namespacedname>1</jsx:namespacedname>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js.prettier-snap
new file mode 100644
index 00000000000..7f4591ee043
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/namespace/jsx_namespaced_name.js.prettier-snap
@@ -0,0 +1,3 @@
+<jsx:namespacedname />;
+
+<jsx:namespacedname>1</jsx:namespacedname>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js
new file mode 100644
index 00000000000..d5fedf9e3ab
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js
@@ -0,0 +1,94 @@
+keep = <p>
+  Welcome to the <strong>Universal React Starter-kyt</strong>.
+  This starter kyt should serve as the base for an advanced,
+  server-rendered React app.
+</p>
+
+newlines_text =
+  <div>
+    hi
+    there
+    how
+
+    are you
+
+
+    are you fine today?
+  </div>
+
+newlines_text_spaced =
+  <div>
+
+    space above
+
+    space below
+
+  </div>
+
+newlines_elems_spaced =
+  <div>
+
+    <span>space above</span>
+
+    <span>space below</span>
+
+  </div>
+
+newlines_mixed =
+  <div>
+    hi
+    <span>there</span>
+
+    how
+
+    are <strong>you</strong>
+
+
+    are you fine today?
+  </div>
+
+newlines_elems =
+  <div>
+    <div>
+
+
+      <div></div>
+
+
+    </div>
+
+
+    hi
+
+
+    <div></div>
+
+
+    <span />
+
+
+    <Big />
+
+
+  </div>
+
+regression_extra_newline = (
+  <div>
+    <span
+      className="nuclide-console-new-messages-notification-icon icon icon-nuclicon-arrow-down"
+    />
+    New Messages
+  </div>
+);
+
+
+regression_extra_newline_2 = (
+  <div>
+    (
+    <FormattedMessage
+      id="some-id"
+      defaultMessage="some loooooooooooooooooooooooooooong default"
+    />
+    )
+  </div>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.prettier-snap
new file mode 100644
index 00000000000..19d48412ee7
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.prettier-snap
@@ -0,0 +1,57 @@
+keep = (
+  <p>
+    Welcome to the <strong>Universal React Starter-kyt</strong>. This starter
+    kyt should serve as the base for an advanced, server-rendered React app.
+  </p>
+);
+
+newlines_text = <div>hi there how are you are you fine today?</div>;
+
+newlines_text_spaced = <div>space above space below</div>;
+
+newlines_elems_spaced = (
+  <div>
+    <span>space above</span>
+
+    <span>space below</span>
+  </div>
+);
+
+newlines_mixed = (
+  <div>
+    hi
+    <span>there</span>
+    how are <strong>you</strong>
+    are you fine today?
+  </div>
+);
+
+newlines_elems = (
+  <div>
+    <div>
+      <div></div>
+    </div>
+    hi
+    <div></div>
+    <span />
+    <Big />
+  </div>
+);
+
+regression_extra_newline = (
+  <div>
+    <span className="nuclide-console-new-messages-notification-icon icon icon-nuclicon-arrow-down" />
+    New Messages
+  </div>
+);
+
+regression_extra_newline_2 = (
+  <div>
+    (
+    <FormattedMessage
+      id="some-id"
+      defaultMessage="some loooooooooooooooooooooooooooong default"
+    />
+    )
+  </div>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.snap
new file mode 100644
index 00000000000..6561133b729
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/test.js.snap
@@ -0,0 +1,193 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/newlines/test.js
+---
+
+# Input
+
+```js
+keep = <p>
+  Welcome to the <strong>Universal React Starter-kyt</strong>.
+  This starter kyt should serve as the base for an advanced,
+  server-rendered React app.
+</p>
+
+newlines_text =
+  <div>
+    hi
+    there
+    how
+
+    are you
+
+
+    are you fine today?
+  </div>
+
+newlines_text_spaced =
+  <div>
+
+    space above
+
+    space below
+
+  </div>
+
+newlines_elems_spaced =
+  <div>
+
+    <span>space above</span>
+
+    <span>space below</span>
+
+  </div>
+
+newlines_mixed =
+  <div>
+    hi
+    <span>there</span>
+
+    how
+
+    are <strong>you</strong>
+
+
+    are you fine today?
+  </div>
+
+newlines_elems =
+  <div>
+    <div>
+
+
+      <div></div>
+
+
+    </div>
+
+
+    hi
+
+
+    <div></div>
+
+
+    <span />
+
+
+    <Big />
+
+
+  </div>
+
+regression_extra_newline = (
+  <div>
+    <span
+      className="nuclide-console-new-messages-notification-icon icon icon-nuclicon-arrow-down"
+    />
+    New Messages
+  </div>
+);
+
+
+regression_extra_newline_2 = (
+  <div>
+    (
+    <FormattedMessage
+      id="some-id"
+      defaultMessage="some loooooooooooooooooooooooooooong default"
+    />
+    )
+  </div>
+);
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -33,7 +33,9 @@
+     </div>
+     hi
+     <div></div>
++
+     <span />
++
+     <Big />
+   </div>
+ );
+```
+
+# Output
+
+```js
+keep = (
+  <p>
+    Welcome to the <strong>Universal React Starter-kyt</strong>. This starter
+    kyt should serve as the base for an advanced, server-rendered React app.
+  </p>
+);
+
+newlines_text = <div>hi there how are you are you fine today?</div>;
+
+newlines_text_spaced = <div>space above space below</div>;
+
+newlines_elems_spaced = (
+  <div>
+    <span>space above</span>
+
+    <span>space below</span>
+  </div>
+);
+
+newlines_mixed = (
+  <div>
+    hi
+    <span>there</span>
+    how are <strong>you</strong>
+    are you fine today?
+  </div>
+);
+
+newlines_elems = (
+  <div>
+    <div>
+      <div></div>
+    </div>
+    hi
+    <div></div>
+
+    <span />
+
+    <Big />
+  </div>
+);
+
+regression_extra_newline = (
+  <div>
+    <span className="nuclide-console-new-messages-notification-icon icon icon-nuclicon-arrow-down" />
+    New Messages
+  </div>
+);
+
+regression_extra_newline_2 = (
+  <div>
+    (
+    <FormattedMessage
+      id="some-id"
+      defaultMessage="some loooooooooooooooooooooooooooong default"
+    />
+    )
+  </div>
+);
+```
+
+
+# Lines exceeding max width of 80 characters
+```
+   45:     <span className="nuclide-console-new-messages-notification-icon icon icon-nuclicon-arrow-down" />
+```
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js
new file mode 100644
index 00000000000..d2b04f35a93
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js
@@ -0,0 +1,3 @@
+<div>
+Text
+</div>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js.prettier-snap
new file mode 100644
index 00000000000..a51f7aafaa9
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/newlines/windows.js.prettier-snap
@@ -0,0 +1 @@
+<div>Text</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js
new file mode 100644
index 00000000000..7a0895dcb44
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js
@@ -0,0 +1,7 @@
+<div>
+  {
+    // TODO: don't harcode this space! not all locales use whitespace
+    // in the same way
+    ' '
+  }
+</div>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js.prettier-snap
new file mode 100644
index 00000000000..3632e7d413f
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/comments.js.prettier-snap
@@ -0,0 +1,7 @@
+<div>
+  {
+    // TODO: don't harcode this space! not all locales use whitespace
+    // in the same way
+    " "
+  }
+</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js
new file mode 100644
index 00000000000..6f25e76bfdb
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js
@@ -0,0 +1,74 @@
+after =
+  <span>
+      foo <span>bar</span>
+  </span>
+
+before =
+  <span>
+    <span>bar</span> foo
+  </span>
+
+before_break1 =
+  <span>
+    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar /> foo
+  </span>
+
+before_break2 =
+  <span>
+    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar /> foo
+  </span>
+
+after_break =
+  <span>
+    foo <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
+  </span>
+
+within =
+  <span>
+    foo <span> bar </span>
+  </span>
+
+break_components =
+  <div>
+    <Foo />
+    <Bar>
+      <p>foo<span>bar bar bar</span></p><h1><span><em>yep</em></span></h1>
+    </Bar>
+    <h2>nope</h2>
+  </div>
+
+var x = <div>
+    hello <strong>hi</strong> <foo>sdkflsdfjk</foo>
+ </div>;
+
+nest_plz =
+  <div>
+    <div>
+    <div></div>
+    </div>
+  </div>
+
+regression_not_transformed_1 =
+  <span> <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /></span>;
+
+regression_not_transformed_2 =
+  <span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> </span>;
+
+similar_1 =
+  <span> <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /></span>;
+
+similar_2 =
+  <span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> </span>;
+
+similar_3 =
+  <span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> <Icon icon="" /></span>;
+
+not_broken_end =
+  <div>
+    long text long text long text long text long text long text long text long text <link>url</link> long text long text
+  </div>
+
+not_broken_begin =
+  <div>
+    <br /> long text long text long text long text long text long text long text long text<link>url</link> long text long text
+  </div>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.prettier-snap
new file mode 100644
index 00000000000..15330365b76
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.prettier-snap
@@ -0,0 +1,117 @@
+after = (
+  <span>
+    foo <span>bar</span>
+  </span>
+);
+
+before = (
+  <span>
+    <span>bar</span> foo
+  </span>
+);
+
+before_break1 = (
+  <span>
+    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />{" "}
+    foo
+  </span>
+);
+
+before_break2 = (
+  <span>
+    <span
+      barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
+    />{" "}
+    foo
+  </span>
+);
+
+after_break = (
+  <span>
+    foo{" "}
+    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
+  </span>
+);
+
+within = (
+  <span>
+    foo <span> bar </span>
+  </span>
+);
+
+break_components = (
+  <div>
+    <Foo />
+    <Bar>
+      <p>
+        foo<span>bar bar bar</span>
+      </p>
+      <h1>
+        <span>
+          <em>yep</em>
+        </span>
+      </h1>
+    </Bar>
+    <h2>nope</h2>
+  </div>
+);
+
+var x = (
+  <div>
+    hello <strong>hi</strong> <foo>sdkflsdfjk</foo>
+  </div>
+);
+
+nest_plz = (
+  <div>
+    <div>
+      <div></div>
+    </div>
+  </div>
+);
+
+regression_not_transformed_1 = (
+  <span>
+    {" "}
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+  </span>
+);
+
+regression_not_transformed_2 = (
+  <span>
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />{" "}
+  </span>
+);
+
+similar_1 = (
+  <span>
+    {" "}
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+  </span>
+);
+
+similar_2 = (
+  <span>
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />{" "}
+  </span>
+);
+
+similar_3 = (
+  <span>
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> <Icon icon="" />
+  </span>
+);
+
+not_broken_end = (
+  <div>
+    long text long text long text long text long text long text long text long
+    text <link>url</link> long text long text
+  </div>
+);
+
+not_broken_begin = (
+  <div>
+    <br /> long text long text long text long text long text long text long text
+    long text<link>url</link> long text long text
+  </div>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.snap
new file mode 100644
index 00000000000..054555963c5
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/significant-space/test.js.snap
@@ -0,0 +1,290 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/significant-space/test.js
+---
+
+# Input
+
+```js
+after =
+  <span>
+      foo <span>bar</span>
+  </span>
+
+before =
+  <span>
+    <span>bar</span> foo
+  </span>
+
+before_break1 =
+  <span>
+    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar /> foo
+  </span>
+
+before_break2 =
+  <span>
+    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar /> foo
+  </span>
+
+after_break =
+  <span>
+    foo <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
+  </span>
+
+within =
+  <span>
+    foo <span> bar </span>
+  </span>
+
+break_components =
+  <div>
+    <Foo />
+    <Bar>
+      <p>foo<span>bar bar bar</span></p><h1><span><em>yep</em></span></h1>
+    </Bar>
+    <h2>nope</h2>
+  </div>
+
+var x = <div>
+    hello <strong>hi</strong> <foo>sdkflsdfjk</foo>
+ </div>;
+
+nest_plz =
+  <div>
+    <div>
+    <div></div>
+    </div>
+  </div>
+
+regression_not_transformed_1 =
+  <span> <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /></span>;
+
+regression_not_transformed_2 =
+  <span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> </span>;
+
+similar_1 =
+  <span> <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /></span>;
+
+similar_2 =
+  <span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> </span>;
+
+similar_3 =
+  <span><Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> <Icon icon="" /></span>;
+
+not_broken_end =
+  <div>
+    long text long text long text long text long text long text long text long text <link>url</link> long text long text
+  </div>
+
+not_broken_begin =
+  <div>
+    <br /> long text long text long text long text long text long text long text long text<link>url</link> long text long text
+  </div>
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -12,7 +12,7 @@
+ 
+ before_break1 = (
+   <span>
+-    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />{" "}
++    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
+     foo
+   </span>
+ );
+@@ -21,15 +21,16 @@
+   <span>
+     <span
+       barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
+-    />{" "}
++    />
+     foo
+   </span>
+ );
+ 
+ after_break = (
+   <span>
+-    foo{" "}
+-    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
++    foo <span
++      barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
++    />
+   </span>
+ );
+ 
+@@ -79,7 +80,8 @@
+ 
+ regression_not_transformed_2 = (
+   <span>
+-    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />{" "}
++    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
++    {" "}
+   </span>
+ );
+ 
+@@ -92,13 +94,15 @@
+ 
+ similar_2 = (
+   <span>
+-    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />{" "}
++    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
++    {" "}
+   </span>
+ );
+ 
+ similar_3 = (
+   <span>
+-    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" /> <Icon icon="" />
++    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
++    <Icon icon="" />
+   </span>
+ );
+ 
+@@ -111,7 +115,8 @@
+ 
+ not_broken_begin = (
+   <div>
+-    <br /> long text long text long text long text long text long text long text
+-    long text<link>url</link> long text long text
++    <br />
++    long text long text long text long text long text long text long text long
++    text<link>url</link> long text long text
+   </div>
+ );
+```
+
+# Output
+
+```js
+after = (
+  <span>
+    foo <span>bar</span>
+  </span>
+);
+
+before = (
+  <span>
+    <span>bar</span> foo
+  </span>
+);
+
+before_break1 = (
+  <span>
+    <span barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar />
+    foo
+  </span>
+);
+
+before_break2 = (
+  <span>
+    <span
+      barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
+    />
+    foo
+  </span>
+);
+
+after_break = (
+  <span>
+    foo <span
+      barbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbarbar
+    />
+  </span>
+);
+
+within = (
+  <span>
+    foo <span> bar </span>
+  </span>
+);
+
+break_components = (
+  <div>
+    <Foo />
+    <Bar>
+      <p>
+        foo<span>bar bar bar</span>
+      </p>
+      <h1>
+        <span>
+          <em>yep</em>
+        </span>
+      </h1>
+    </Bar>
+    <h2>nope</h2>
+  </div>
+);
+
+var x = (
+  <div>
+    hello <strong>hi</strong> <foo>sdkflsdfjk</foo>
+  </div>
+);
+
+nest_plz = (
+  <div>
+    <div>
+      <div></div>
+    </div>
+  </div>
+);
+
+regression_not_transformed_1 = (
+  <span>
+    {" "}
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+  </span>
+);
+
+regression_not_transformed_2 = (
+  <span>
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+    {" "}
+  </span>
+);
+
+similar_1 = (
+  <span>
+    {" "}
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+  </span>
+);
+
+similar_2 = (
+  <span>
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+    {" "}
+  </span>
+);
+
+similar_3 = (
+  <span>
+    <Icon icon="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" />
+    <Icon icon="" />
+  </span>
+);
+
+not_broken_end = (
+  <div>
+    long text long text long text long text long text long text long text long
+    text <link>url</link> long text long text
+  </div>
+);
+
+not_broken_begin = (
+  <div>
+    <br />
+    long text long text long text long text long text long text long text long
+    text<link>url</link> long text long text
+  </div>
+);
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js
new file mode 100644
index 00000000000..299cb8332aa
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+const Component = () => (
+  <div>
+    <div data-a="1">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <div data-a="1" data-b="2" data-c="3">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <div data-a="Lorem ipsum dolor sit amet" data-b="Lorem ipsum dolor sit amet" data-c="Lorem ipsum dolor sit amet">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <div data-long-attribute-a="1" data-long-attribute-b="2" data-long-attribute-c="3">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <img src="/images/foo.png" />
+
+    <img src="/images/foo.png" alt="bar" />
+
+    <img src="/images/foo.png" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
+  </div>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js.prettier-snap
new file mode 100644
index 00000000000..c447f80ded5
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/single-attribute-per-line/single-attribute-per-line.js.prettier-snap
@@ -0,0 +1,38 @@
+import React from "react";
+
+const Component = () => (
+  <div>
+    <div data-a="1">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <div data-a="1" data-b="2" data-c="3">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <div
+      data-a="Lorem ipsum dolor sit amet"
+      data-b="Lorem ipsum dolor sit amet"
+      data-c="Lorem ipsum dolor sit amet"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <div
+      data-long-attribute-a="1"
+      data-long-attribute-b="2"
+      data-long-attribute-c="3"
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </div>
+
+    <img src="/images/foo.png" />
+
+    <img src="/images/foo.png" alt="bar" />
+
+    <img
+      src="/images/foo.png"
+      alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    />
+  </div>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js
new file mode 100644
index 00000000000..59f3a7a8ae1
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js
@@ -0,0 +1,49 @@
+long_closed =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"/>
+
+long_open =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    hello
+  </BaseForm>
+
+long_open_long_children =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+      Hello world
+    </BaseForm>
+    <div><div><div><div><div><div>hey hiya how are ya</div></div></div></div></div></div>
+    <div><div><div><div attr="long" attr2="also long" attr3="gonna break"></div></div></div></div>
+    <div><div><div>
+      <div attr="long" attr2="also long" attr3="gonna break" attr4="hello please break me" />
+    </div></div></div>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"><BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"></BaseForm>d</BaseForm>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"><BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"></BaseForm></BaseForm>
+  </BaseForm>
+
+short_closed =
+  <BaseForm url="/auth/google" method="GET"/>
+
+short_open =
+  <BaseForm url="/auth/google" method="GET">
+    hello
+  </BaseForm>
+
+make_self_closing =
+  <div>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    </BaseForm>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"></BaseForm>
+  </div>
+
+leave_opening =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"> </BaseForm>
+
+long_string =
+  <div className="i use bootstrap and just put loooaads of classnames in here all the time">hello world</div>
+
+long_string_with_extra_param =
+  <div className="i use bootstrap and just put loooaads of classnames in here all the time" blah="3">hello world</div>
+
+// rome-ignore format: Instability issue
+long_obj =
+  <div style={{ i: 'dont', use: 'bootstrap', and: 'instead', use: 'massive', objects }}>hello world</div>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.prettier-snap
new file mode 100644
index 00000000000..1a4851d6ae5
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.prettier-snap
@@ -0,0 +1,170 @@
+long_closed = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  />
+);
+
+long_open = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    hello
+  </BaseForm>
+);
+
+long_open_long_children = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    >
+      Hello world
+    </BaseForm>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>hey hiya how are ya</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <div attr="long" attr2="also long" attr3="gonna break"></div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <div
+            attr="long"
+            attr2="also long"
+            attr3="gonna break"
+            attr4="hello please break me"
+          />
+        </div>
+      </div>
+    </div>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    >
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      ></BaseForm>
+      d
+    </BaseForm>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    >
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      ></BaseForm>
+    </BaseForm>
+  </BaseForm>
+);
+
+short_closed = <BaseForm url="/auth/google" method="GET" />;
+
+short_open = (
+  <BaseForm url="/auth/google" method="GET">
+    hello
+  </BaseForm>
+);
+
+make_self_closing = (
+  <div>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    ></BaseForm>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    ></BaseForm>
+  </div>
+);
+
+leave_opening = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    {" "}
+  </BaseForm>
+);
+
+long_string = (
+  <div className="i use bootstrap and just put loooaads of classnames in here all the time">
+    hello world
+  </div>
+);
+
+long_string_with_extra_param = (
+  <div
+    className="i use bootstrap and just put loooaads of classnames in here all the time"
+    blah="3"
+  >
+    hello world
+  </div>
+);
+
+long_obj = (
+  <div
+    style={{
+      i: "dont",
+      use: "bootstrap",
+      and: "instead",
+      use: "massive",
+      objects,
+    }}
+  >
+    hello world
+  </div>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.snap
new file mode 100644
index 00000000000..9042378ed7f
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/split-attrs/test.js.snap
@@ -0,0 +1,261 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/split-attrs/test.js
+---
+
+# Input
+
+```js
+long_closed =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"/>
+
+long_open =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    hello
+  </BaseForm>
+
+long_open_long_children =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+      Hello world
+    </BaseForm>
+    <div><div><div><div><div><div>hey hiya how are ya</div></div></div></div></div></div>
+    <div><div><div><div attr="long" attr2="also long" attr3="gonna break"></div></div></div></div>
+    <div><div><div>
+      <div attr="long" attr2="also long" attr3="gonna break" attr4="hello please break me" />
+    </div></div></div>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"><BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"></BaseForm>d</BaseForm>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"><BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"></BaseForm></BaseForm>
+  </BaseForm>
+
+short_closed =
+  <BaseForm url="/auth/google" method="GET"/>
+
+short_open =
+  <BaseForm url="/auth/google" method="GET">
+    hello
+  </BaseForm>
+
+make_self_closing =
+  <div>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    </BaseForm>
+    <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"></BaseForm>
+  </div>
+
+leave_opening =
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google"> </BaseForm>
+
+long_string =
+  <div className="i use bootstrap and just put loooaads of classnames in here all the time">hello world</div>
+
+long_string_with_extra_param =
+  <div className="i use bootstrap and just put loooaads of classnames in here all the time" blah="3">hello world</div>
+
+// rome-ignore format: Instability issue
+long_obj =
+  <div style={{ i: 'dont', use: 'bootstrap', and: 'instead', use: 'massive', objects }}>hello world</div>
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -155,16 +155,6 @@
+   </div>
+ );
+ 
+-long_obj = (
+-  <div
+-    style={{
+-      i: "dont",
+-      use: "bootstrap",
+-      and: "instead",
+-      use: "massive",
+-      objects,
+-    }}
+-  >
+-    hello world
+-  </div>
+-);
++// rome-ignore format: Instability issue
++long_obj =
++  <div style={{ i: 'dont', use: 'bootstrap', and: 'instead', use: 'massive', objects }}>hello world</div>
+```
+
+# Output
+
+```js
+long_closed = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  />
+);
+
+long_open = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    hello
+  </BaseForm>
+);
+
+long_open_long_children = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    >
+      Hello world
+    </BaseForm>
+    <div>
+      <div>
+        <div>
+          <div>
+            <div>
+              <div>hey hiya how are ya</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <div attr="long" attr2="also long" attr3="gonna break"></div>
+        </div>
+      </div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <div
+            attr="long"
+            attr2="also long"
+            attr3="gonna break"
+            attr4="hello please break me"
+          />
+        </div>
+      </div>
+    </div>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    >
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      ></BaseForm>
+      d
+    </BaseForm>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    >
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      ></BaseForm>
+    </BaseForm>
+  </BaseForm>
+);
+
+short_closed = <BaseForm url="/auth/google" method="GET" />;
+
+short_open = (
+  <BaseForm url="/auth/google" method="GET">
+    hello
+  </BaseForm>
+);
+
+make_self_closing = (
+  <div>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    ></BaseForm>
+    <BaseForm
+      url="/auth/google"
+      method="GET"
+      colour="blue"
+      size="large"
+      submitLabel="Sign in with Google"
+    ></BaseForm>
+  </div>
+);
+
+leave_opening = (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    {" "}
+  </BaseForm>
+);
+
+long_string = (
+  <div className="i use bootstrap and just put loooaads of classnames in here all the time">
+    hello world
+  </div>
+);
+
+long_string_with_extra_param = (
+  <div
+    className="i use bootstrap and just put loooaads of classnames in here all the time"
+    blah="3"
+  >
+    hello world
+  </div>
+);
+
+// rome-ignore format: Instability issue
+long_obj =
+  <div style={{ i: 'dont', use: 'bootstrap', and: 'instead', use: 'massive', objects }}>hello world</div>
+```
+
+
+# Lines exceeding max width of 80 characters
+```
+  144:   <div className="i use bootstrap and just put loooaads of classnames in here all the time">
+  151:     className="i use bootstrap and just put loooaads of classnames in here all the time"
+  160:   <div style={{ i: 'dont', use: 'bootstrap', and: 'instead', use: 'massive', objects }}>hello world</div>
+```
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js
new file mode 100644
index 00000000000..2f12f980007
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js
@@ -0,0 +1,25 @@
+<div {...a}/>;
+
+<div {...(a || {})} />;
+
+<div {...(cond ? foo : bar)} />;
+
+<div {...a /* comment */}/>;
+
+<div {/* comment */...a}/>;
+
+<div {...a //comment
+}/>;
+
+<div {...a
+  //comment
+}/>;
+
+<div {
+  //comment
+  ...a
+}/>;
+
+<div {//comment
+  ...a // comment
+}/>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.prettier-snap
new file mode 100644
index 00000000000..a4fa06210ae
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.prettier-snap
@@ -0,0 +1,36 @@
+<div {...a} />;
+
+<div {...(a || {})} />;
+
+<div {...(cond ? foo : bar)} />;
+
+<div {...a /* comment */} />;
+
+<div {/* comment */ ...a} />;
+
+<div
+  {
+    ...a //comment
+  }
+/>;
+
+<div
+  {
+    ...a
+    //comment
+  }
+/>;
+
+<div
+  {
+    //comment
+    ...a
+  }
+/>;
+
+<div
+  {
+    //comment
+    ...a // comment
+  }
+/>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.snap
new file mode 100644
index 00000000000..39071cb7e1f
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/attribute.js.snap
@@ -0,0 +1,115 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/spread/attribute.js
+---
+
+# Input
+
+```js
+<div {...a}/>;
+
+<div {...(a || {})} />;
+
+<div {...(cond ? foo : bar)} />;
+
+<div {...a /* comment */}/>;
+
+<div {/* comment */...a}/>;
+
+<div {...a //comment
+}/>;
+
+<div {...a
+  //comment
+}/>;
+
+<div {
+  //comment
+  ...a
+}/>;
+
+<div {//comment
+  ...a // comment
+}/>;
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -9,28 +9,21 @@
+ <div {/* comment */ ...a} />;
+ 
+ <div
+-  {
+-    ...a //comment
+-  }
++  {...a} //comment
+ />;
+ 
+ <div
+-  {
+-    ...a
+-    //comment
++  {...a
++  //comment
+   }
+ />;
+ 
+ <div
+   {
+-    //comment
+-    ...a
+-  }
++  //comment
++  ...a}
+ />;
+ 
+ <div
+-  {
+-    //comment
+-    ...a // comment
+-  }
++  {...a} //comment // comment
+ />;
+```
+
+# Output
+
+```js
+<div {...a} />;
+
+<div {...(a || {})} />;
+
+<div {...(cond ? foo : bar)} />;
+
+<div {...a /* comment */} />;
+
+<div {/* comment */ ...a} />;
+
+<div
+  {...a} //comment
+/>;
+
+<div
+  {...a
+  //comment
+  }
+/>;
+
+<div
+  {
+  //comment
+  ...a}
+/>;
+
+<div
+  {...a} //comment // comment
+/>;
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js
new file mode 100644
index 00000000000..94e59bf6d24
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js
@@ -0,0 +1,23 @@
+<div>{...a}</div>;
+
+<div>{...a /* comment */}</div>;
+
+<div>{/* comment */...a}</div>;
+
+// rome-ignore format: Instability issue
+<div>{...a //comment
+}</div>;
+
+<div>{...a
+  //comment
+}</div>;
+
+<div>{
+  //comment
+  ...a
+}</div>;
+
+// rome-ignore format: Instability issue
+<div>{//comment
+  ...a // comment
+}</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.prettier-snap
new file mode 100644
index 00000000000..fc218066144
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.prettier-snap
@@ -0,0 +1,32 @@
+<div>{...a}</div>;
+
+<div>{...a /* comment */}</div>;
+
+<div>{/* comment */ ...a}</div>;
+
+<div>
+  {
+    ...a //comment
+  }
+</div>;
+
+<div>
+  {
+    ...a
+    //comment
+  }
+</div>;
+
+<div>
+  {
+    //comment
+    ...a
+  }
+</div>;
+
+<div>
+  {
+    //comment
+    ...a // comment
+  }
+</div>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.snap
new file mode 100644
index 00000000000..5358e69534a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/spread/child.js.snap
@@ -0,0 +1,116 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/spread/child.js
+---
+
+# Input
+
+```js
+<div>{...a}</div>;
+
+<div>{...a /* comment */}</div>;
+
+<div>{/* comment */...a}</div>;
+
+// rome-ignore format: Instability issue
+<div>{...a //comment
+}</div>;
+
+<div>{...a
+  //comment
+}</div>;
+
+<div>{
+  //comment
+  ...a
+}</div>;
+
+// rome-ignore format: Instability issue
+<div>{//comment
+  ...a // comment
+}</div>;
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -4,29 +4,23 @@
+ 
+ <div>{/* comment */ ...a}</div>;
+ 
+-<div>
+-  {
+-    ...a //comment
+-  }
+-</div>;
++// rome-ignore format: Instability issue
++<div>{...a //comment
++}</div>;
+ 
+ <div>
+-  {
+-    ...a
+-    //comment
++  {...a
++  //comment
+   }
+ </div>;
+ 
+ <div>
+   {
+-    //comment
+-    ...a
+-  }
++  //comment
++  ...a}
+ </div>;
+ 
+-<div>
+-  {
+-    //comment
+-    ...a // comment
+-  }
+-</div>;
++// rome-ignore format: Instability issue
++<div>{//comment
++  ...a // comment
++}</div>;
+```
+
+# Output
+
+```js
+<div>{...a}</div>;
+
+<div>{...a /* comment */}</div>;
+
+<div>{/* comment */ ...a}</div>;
+
+// rome-ignore format: Instability issue
+<div>{...a //comment
+}</div>;
+
+<div>
+  {...a
+  //comment
+  }
+</div>;
+
+<div>
+  {
+  //comment
+  ...a}
+</div>;
+
+// rome-ignore format: Instability issue
+<div>{//comment
+  ...a // comment
+}</div>;
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js
new file mode 100644
index 00000000000..2099e5bc09a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js
@@ -0,0 +1,73 @@
+const render1 = ({ styles }) => (
+  <div style={styles} key="something">
+    Keep the wrapping parens. Put each key on its own line.
+  </div>
+);
+
+const render2 = ({ styles }) => <div style={styles} key="something">
+  Create wrapping parens.
+</div>;
+
+const render3 = ({ styles }) => <div style={styles} key="something">Create wrapping parens.</div>;
+
+const render4 = ({ styles }) => <div style={styles} key="something">Create wrapping parens and indent <strong>all the things</strong>.</div>;
+
+const render5 = ({ styles }) => <div>Keep it on one line.</div>;
+
+const render6 = ({ styles }) => (
+  <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc">
+    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
+    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
+    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>
+      <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div> <strong>hello</strong></div>
+  </div>
+)
+
+const render7 = () =>
+  <div>
+    <span /><span>Dont break each elem onto its own line.</span> <span />
+    <div /> <div />
+  </div>
+
+const render7A = () => (
+  <div>
+    <div /><div /><div />
+  </div>
+)
+
+const render7B = () => (
+  <div>
+    <span> <span/> Dont break plz</span>
+    <span><span/>Dont break plz</span>
+    <span>Dont break plz<span/></span>
+  </div>
+)
+
+const render8 = (props) => <div>{props.text}</div>
+const render9 = (props) => <div>{props.looooooooooooooooooooooooooooooong_text}</div>
+const render10 = (props) => <div>{props.even_looooooooooooooooooooooooooooooooooooooooooonger_contents}</div>
+
+const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)
+
+React.render(
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google" />
+  , document.querySelector('#react-root')
+)
+
+
+const renderTernary = (props) =>
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    {props.showTheThing ?
+      <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
+      : "hello " + "howdy! "}
+    {props.showTheThing ?
+      <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
+      :
+      null
+    }
+    {props.showTheThing ? null :
+      <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
+    }
+    {props.showTheOtherThing ? <div>I am here</div> : <div attr="blah" />}
+    {props.showTheOtherThing ? <div>I am here!!</div> : null}
+  </BaseForm>
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.prettier-snap
new file mode 100644
index 00000000000..7cbcef966ad
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.prettier-snap
@@ -0,0 +1,170 @@
+const render1 = ({ styles }) => (
+  <div style={styles} key="something">
+    Keep the wrapping parens. Put each key on its own line.
+  </div>
+);
+
+const render2 = ({ styles }) => (
+  <div style={styles} key="something">
+    Create wrapping parens.
+  </div>
+);
+
+const render3 = ({ styles }) => (
+  <div style={styles} key="something">
+    Create wrapping parens.
+  </div>
+);
+
+const render4 = ({ styles }) => (
+  <div style={styles} key="something">
+    Create wrapping parens and indent <strong>all the things</strong>.
+  </div>
+);
+
+const render5 = ({ styles }) => <div>Keep it on one line.</div>;
+
+const render6 = ({ styles }) => (
+  <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc">
+    <div
+      attr1="aaaaaaaaaaaaaaaaa"
+      attr2="bbbbbbbbbbb"
+      attr3="cccccccccccc"
+      attr4
+    >
+      ddd d dd d d dddd dddd <strong>hello</strong>
+    </div>
+    <div
+      attr1="aaaaaaaaaaaaaaaaa"
+      attr2="bbbbbbbbbbb"
+      attr3="cccccccccccc"
+      attr4
+    >
+      ddd d dd d d dddd dddd <strong>hello</strong>
+    </div>
+    <div
+      attr1="aaaaaaaaaaaaaaaaa"
+      attr2="bbbbbbbbbbb"
+      attr3="cccccccccccc"
+      attr4
+    >
+      <div
+        attr1="aaaaaaaaaaaaaaaaa"
+        attr2="bbbbbbbbbbb"
+        attr3="cccccccccccc"
+        attr4
+      >
+        ddd d dd d d dddd dddd <strong>hello</strong>
+      </div>{" "}
+      <strong>hello</strong>
+    </div>
+  </div>
+);
+
+const render7 = () => (
+  <div>
+    <span />
+    <span>Dont break each elem onto its own line.</span> <span />
+    <div /> <div />
+  </div>
+);
+
+const render7A = () => (
+  <div>
+    <div />
+    <div />
+    <div />
+  </div>
+);
+
+const render7B = () => (
+  <div>
+    <span>
+      {" "}
+      <span /> Dont break plz
+    </span>
+    <span>
+      <span />
+      Dont break plz
+    </span>
+    <span>
+      Dont break plz
+      <span />
+    </span>
+  </div>
+);
+
+const render8 = (props) => <div>{props.text}</div>;
+const render9 = (props) => (
+  <div>{props.looooooooooooooooooooooooooooooong_text}</div>
+);
+const render10 = (props) => (
+  <div>
+    {props.even_looooooooooooooooooooooooooooooooooooooooooonger_contents}
+  </div>
+);
+
+const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) =>
+  this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(
+    cccccccccccc,
+    dddddddddddddddddddddd,
+  );
+
+React.render(
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  />,
+  document.querySelector("#react-root"),
+);
+
+const renderTernary = (props) => (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    {props.showTheThing ? (
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      >
+        Hello world
+      </BaseForm>
+    ) : (
+      "hello " + "howdy! "
+    )}
+    {props.showTheThing ? (
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      >
+        Hello world
+      </BaseForm>
+    ) : null}
+    {props.showTheThing ? null : (
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      >
+        Hello world
+      </BaseForm>
+    )}
+    {props.showTheOtherThing ? <div>I am here</div> : <div attr="blah" />}
+    {props.showTheOtherThing ? <div>I am here!!</div> : null}
+  </BaseForm>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.snap
new file mode 100644
index 00000000000..bd71e968e67
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/stateless-arrow-fn/test.js.snap
@@ -0,0 +1,300 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/stateless-arrow-fn/test.js
+---
+
+# Input
+
+```js
+const render1 = ({ styles }) => (
+  <div style={styles} key="something">
+    Keep the wrapping parens. Put each key on its own line.
+  </div>
+);
+
+const render2 = ({ styles }) => <div style={styles} key="something">
+  Create wrapping parens.
+</div>;
+
+const render3 = ({ styles }) => <div style={styles} key="something">Create wrapping parens.</div>;
+
+const render4 = ({ styles }) => <div style={styles} key="something">Create wrapping parens and indent <strong>all the things</strong>.</div>;
+
+const render5 = ({ styles }) => <div>Keep it on one line.</div>;
+
+const render6 = ({ styles }) => (
+  <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc">
+    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
+    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div>
+    <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>
+      <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc" attr4>ddd d dd d d dddd dddd <strong>hello</strong></div> <strong>hello</strong></div>
+  </div>
+)
+
+const render7 = () =>
+  <div>
+    <span /><span>Dont break each elem onto its own line.</span> <span />
+    <div /> <div />
+  </div>
+
+const render7A = () => (
+  <div>
+    <div /><div /><div />
+  </div>
+)
+
+const render7B = () => (
+  <div>
+    <span> <span/> Dont break plz</span>
+    <span><span/>Dont break plz</span>
+    <span>Dont break plz<span/></span>
+  </div>
+)
+
+const render8 = (props) => <div>{props.text}</div>
+const render9 = (props) => <div>{props.looooooooooooooooooooooooooooooong_text}</div>
+const render10 = (props) => <div>{props.even_looooooooooooooooooooooooooooooooooooooooooonger_contents}</div>
+
+const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) => this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(cccccccccccc, dddddddddddddddddddddd)
+
+React.render(
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google" />
+  , document.querySelector('#react-root')
+)
+
+
+const renderTernary = (props) =>
+  <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">
+    {props.showTheThing ?
+      <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
+      : "hello " + "howdy! "}
+    {props.showTheThing ?
+      <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
+      :
+      null
+    }
+    {props.showTheThing ? null :
+      <BaseForm url="/auth/google" method="GET" colour="blue" size="large" submitLabel="Sign in with Google">Hello world</BaseForm>
+    }
+    {props.showTheOtherThing ? <div>I am here</div> : <div attr="blah" />}
+    {props.showTheOtherThing ? <div>I am here!!</div> : null}
+  </BaseForm>
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -55,7 +55,7 @@
+         attr4
+       >
+         ddd d dd d d dddd dddd <strong>hello</strong>
+-      </div>{" "}
++      </div>
+       <strong>hello</strong>
+     </div>
+   </div>
+@@ -65,7 +65,8 @@
+   <div>
+     <span />
+     <span>Dont break each elem onto its own line.</span> <span />
+-    <div /> <div />
++    <div />
++    <div />
+   </div>
+ );
+ 
+@@ -81,7 +82,8 @@
+   <div>
+     <span>
+       {" "}
+-      <span /> Dont break plz
++      <span />
++      Dont break plz
+     </span>
+     <span>
+       <span />
+```
+
+# Output
+
+```js
+const render1 = ({ styles }) => (
+  <div style={styles} key="something">
+    Keep the wrapping parens. Put each key on its own line.
+  </div>
+);
+
+const render2 = ({ styles }) => (
+  <div style={styles} key="something">
+    Create wrapping parens.
+  </div>
+);
+
+const render3 = ({ styles }) => (
+  <div style={styles} key="something">
+    Create wrapping parens.
+  </div>
+);
+
+const render4 = ({ styles }) => (
+  <div style={styles} key="something">
+    Create wrapping parens and indent <strong>all the things</strong>.
+  </div>
+);
+
+const render5 = ({ styles }) => <div>Keep it on one line.</div>;
+
+const render6 = ({ styles }) => (
+  <div attr1="aaaaaaaaaaaaaaaaa" attr2="bbbbbbbbbbb" attr3="cccccccccccc">
+    <div
+      attr1="aaaaaaaaaaaaaaaaa"
+      attr2="bbbbbbbbbbb"
+      attr3="cccccccccccc"
+      attr4
+    >
+      ddd d dd d d dddd dddd <strong>hello</strong>
+    </div>
+    <div
+      attr1="aaaaaaaaaaaaaaaaa"
+      attr2="bbbbbbbbbbb"
+      attr3="cccccccccccc"
+      attr4
+    >
+      ddd d dd d d dddd dddd <strong>hello</strong>
+    </div>
+    <div
+      attr1="aaaaaaaaaaaaaaaaa"
+      attr2="bbbbbbbbbbb"
+      attr3="cccccccccccc"
+      attr4
+    >
+      <div
+        attr1="aaaaaaaaaaaaaaaaa"
+        attr2="bbbbbbbbbbb"
+        attr3="cccccccccccc"
+        attr4
+      >
+        ddd d dd d d dddd dddd <strong>hello</strong>
+      </div>
+      <strong>hello</strong>
+    </div>
+  </div>
+);
+
+const render7 = () => (
+  <div>
+    <span />
+    <span>Dont break each elem onto its own line.</span> <span />
+    <div />
+    <div />
+  </div>
+);
+
+const render7A = () => (
+  <div>
+    <div />
+    <div />
+    <div />
+  </div>
+);
+
+const render7B = () => (
+  <div>
+    <span>
+      {" "}
+      <span />
+      Dont break plz
+    </span>
+    <span>
+      <span />
+      Dont break plz
+    </span>
+    <span>
+      Dont break plz
+      <span />
+    </span>
+  </div>
+);
+
+const render8 = (props) => <div>{props.text}</div>;
+const render9 = (props) => (
+  <div>{props.looooooooooooooooooooooooooooooong_text}</div>
+);
+const render10 = (props) => (
+  <div>
+    {props.even_looooooooooooooooooooooooooooooooooooooooooonger_contents}
+  </div>
+);
+
+const notJSX = (aaaaaaaaaaaaaaaaa, bbbbbbbbbbb) =>
+  this.someLongCallWithParams(aaaaaa, bbbbbbb).anotherLongCallWithParams(
+    cccccccccccc,
+    dddddddddddddddddddddd,
+  );
+
+React.render(
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  />,
+  document.querySelector("#react-root"),
+);
+
+const renderTernary = (props) => (
+  <BaseForm
+    url="/auth/google"
+    method="GET"
+    colour="blue"
+    size="large"
+    submitLabel="Sign in with Google"
+  >
+    {props.showTheThing ? (
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      >
+        Hello world
+      </BaseForm>
+    ) : (
+      "hello " + "howdy! "
+    )}
+    {props.showTheThing ? (
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      >
+        Hello world
+      </BaseForm>
+    ) : null}
+    {props.showTheThing ? null : (
+      <BaseForm
+        url="/auth/google"
+        method="GET"
+        colour="blue"
+        size="large"
+        submitLabel="Sign in with Google"
+      >
+        Hello world
+      </BaseForm>
+    )}
+    {props.showTheOtherThing ? <div>I am here</div> : <div attr="blah" />}
+    {props.showTheOtherThing ? <div>I am here!!</div> : null}
+  </BaseForm>
+);
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js
new file mode 100644
index 00000000000..3377c40783a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js
@@ -0,0 +1,18 @@
+<style jsx>{`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>{tpl`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>
+  {`p {
+     color: red;
+     }
+  `}
+</style>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.prettier-snap
new file mode 100644
index 00000000000..d47d923e3c3
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.prettier-snap
@@ -0,0 +1,19 @@
+<style jsx>{`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>{tpl`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>
+  {`
+    p {
+      color: red;
+    }
+  `}
+</style>;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.snap
new file mode 100644
index 00000000000..020bfb36ac6
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/template/styled-components.js.snap
@@ -0,0 +1,75 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/template/styled-components.js
+---
+
+# Input
+
+```js
+<style jsx>{`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>{tpl`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>
+  {`p {
+     color: red;
+     }
+  `}
+</style>;
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -11,9 +11,8 @@
+ `}</style>;
+ 
+ <style jsx>
+-  {`
+-    p {
+-      color: red;
+-    }
++  {`p {
++     color: red;
++     }
+   `}
+ </style>;
+```
+
+# Output
+
+```js
+<style jsx>{`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>{tpl`
+  p {
+    color: red;
+  }
+`}</style>;
+
+<style jsx>
+  {`p {
+     color: red;
+     }
+  `}
+</style>;
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js b/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js
new file mode 100644
index 00000000000..f8cb6255443
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js
@@ -0,0 +1,458 @@
+// Wrapping text
+x =
+  <div>
+    Some text that would need to wrap on to a new line in order to display correctly and nicely
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>f</first>
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <first>f</first><first>f</first><first>f</first><first>f</first><first>f</first><first>f</first>
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <a /><b /><c />
+    <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first> <first>f</first>
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <sadashdkjahsdkjhaskjdhaksjdhkashdkashdkasjhdkajshdkashdkashd /> <first>f</first>
+  </div>
+
+x =
+  <div>
+    before<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at mollis lorem.</div>after
+  </div>
+
+x =
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}{stuff}{stuff}after{stuff}after
+  </div>
+
+x =
+  <div>
+    before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after {stuff}  {stuff}  {stuff} after {stuff} after
+  </div>
+
+x =
+  <div>
+    Please state your <b>name</b> and <b>occupation</b> for the board of <b>school</b> directors.
+  </div>
+
+function DiffOverview(props) {
+  const { source, target, since } = props;
+  return (
+    <div>
+      <div className="alert alert-info">
+        <p>
+          This diff overview is computed against the current list of records in
+          this collection and the list it contained on <b>{humanDate(since)}</b>.
+        </p>
+        <p>
+          <b>Note:</b> <code>last_modified</code> and <code>schema</code> record metadata
+          are omitted for easier review.
+        </p>
+      </div>
+      <Diff source={source} target={target} />
+    </div>
+  );
+}
+
+x = <font size={-3}><i>Starting at minute {graphActivity.startTime}, running for {graphActivity.length} to minute {graphActivity.startTime + graphActivity.length}</i></font>
+
+x =
+  <div>
+    First second third
+    <div attr="a very long string attribute that will overflow because it is very long">Something</div>
+  </div>
+
+x =
+  <div>
+    <div>
+      First
+    </div>
+    Second
+    <div>
+      Third
+    </div>
+  </div>
+
+x =
+  <div>
+    First <div>
+      Second
+    </div> Third
+  </div>
+
+leading_whitespace =
+  <div> First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth</div>
+
+trailing_whitespace =
+  <div>First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth </div>
+
+no_leading_or_trailing_whitespace =
+  <div>First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth</div>
+
+facebook_translation_leave_text_around_tag =
+  <div>
+    <span>
+      First
+    </span>,
+    (<span>
+      Second
+    </span>)
+  </div>
+
+x =
+  <div>
+    <span>
+      First second third fourth fifth sixth seventh
+    </span>,
+    (<span>
+      Second
+    </span>)
+  </div>
+
+this_really_should_split_across_lines =
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
+  </div>
+
+unstable_before =
+  <div className="yourScore">
+    Your score: <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini.crosstable.users[user.id]}`}</span>
+  </div>
+
+unstable_after_first_run = (
+  <div className="yourScore">
+    Your score:{" "}
+    <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini
+      .crosstable.users[user.id]}`}</span>
+  </div>
+);
+
+solitary_whitespace =
+  <div first="first" second="second" third="third" fourth="fourth" fifth="fifth" sixth="sixth"> </div>
+
+jsx_whitespace_on_newline =
+  <div>
+    <div>
+      First
+    </div> <div>
+      Second
+    </div> <div>
+      Third
+    </div>
+  </div>
+
+jsx_around_multiline_element =
+  <div>Before <div>{"Enough text to make this element wrap on to multiple lines when formatting"}</div> After</div>
+
+jsx_around_multiline_element_second_pass = (
+  <div>
+    Before{" "}
+    <div>
+      {
+        "Enough text to make this element wrap on to multiple lines when formatting"
+      }
+    </div>{" "}
+    After
+  </div>
+);
+
+convert_space_expressions =
+  <div>{" "}</div>
+
+x =
+  <div>
+    <first />
+    <second />
+    <third />
+    <fourth />
+    <fifth />
+    <sixth />
+  </div>
+
+const Abc = () => {
+  return (
+    <div>
+      Please state your
+      {" "}
+      <b>name</b>
+      {" "}
+      and
+      {" "}
+      <b>occupation</b>
+      {" "}
+      for the board of directors.
+    </div>
+  );
+};
+
+x = <div id="moo">Some stuff here</div>
+
+headers_and_paragraphs = (
+  <div>
+    <h2>First</h2>
+    <p>The first paragraph.</p>
+
+    <h2>Second</h2>
+    <p>The second paragraph.</p>
+  </div>
+);
+
+no_text_one_tag_per_line =
+  <div>
+    <first /><second />
+  </div>
+
+with_text_fill_line =
+  <div>
+    Text <first /><second />
+  </div>
+
+line_after_br =
+  <div>
+    Text<br />
+    More text<br />
+    And more<br />
+  </div>
+
+line_after_br =
+  <div>
+    Text<br />More text<br />And more<br />
+  </div>
+
+line_after_br =
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+
+line_after_br_2 = <div>A<br />B<br />C</div>
+
+br_followed_by_whitespace = <div><br /> text</div>
+
+dont_preserve_blank_lines_when_jsx_contains_text =
+  <div>
+
+    <div>Zeroth</div>
+
+    <div>First</div>
+
+    Second
+
+  </div>
+
+multiple_expressions =
+  <div>
+    {header}
+    {body}
+    {footer}
+  </div>
+
+single_expression_child_tags =
+  <div>
+    You currently have <strong>{dashboardStr}</strong> and <strong>{userStr}</strong>
+  </div>
+
+expression_does_not_break =
+  <div>texty text text text text text text text text text text text {this.props.type} </div>
+
+// FIXME
+br_triggers_expression_break =
+  <div><br />
+  text text text text text text text text text text text {this.props.type} </div>
+
+jsx_whitespace_after_tag =
+  <div>
+    <span a="a" b="b">
+      {variable}
+    </span>
+    {" "}
+    ({variable})
+  </div>
+
+x =
+  <div>
+    ENDS IN <div>
+      text text text text text text text text text text text
+    </div>{" "}
+    HRS
+  </div>
+
+x =
+  <div>
+    <h2>Message</h2>
+    Hello, I'm a simple message.
+  </div>
+
+x =
+  <div>
+    Hello, I'm a simple message.
+    <h2>Message</h2>
+  </div>
+
+x =
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            Line {startRange.row + 1}:{startRange.column + 1} - {endRange.row + 1}:{endRange.column + 1}{caller}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+x =
+  <div>
+    {" "} <div>text</div>
+  </div>
+
+// NOTE: Multiple JSX whitespaces are collapsed into a single space.
+x =
+  <div>
+    {" "}{" "}{" "}
+  </div>
+
+// Don't break a self-closing element without attributes
+// ----------
+x =
+  <p>
+    text text text text text text text text text text text text text text text<br />text text text text text text
+  </p>;
+
+x =
+  <div>
+    <div>
+      First
+    </div>-
+    <div>
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div>
+      First
+    </div>
+    -
+    <div>
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div>First</div>-<div>Second</div>
+  </div>
+
+x =
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>-
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div className="first" tabIndex="1">First</div>-<div className="second" tabIndex="2">Second</div>
+  </div>
+
+x =
+  <div>
+    {hour}:{minute}:{second}
+  </div>
+
+x =
+  <div>
+    {hour}
+    :
+    {minute}
+    :
+    {second}
+  </div>
+
+x =
+  <div>
+    {hour}:
+    {minute}:
+    {second}
+  </div>
+
+x = <div><strong>text here</strong>.<br /></div>
+
+x = <div>Sales tax estimated using a rate of {salesTax * 100}%.</div>
+
+x = <div>
+  {title}&nbsp;
+</div>
+
+x = <div><span/>bar</div>
+  
+x = <div>
+  <span>
+    <strong>{name}</strong>’s{' '}
+  </span>
+  Hello <strong>world</strong>.<br />
+  <Text>You {type}ed this shipment to</Text>
+</div>
+
+x = <HelpBlock>
+  {parameter.Description}: {errorMsg}
+</HelpBlock>
+  
+x = <label>
+  {value} solution{plural}
+</label>
+  
+x = <span>Copy &quot;{name}&quot;</span>
+  
+x = <BasicText light>(avg. {value}/5)</BasicText>
+  
+x = <p>
+  Use the <code>Button</code>'s
+</p>;
+
+this_really_should_split_across_lines =
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
+  </div>
+
+let myDiv = ReactTestUtils.renderIntoDocument(
+  <div>
+    <div key="theDog" className="dog" />,
+    <div key="theBird" className="bird" />
+  </div>
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.prettier-snap
new file mode 100644
index 00000000000..8d55c7a9103
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.prettier-snap
@@ -0,0 +1,570 @@
+// Wrapping text
+x = (
+  <div>
+    Some text that would need to wrap on to a new line in order to display
+    correctly and nicely
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <first>f</first> <first>f</first> <first>f</first> <first>f</first>{" "}
+    <first>f</first> <first>f</first>
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <a />
+    <b />
+    <c />
+    <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first>{" "}
+    <first>f</first>
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <sadashdkjahsdkjhaskjdhaksjdhkashdkashdkasjhdkajshdkashdkashd />{" "}
+    <first>f</first>
+  </div>
+);
+
+x = (
+  <div>
+    before
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at
+      mollis lorem.
+    </div>
+    after
+  </div>
+);
+
+x = (
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    {stuff}
+    {stuff}after{stuff}after
+  </div>
+);
+
+x = (
+  <div>
+    before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after{" "}
+    {stuff} {stuff} {stuff} after {stuff} after
+  </div>
+);
+
+x = (
+  <div>
+    Please state your <b>name</b> and <b>occupation</b> for the board of{" "}
+    <b>school</b> directors.
+  </div>
+);
+
+function DiffOverview(props) {
+  const { source, target, since } = props;
+  return (
+    <div>
+      <div className="alert alert-info">
+        <p>
+          This diff overview is computed against the current list of records in
+          this collection and the list it contained on <b>{humanDate(since)}</b>
+          .
+        </p>
+        <p>
+          <b>Note:</b> <code>last_modified</code> and <code>schema</code> record
+          metadata are omitted for easier review.
+        </p>
+      </div>
+      <Diff source={source} target={target} />
+    </div>
+  );
+}
+
+x = (
+  <font size={-3}>
+    <i>
+      Starting at minute {graphActivity.startTime}, running for{" "}
+      {graphActivity.length} to minute{" "}
+      {graphActivity.startTime + graphActivity.length}
+    </i>
+  </font>
+);
+
+x = (
+  <div>
+    First second third
+    <div attr="a very long string attribute that will overflow because it is very long">
+      Something
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    <div>First</div>
+    Second
+    <div>Third</div>
+  </div>
+);
+
+x = (
+  <div>
+    First <div>Second</div> Third
+  </div>
+);
+
+leading_whitespace = (
+  <div>
+    {" "}
+    First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh
+    Twelfth Thirteenth Fourteenth
+  </div>
+);
+
+trailing_whitespace = (
+  <div>
+    First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh
+    Twelfth Thirteenth Fourteenth{" "}
+  </div>
+);
+
+no_leading_or_trailing_whitespace = (
+  <div>
+    First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh
+    Twelfth Thirteenth Fourteenth
+  </div>
+);
+
+facebook_translation_leave_text_around_tag = (
+  <div>
+    <span>First</span>, (<span>Second</span>)
+  </div>
+);
+
+x = (
+  <div>
+    <span>First second third fourth fifth sixth seventh</span>, (
+    <span>Second</span>)
+  </div>
+);
+
+this_really_should_split_across_lines = (
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    after{stuff}after{stuff}after
+  </div>
+);
+
+unstable_before = (
+  <div className="yourScore">
+    Your score:{" "}
+    <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${
+      mini.crosstable.users[user.id]
+    }`}</span>
+  </div>
+);
+
+unstable_after_first_run = (
+  <div className="yourScore">
+    Your score:{" "}
+    <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${
+      mini.crosstable.users[user.id]
+    }`}</span>
+  </div>
+);
+
+solitary_whitespace = (
+  <div
+    first="first"
+    second="second"
+    third="third"
+    fourth="fourth"
+    fifth="fifth"
+    sixth="sixth"
+  >
+    {" "}
+  </div>
+);
+
+jsx_whitespace_on_newline = (
+  <div>
+    <div>First</div> <div>Second</div> <div>Third</div>
+  </div>
+);
+
+jsx_around_multiline_element = (
+  <div>
+    Before{" "}
+    <div>
+      {
+        "Enough text to make this element wrap on to multiple lines when formatting"
+      }
+    </div>{" "}
+    After
+  </div>
+);
+
+jsx_around_multiline_element_second_pass = (
+  <div>
+    Before{" "}
+    <div>
+      {
+        "Enough text to make this element wrap on to multiple lines when formatting"
+      }
+    </div>{" "}
+    After
+  </div>
+);
+
+convert_space_expressions = <div> </div>;
+
+x = (
+  <div>
+    <first />
+    <second />
+    <third />
+    <fourth />
+    <fifth />
+    <sixth />
+  </div>
+);
+
+const Abc = () => {
+  return (
+    <div>
+      Please state your <b>name</b> and <b>occupation</b> for the board of
+      directors.
+    </div>
+  );
+};
+
+x = <div id="moo">Some stuff here</div>;
+
+headers_and_paragraphs = (
+  <div>
+    <h2>First</h2>
+    <p>The first paragraph.</p>
+
+    <h2>Second</h2>
+    <p>The second paragraph.</p>
+  </div>
+);
+
+no_text_one_tag_per_line = (
+  <div>
+    <first />
+    <second />
+  </div>
+);
+
+with_text_fill_line = (
+  <div>
+    Text <first />
+    <second />
+  </div>
+);
+
+line_after_br = (
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+);
+
+line_after_br = (
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+);
+
+line_after_br = (
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+);
+
+line_after_br_2 = (
+  <div>
+    A<br />B<br />C
+  </div>
+);
+
+br_followed_by_whitespace = (
+  <div>
+    <br /> text
+  </div>
+);
+
+dont_preserve_blank_lines_when_jsx_contains_text = (
+  <div>
+    <div>Zeroth</div>
+    <div>First</div>
+    Second
+  </div>
+);
+
+multiple_expressions = (
+  <div>
+    {header}
+    {body}
+    {footer}
+  </div>
+);
+
+single_expression_child_tags = (
+  <div>
+    You currently have <strong>{dashboardStr}</strong> and{" "}
+    <strong>{userStr}</strong>
+  </div>
+);
+
+expression_does_not_break = (
+  <div>
+    texty text text text text text text text text text text text{" "}
+    {this.props.type}{" "}
+  </div>
+);
+
+// FIXME
+br_triggers_expression_break = (
+  <div>
+    <br />
+    text text text text text text text text text text text {
+      this.props.type
+    }{" "}
+  </div>
+);
+
+jsx_whitespace_after_tag = (
+  <div>
+    <span a="a" b="b">
+      {variable}
+    </span>{" "}
+    ({variable})
+  </div>
+);
+
+x = (
+  <div>
+    ENDS IN <div>text text text text text text text text text text text</div>{" "}
+    HRS
+  </div>
+);
+
+x = (
+  <div>
+    <h2>Message</h2>
+    Hello, I'm a simple message.
+  </div>
+);
+
+x = (
+  <div>
+    Hello, I'm a simple message.
+    <h2>Message</h2>
+  </div>
+);
+
+x = (
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            Line {startRange.row + 1}:{startRange.column + 1} -{" "}
+            {endRange.row + 1}:{endRange.column + 1}
+            {caller}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    {" "}
+    <div>text</div>
+  </div>
+);
+
+// NOTE: Multiple JSX whitespaces are collapsed into a single space.
+x = <div> </div>;
+
+// Don't break a self-closing element without attributes
+// ----------
+x = (
+  <p>
+    text text text text text text text text text text text text text text text
+    <br />
+    text text text text text text
+  </p>
+);
+
+x = (
+  <div>
+    <div>First</div>-<div>Second</div>
+  </div>
+);
+
+x = (
+  <div>
+    <div>First</div>-<div>Second</div>
+  </div>
+);
+
+x = (
+  <div>
+    <div>First</div>-<div>Second</div>
+  </div>
+);
+
+x = (
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    {hour}:{minute}:{second}
+  </div>
+);
+
+x = (
+  <div>
+    {hour}:{minute}:{second}
+  </div>
+);
+
+x = (
+  <div>
+    {hour}:{minute}:{second}
+  </div>
+);
+
+x = (
+  <div>
+    <strong>text here</strong>.<br />
+  </div>
+);
+
+x = <div>Sales tax estimated using a rate of {salesTax * 100}%.</div>;
+
+x = <div>{title}&nbsp;</div>;
+
+x = (
+  <div>
+    <span />
+    bar
+  </div>
+);
+
+x = (
+  <div>
+    <span>
+      <strong>{name}</strong>’s{" "}
+    </span>
+    Hello <strong>world</strong>.<br />
+    <Text>You {type}ed this shipment to</Text>
+  </div>
+);
+
+x = (
+  <HelpBlock>
+    {parameter.Description}: {errorMsg}
+  </HelpBlock>
+);
+
+x = (
+  <label>
+    {value} solution{plural}
+  </label>
+);
+
+x = <span>Copy &quot;{name}&quot;</span>;
+
+x = <BasicText light>(avg. {value}/5)</BasicText>;
+
+x = (
+  <p>
+    Use the <code>Button</code>'s
+  </p>
+);
+
+this_really_should_split_across_lines = (
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    after{stuff}after
+  </div>
+);
+
+let myDiv = ReactTestUtils.renderIntoDocument(
+  <div>
+    <div key="theDog" className="dog" />,
+    <div key="theBird" className="bird" />
+  </div>,
+);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.snap b/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.snap
new file mode 100644
index 00000000000..03eb8021691
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.snap
@@ -0,0 +1,1390 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: jsx/text-wrap/test.js
+---
+
+# Input
+
+```js
+// Wrapping text
+x =
+  <div>
+    Some text that would need to wrap on to a new line in order to display correctly and nicely
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>f</first>
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <first>f</first><first>f</first><first>f</first><first>f</first><first>f</first><first>f</first>
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <a /><b /><c />
+    <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first> <first>f</first>
+  </div>
+
+// Wrapping tags
+x =
+  <div>
+    <sadashdkjahsdkjhaskjdhaksjdhkashdkashdkasjhdkajshdkashdkashd /> <first>f</first>
+  </div>
+
+x =
+  <div>
+    before<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at mollis lorem.</div>after
+  </div>
+
+x =
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}{stuff}{stuff}after{stuff}after
+  </div>
+
+x =
+  <div>
+    before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after {stuff}  {stuff}  {stuff} after {stuff} after
+  </div>
+
+x =
+  <div>
+    Please state your <b>name</b> and <b>occupation</b> for the board of <b>school</b> directors.
+  </div>
+
+function DiffOverview(props) {
+  const { source, target, since } = props;
+  return (
+    <div>
+      <div className="alert alert-info">
+        <p>
+          This diff overview is computed against the current list of records in
+          this collection and the list it contained on <b>{humanDate(since)}</b>.
+        </p>
+        <p>
+          <b>Note:</b> <code>last_modified</code> and <code>schema</code> record metadata
+          are omitted for easier review.
+        </p>
+      </div>
+      <Diff source={source} target={target} />
+    </div>
+  );
+}
+
+x = <font size={-3}><i>Starting at minute {graphActivity.startTime}, running for {graphActivity.length} to minute {graphActivity.startTime + graphActivity.length}</i></font>
+
+x =
+  <div>
+    First second third
+    <div attr="a very long string attribute that will overflow because it is very long">Something</div>
+  </div>
+
+x =
+  <div>
+    <div>
+      First
+    </div>
+    Second
+    <div>
+      Third
+    </div>
+  </div>
+
+x =
+  <div>
+    First <div>
+      Second
+    </div> Third
+  </div>
+
+leading_whitespace =
+  <div> First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth</div>
+
+trailing_whitespace =
+  <div>First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth </div>
+
+no_leading_or_trailing_whitespace =
+  <div>First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh Twelfth Thirteenth Fourteenth</div>
+
+facebook_translation_leave_text_around_tag =
+  <div>
+    <span>
+      First
+    </span>,
+    (<span>
+      Second
+    </span>)
+  </div>
+
+x =
+  <div>
+    <span>
+      First second third fourth fifth sixth seventh
+    </span>,
+    (<span>
+      Second
+    </span>)
+  </div>
+
+this_really_should_split_across_lines =
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
+  </div>
+
+unstable_before =
+  <div className="yourScore">
+    Your score: <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini.crosstable.users[user.id]}`}</span>
+  </div>
+
+unstable_after_first_run = (
+  <div className="yourScore">
+    Your score:{" "}
+    <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${mini
+      .crosstable.users[user.id]}`}</span>
+  </div>
+);
+
+solitary_whitespace =
+  <div first="first" second="second" third="third" fourth="fourth" fifth="fifth" sixth="sixth"> </div>
+
+jsx_whitespace_on_newline =
+  <div>
+    <div>
+      First
+    </div> <div>
+      Second
+    </div> <div>
+      Third
+    </div>
+  </div>
+
+jsx_around_multiline_element =
+  <div>Before <div>{"Enough text to make this element wrap on to multiple lines when formatting"}</div> After</div>
+
+jsx_around_multiline_element_second_pass = (
+  <div>
+    Before{" "}
+    <div>
+      {
+        "Enough text to make this element wrap on to multiple lines when formatting"
+      }
+    </div>{" "}
+    After
+  </div>
+);
+
+convert_space_expressions =
+  <div>{" "}</div>
+
+x =
+  <div>
+    <first />
+    <second />
+    <third />
+    <fourth />
+    <fifth />
+    <sixth />
+  </div>
+
+const Abc = () => {
+  return (
+    <div>
+      Please state your
+      {" "}
+      <b>name</b>
+      {" "}
+      and
+      {" "}
+      <b>occupation</b>
+      {" "}
+      for the board of directors.
+    </div>
+  );
+};
+
+x = <div id="moo">Some stuff here</div>
+
+headers_and_paragraphs = (
+  <div>
+    <h2>First</h2>
+    <p>The first paragraph.</p>
+
+    <h2>Second</h2>
+    <p>The second paragraph.</p>
+  </div>
+);
+
+no_text_one_tag_per_line =
+  <div>
+    <first /><second />
+  </div>
+
+with_text_fill_line =
+  <div>
+    Text <first /><second />
+  </div>
+
+line_after_br =
+  <div>
+    Text<br />
+    More text<br />
+    And more<br />
+  </div>
+
+line_after_br =
+  <div>
+    Text<br />More text<br />And more<br />
+  </div>
+
+line_after_br =
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+
+line_after_br_2 = <div>A<br />B<br />C</div>
+
+br_followed_by_whitespace = <div><br /> text</div>
+
+dont_preserve_blank_lines_when_jsx_contains_text =
+  <div>
+
+    <div>Zeroth</div>
+
+    <div>First</div>
+
+    Second
+
+  </div>
+
+multiple_expressions =
+  <div>
+    {header}
+    {body}
+    {footer}
+  </div>
+
+single_expression_child_tags =
+  <div>
+    You currently have <strong>{dashboardStr}</strong> and <strong>{userStr}</strong>
+  </div>
+
+expression_does_not_break =
+  <div>texty text text text text text text text text text text text {this.props.type} </div>
+
+// FIXME
+br_triggers_expression_break =
+  <div><br />
+  text text text text text text text text text text text {this.props.type} </div>
+
+jsx_whitespace_after_tag =
+  <div>
+    <span a="a" b="b">
+      {variable}
+    </span>
+    {" "}
+    ({variable})
+  </div>
+
+x =
+  <div>
+    ENDS IN <div>
+      text text text text text text text text text text text
+    </div>{" "}
+    HRS
+  </div>
+
+x =
+  <div>
+    <h2>Message</h2>
+    Hello, I'm a simple message.
+  </div>
+
+x =
+  <div>
+    Hello, I'm a simple message.
+    <h2>Message</h2>
+  </div>
+
+x =
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            Line {startRange.row + 1}:{startRange.column + 1} - {endRange.row + 1}:{endRange.column + 1}{caller}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+x =
+  <div>
+    {" "} <div>text</div>
+  </div>
+
+// NOTE: Multiple JSX whitespaces are collapsed into a single space.
+x =
+  <div>
+    {" "}{" "}{" "}
+  </div>
+
+// Don't break a self-closing element without attributes
+// ----------
+x =
+  <p>
+    text text text text text text text text text text text text text text text<br />text text text text text text
+  </p>;
+
+x =
+  <div>
+    <div>
+      First
+    </div>-
+    <div>
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div>
+      First
+    </div>
+    -
+    <div>
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div>First</div>-<div>Second</div>
+  </div>
+
+x =
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>-
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+
+x =
+  <div>
+    <div className="first" tabIndex="1">First</div>-<div className="second" tabIndex="2">Second</div>
+  </div>
+
+x =
+  <div>
+    {hour}:{minute}:{second}
+  </div>
+
+x =
+  <div>
+    {hour}
+    :
+    {minute}
+    :
+    {second}
+  </div>
+
+x =
+  <div>
+    {hour}:
+    {minute}:
+    {second}
+  </div>
+
+x = <div><strong>text here</strong>.<br /></div>
+
+x = <div>Sales tax estimated using a rate of {salesTax * 100}%.</div>
+
+x = <div>
+  {title}&nbsp;
+</div>
+
+x = <div><span/>bar</div>
+  
+x = <div>
+  <span>
+    <strong>{name}</strong>’s{' '}
+  </span>
+  Hello <strong>world</strong>.<br />
+  <Text>You {type}ed this shipment to</Text>
+</div>
+
+x = <HelpBlock>
+  {parameter.Description}: {errorMsg}
+</HelpBlock>
+  
+x = <label>
+  {value} solution{plural}
+</label>
+  
+x = <span>Copy &quot;{name}&quot;</span>
+  
+x = <BasicText light>(avg. {value}/5)</BasicText>
+  
+x = <p>
+  Use the <code>Button</code>'s
+</p>;
+
+this_really_should_split_across_lines =
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after
+  </div>
+
+let myDiv = ReactTestUtils.renderIntoDocument(
+  <div>
+    <div key="theDog" className="dog" />,
+    <div key="theBird" className="bird" />
+  </div>
+);
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -9,8 +9,10 @@
+ // Wrapping tags
+ x = (
+   <div>
+-    <first>f</first> <first>f</first> <first>f</first> <first>f</first>{" "}
+-    <first>f</first> <first>f</first>
++    <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>
++      f
++    </first>
++    <first>f</first>
+   </div>
+ );
+ 
+@@ -32,15 +34,16 @@
+     <a />
+     <b />
+     <c />
+-    <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first>{" "}
+-    <first>f</first>
++    <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first> <first>
++      f
++    </first>
+   </div>
+ );
+ 
+ // Wrapping tags
+ x = (
+   <div>
+-    <sadashdkjahsdkjhaskjdhaksjdhkashdkashdkasjhdkajshdkashdkashd />{" "}
++    <sadashdkjahsdkjhaskjdhaksjdhkashdkashdkasjhdkajshdkashdkashd />
+     <first>f</first>
+   </div>
+ );
+@@ -66,15 +69,19 @@
+ 
+ x = (
+   <div>
+-    before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after{" "}
+-    {stuff} {stuff} {stuff} after {stuff} after
++    before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after {
++      stuff
++    }
++    {stuff} {stuff} after {stuff} after
+   </div>
+ );
+ 
+ x = (
+   <div>
+-    Please state your <b>name</b> and <b>occupation</b> for the board of{" "}
+-    <b>school</b> directors.
++    Please state your <b>name</b> and <b>occupation</b> for the board of <b>
++      school
++    </b>
++    directors.
+   </div>
+ );
+ 
+@@ -101,9 +108,10 @@
+ x = (
+   <font size={-3}>
+     <i>
+-      Starting at minute {graphActivity.startTime}, running for{" "}
+-      {graphActivity.length} to minute{" "}
+-      {graphActivity.startTime + graphActivity.length}
++      Starting at minute {graphActivity.startTime}, running for {
++        graphActivity.length
++      }
++      to minute {graphActivity.startTime + graphActivity.length}
+     </i>
+   </font>
+ );
+@@ -176,19 +184,17 @@
+ 
+ unstable_before = (
+   <div className="yourScore">
+-    Your score:{" "}
+-    <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${
+-      mini.crosstable.users[user.id]
+-    }`}</span>
++    Your score: <span className="score">{`${
++      mini.crosstable.users[sessionUserId]
++    } - ${mini.crosstable.users[user.id]}`}</span>
+   </div>
+ );
+ 
+ unstable_after_first_run = (
+   <div className="yourScore">
+-    Your score:{" "}
+-    <span className="score">{`${mini.crosstable.users[sessionUserId]} - ${
+-      mini.crosstable.users[user.id]
+-    }`}</span>
++    Your score: <span className="score">{`${
++      mini.crosstable.users[sessionUserId]
++    } - ${mini.crosstable.users[user.id]}`}</span>
+   </div>
+ );
+ 
+@@ -213,24 +219,22 @@
+ 
+ jsx_around_multiline_element = (
+   <div>
+-    Before{" "}
+-    <div>
++    Before <div>
+       {
+         "Enough text to make this element wrap on to multiple lines when formatting"
+       }
+-    </div>{" "}
++    </div>
+     After
+   </div>
+ );
+ 
+ jsx_around_multiline_element_second_pass = (
+   <div>
+-    Before{" "}
+-    <div>
++    Before <div>
+       {
+         "Enough text to make this element wrap on to multiple lines when formatting"
+       }
+-    </div>{" "}
++    </div>
+     After
+   </div>
+ );
+@@ -251,8 +255,11 @@
+ const Abc = () => {
+   return (
+     <div>
+-      Please state your <b>name</b> and <b>occupation</b> for the board of
+-      directors.
++      Please state your
++      {" "}<b>name</b>
++      and
++      {" "}<b>occupation</b>
++      for the board of directors.
+     </div>
+   );
+ };
+@@ -318,19 +325,25 @@
+ 
+ line_after_br_2 = (
+   <div>
+-    A<br />B<br />C
++    A
++    <br />
++    B
++    <br />
++    C
+   </div>
+ );
+ 
+ br_followed_by_whitespace = (
+   <div>
+-    <br /> text
++    <br />
++    text
+   </div>
+ );
+ 
+ dont_preserve_blank_lines_when_jsx_contains_text = (
+   <div>
+     <div>Zeroth</div>
++
+     <div>First</div>
+     Second
+   </div>
+@@ -346,15 +359,18 @@
+ 
+ single_expression_child_tags = (
+   <div>
+-    You currently have <strong>{dashboardStr}</strong> and{" "}
+-    <strong>{userStr}</strong>
++    You currently have <strong>{dashboardStr}</strong> and <strong>
++      {userStr}
++    </strong>
+   </div>
+ );
+ 
+ expression_does_not_break = (
+   <div>
+-    texty text text text text text text text text text text text{" "}
+-    {this.props.type}{" "}
++    texty text text text text text text text text text text text {
++      this.props.type
++    }
++    {" "}
+   </div>
+ );
+ 
+@@ -362,9 +378,8 @@
+ br_triggers_expression_break = (
+   <div>
+     <br />
+-    text text text text text text text text text text text {
+-      this.props.type
+-    }{" "}
++    text text text text text text text text text text text {this.props.type}
++    {" "}
+   </div>
+ );
+ 
+@@ -372,14 +387,14 @@
+   <div>
+     <span a="a" b="b">
+       {variable}
+-    </span>{" "}
++    </span>
+     ({variable})
+   </div>
+ );
+ 
+ x = (
+   <div>
+-    ENDS IN <div>text text text text text text text text text text text</div>{" "}
++    ENDS IN <div>text text text text text text text text text text text</div>
+     HRS
+   </div>
+ );
+@@ -404,8 +419,9 @@
+       <div>
+         <div>
+           <div>
+-            Line {startRange.row + 1}:{startRange.column + 1} -{" "}
+-            {endRange.row + 1}:{endRange.column + 1}
++            Line {startRange.row + 1}:{startRange.column + 1} - {endRange.row +
++              1}
++            :{endRange.column + 1}
+             {caller}
+           </div>
+         </div>
+@@ -436,13 +452,16 @@
+ 
+ x = (
+   <div>
+-    <div>First</div>-<div>Second</div>
++    <div>First</div>-
++    <div>Second</div>
+   </div>
+ );
+ 
+ x = (
+   <div>
+-    <div>First</div>-<div>Second</div>
++    <div>First</div>
++    -
++    <div>Second</div>
+   </div>
+ );
+ 
+@@ -496,19 +515,26 @@
+ 
+ x = (
+   <div>
+-    {hour}:{minute}:{second}
++    {hour}
++    :
++    {minute}
++    :
++    {second}
+   </div>
+ );
+ 
+ x = (
+   <div>
+-    {hour}:{minute}:{second}
++    {hour}:
++    {minute}:
++    {second}
+   </div>
+ );
+ 
+ x = (
+   <div>
+-    <strong>text here</strong>.<br />
++    <strong>text here</strong>.
++    <br />
+   </div>
+ );
+ 
+@@ -528,7 +554,8 @@
+     <span>
+       <strong>{name}</strong>’s{" "}
+     </span>
+-    Hello <strong>world</strong>.<br />
++    Hello <strong>world</strong>.
++    <br />
+     <Text>You {type}ed this shipment to</Text>
+   </div>
+ );
+@@ -564,7 +591,8 @@
+ 
+ let myDiv = ReactTestUtils.renderIntoDocument(
+   <div>
+-    <div key="theDog" className="dog" />,
++    <div key="theDog" className="dog" />
++    ,
+     <div key="theBird" className="bird" />
+   </div>,
+ );
+```
+
+# Output
+
+```js
+// Wrapping text
+x = (
+  <div>
+    Some text that would need to wrap on to a new line in order to display
+    correctly and nicely
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <first>f</first> <first>f</first> <first>f</first> <first>f</first> <first>
+      f
+    </first>
+    <first>f</first>
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+    <first>f</first>
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <a />
+    <b />
+    <c />
+    <first>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</first> <first>
+      f
+    </first>
+  </div>
+);
+
+// Wrapping tags
+x = (
+  <div>
+    <sadashdkjahsdkjhaskjdhaksjdhkashdkashdkasjhdkajshdkashdkashd />
+    <first>f</first>
+  </div>
+);
+
+x = (
+  <div>
+    before
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at
+      mollis lorem.
+    </div>
+    after
+  </div>
+);
+
+x = (
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    {stuff}
+    {stuff}after{stuff}after
+  </div>
+);
+
+x = (
+  <div>
+    before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after {
+      stuff
+    }
+    {stuff} {stuff} after {stuff} after
+  </div>
+);
+
+x = (
+  <div>
+    Please state your <b>name</b> and <b>occupation</b> for the board of <b>
+      school
+    </b>
+    directors.
+  </div>
+);
+
+function DiffOverview(props) {
+  const { source, target, since } = props;
+  return (
+    <div>
+      <div className="alert alert-info">
+        <p>
+          This diff overview is computed against the current list of records in
+          this collection and the list it contained on <b>{humanDate(since)}</b>
+          .
+        </p>
+        <p>
+          <b>Note:</b> <code>last_modified</code> and <code>schema</code> record
+          metadata are omitted for easier review.
+        </p>
+      </div>
+      <Diff source={source} target={target} />
+    </div>
+  );
+}
+
+x = (
+  <font size={-3}>
+    <i>
+      Starting at minute {graphActivity.startTime}, running for {
+        graphActivity.length
+      }
+      to minute {graphActivity.startTime + graphActivity.length}
+    </i>
+  </font>
+);
+
+x = (
+  <div>
+    First second third
+    <div attr="a very long string attribute that will overflow because it is very long">
+      Something
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    <div>First</div>
+    Second
+    <div>Third</div>
+  </div>
+);
+
+x = (
+  <div>
+    First <div>Second</div> Third
+  </div>
+);
+
+leading_whitespace = (
+  <div>
+    {" "}
+    First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh
+    Twelfth Thirteenth Fourteenth
+  </div>
+);
+
+trailing_whitespace = (
+  <div>
+    First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh
+    Twelfth Thirteenth Fourteenth{" "}
+  </div>
+);
+
+no_leading_or_trailing_whitespace = (
+  <div>
+    First Second Third Fourth Fifth Sixth Seventh Eighth Ninth Tenth Eleventh
+    Twelfth Thirteenth Fourteenth
+  </div>
+);
+
+facebook_translation_leave_text_around_tag = (
+  <div>
+    <span>First</span>, (<span>Second</span>)
+  </div>
+);
+
+x = (
+  <div>
+    <span>First second third fourth fifth sixth seventh</span>, (
+    <span>Second</span>)
+  </div>
+);
+
+this_really_should_split_across_lines = (
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    after{stuff}after{stuff}after
+  </div>
+);
+
+unstable_before = (
+  <div className="yourScore">
+    Your score: <span className="score">{`${
+      mini.crosstable.users[sessionUserId]
+    } - ${mini.crosstable.users[user.id]}`}</span>
+  </div>
+);
+
+unstable_after_first_run = (
+  <div className="yourScore">
+    Your score: <span className="score">{`${
+      mini.crosstable.users[sessionUserId]
+    } - ${mini.crosstable.users[user.id]}`}</span>
+  </div>
+);
+
+solitary_whitespace = (
+  <div
+    first="first"
+    second="second"
+    third="third"
+    fourth="fourth"
+    fifth="fifth"
+    sixth="sixth"
+  >
+    {" "}
+  </div>
+);
+
+jsx_whitespace_on_newline = (
+  <div>
+    <div>First</div> <div>Second</div> <div>Third</div>
+  </div>
+);
+
+jsx_around_multiline_element = (
+  <div>
+    Before <div>
+      {
+        "Enough text to make this element wrap on to multiple lines when formatting"
+      }
+    </div>
+    After
+  </div>
+);
+
+jsx_around_multiline_element_second_pass = (
+  <div>
+    Before <div>
+      {
+        "Enough text to make this element wrap on to multiple lines when formatting"
+      }
+    </div>
+    After
+  </div>
+);
+
+convert_space_expressions = <div> </div>;
+
+x = (
+  <div>
+    <first />
+    <second />
+    <third />
+    <fourth />
+    <fifth />
+    <sixth />
+  </div>
+);
+
+const Abc = () => {
+  return (
+    <div>
+      Please state your
+      {" "}<b>name</b>
+      and
+      {" "}<b>occupation</b>
+      for the board of directors.
+    </div>
+  );
+};
+
+x = <div id="moo">Some stuff here</div>;
+
+headers_and_paragraphs = (
+  <div>
+    <h2>First</h2>
+    <p>The first paragraph.</p>
+
+    <h2>Second</h2>
+    <p>The second paragraph.</p>
+  </div>
+);
+
+no_text_one_tag_per_line = (
+  <div>
+    <first />
+    <second />
+  </div>
+);
+
+with_text_fill_line = (
+  <div>
+    Text <first />
+    <second />
+  </div>
+);
+
+line_after_br = (
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+);
+
+line_after_br = (
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+);
+
+line_after_br = (
+  <div>
+    Text
+    <br />
+    More text
+    <br />
+    And more
+    <br />
+  </div>
+);
+
+line_after_br_2 = (
+  <div>
+    A
+    <br />
+    B
+    <br />
+    C
+  </div>
+);
+
+br_followed_by_whitespace = (
+  <div>
+    <br />
+    text
+  </div>
+);
+
+dont_preserve_blank_lines_when_jsx_contains_text = (
+  <div>
+    <div>Zeroth</div>
+
+    <div>First</div>
+    Second
+  </div>
+);
+
+multiple_expressions = (
+  <div>
+    {header}
+    {body}
+    {footer}
+  </div>
+);
+
+single_expression_child_tags = (
+  <div>
+    You currently have <strong>{dashboardStr}</strong> and <strong>
+      {userStr}
+    </strong>
+  </div>
+);
+
+expression_does_not_break = (
+  <div>
+    texty text text text text text text text text text text text {
+      this.props.type
+    }
+    {" "}
+  </div>
+);
+
+// FIXME
+br_triggers_expression_break = (
+  <div>
+    <br />
+    text text text text text text text text text text text {this.props.type}
+    {" "}
+  </div>
+);
+
+jsx_whitespace_after_tag = (
+  <div>
+    <span a="a" b="b">
+      {variable}
+    </span>
+    ({variable})
+  </div>
+);
+
+x = (
+  <div>
+    ENDS IN <div>text text text text text text text text text text text</div>
+    HRS
+  </div>
+);
+
+x = (
+  <div>
+    <h2>Message</h2>
+    Hello, I'm a simple message.
+  </div>
+);
+
+x = (
+  <div>
+    Hello, I'm a simple message.
+    <h2>Message</h2>
+  </div>
+);
+
+x = (
+  <div>
+    <div>
+      <div>
+        <div>
+          <div>
+            Line {startRange.row + 1}:{startRange.column + 1} - {endRange.row +
+              1}
+            :{endRange.column + 1}
+            {caller}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    {" "}
+    <div>text</div>
+  </div>
+);
+
+// NOTE: Multiple JSX whitespaces are collapsed into a single space.
+x = <div> </div>;
+
+// Don't break a self-closing element without attributes
+// ----------
+x = (
+  <p>
+    text text text text text text text text text text text text text text text
+    <br />
+    text text text text text text
+  </p>
+);
+
+x = (
+  <div>
+    <div>First</div>-
+    <div>Second</div>
+  </div>
+);
+
+x = (
+  <div>
+    <div>First</div>
+    -
+    <div>Second</div>
+  </div>
+);
+
+x = (
+  <div>
+    <div>First</div>-<div>Second</div>
+  </div>
+);
+
+x = (
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    <div className="first" tabIndex="1">
+      First
+    </div>
+    -
+    <div className="second" tabIndex="2">
+      Second
+    </div>
+  </div>
+);
+
+x = (
+  <div>
+    {hour}:{minute}:{second}
+  </div>
+);
+
+x = (
+  <div>
+    {hour}
+    :
+    {minute}
+    :
+    {second}
+  </div>
+);
+
+x = (
+  <div>
+    {hour}:
+    {minute}:
+    {second}
+  </div>
+);
+
+x = (
+  <div>
+    <strong>text here</strong>.
+    <br />
+  </div>
+);
+
+x = <div>Sales tax estimated using a rate of {salesTax * 100}%.</div>;
+
+x = <div>{title}&nbsp;</div>;
+
+x = (
+  <div>
+    <span />
+    bar
+  </div>
+);
+
+x = (
+  <div>
+    <span>
+      <strong>{name}</strong>’s{" "}
+    </span>
+    Hello <strong>world</strong>.
+    <br />
+    <Text>You {type}ed this shipment to</Text>
+  </div>
+);
+
+x = (
+  <HelpBlock>
+    {parameter.Description}: {errorMsg}
+  </HelpBlock>
+);
+
+x = (
+  <label>
+    {value} solution{plural}
+  </label>
+);
+
+x = <span>Copy &quot;{name}&quot;</span>;
+
+x = <BasicText light>(avg. {value}/5)</BasicText>;
+
+x = (
+  <p>
+    Use the <code>Button</code>'s
+  </p>
+);
+
+this_really_should_split_across_lines = (
+  <div>
+    before{stuff}after{stuff}after{stuff}after{stuff}after{stuff}after{stuff}
+    after{stuff}after
+  </div>
+);
+
+let myDiv = ReactTestUtils.renderIntoDocument(
+  <div>
+    <div key="theDog" className="dog" />
+    ,
+    <div key="theBird" className="bird" />
+  </div>,
+);
+```
+
+
+# Lines exceeding max width of 80 characters
+```
+   72:     before {stuff} after {stuff} after {stuff} after {stuff} after {stuff} after {
+  122:     <div attr="a very long string attribute that will overflow because it is very long">
+  224:         "Enough text to make this element wrap on to multiple lines when formatting"
+  235:         "Enough text to make this element wrap on to multiple lines when formatting"
+```
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/prepare_tests.js b/crates/rome_js_formatter/tests/specs/prettier/prepare_tests.js
index 288ca96c300..9840ae0e75e 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/prepare_tests.js
+++ b/crates/rome_js_formatter/tests/specs/prettier/prepare_tests.js
@@ -78,6 +78,7 @@ async function traverseDir(dir, config) {
 }
 
 const PRETTIER_ROOT_JS = path.resolve(PRETTIER_ROOT, "js");
+const PRETTIER_ROOT_JSX = path.resolve(PRETTIER_ROOT, "jsx");
 const PRETTIER_ROOT_TS = path.resolve(PRETTIER_ROOT, "typescript");
 
 const defaultConfig = {
@@ -94,6 +95,13 @@ async function main() {
         ...defaultConfig,
         parser: "babel",
     });
+
+		console.log("Extracting tests from %s ...", {PRETTIER_ROOT_JSX});
+		await traverseDir(PRETTIER_ROOT_JSX, {
+			...defaultConfig,
+			parser: "babel",
+		});
+
     console.log("Extracting tests from %s ...", PRETTIER_ROOT_TS);
     await traverseDir(PRETTIER_ROOT_TS, {
         ...defaultConfig,
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts b/crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts
new file mode 100644
index 00000000000..de1ccb2859a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts
@@ -0,0 +1 @@
+type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts.prettier-snap
new file mode 100644
index 00000000000..de1ccb2859a
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/conditional-types/issue-13275.ts.prettier-snap
@@ -0,0 +1 @@
+type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.prettier-snap
index ba48c56ec74..7ba227a2b2c 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.prettier-snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.prettier-snap
@@ -1,13 +1,13 @@
 enum A {
-  [i++],
+  i++,
 }
 
 const bar = "bar";
 enum B {
-  [bar] = 2,
+  bar = 2,
 }
 
 const foo = () => "foo";
 enum C {
-  [foo()] = 2,
+  foo() = 2,
 }
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.snap
index 0f789d4cf8d..3c1443ded3f 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/enum/computed-members.ts.snap
@@ -1,5 +1,7 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: typescript/enum/computed-members.ts
 ---
 
 # Input
@@ -28,19 +30,19 @@ enum C {
 +++ Rome
 @@ -1,13 +1,7 @@
 -enum A {
--  [i++],
+-  i++,
 -}
 +enum A { [i++] }
  
  const bar = "bar";
 -enum B {
--  [bar] = 2,
+-  bar = 2,
 -}
 +enum B { [bar] = 2 }
  
  const foo = () => "foo";
 -enum C {
--  [foo()] = 2,
+-  foo() = 2,
 -}
 +enum C { [foo()] = 2 }
 ```
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.prettier-snap
index 7751d7a4192..fd8cf153040 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.prettier-snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.prettier-snap
@@ -1,8 +1,8 @@
 let a: *;
 function b(x: ?) {}
 let c: ?string;
-let d: string?;
+let d: ?string;
 let e: ?(string | number);
 let f: !string;
-let g: string!;
+let g: !string;
 let h: !(string | number);
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.snap
index bc35ce5fc7d..7f845c09a23 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/error-recovery/jsdoc_only_types.ts.snap
@@ -1,5 +1,7 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: typescript/error-recovery/jsdoc_only_types.ts
 ---
 
 # Input
@@ -27,10 +29,10 @@ let h: !(string | number);
 +*
  function b(x: ?) {}
 -let c: ?string;
--let d: string?;
+-let d: ?string;
 -let e: ?(string | number);
 -let f: !string;
--let g: string!;
+-let g: !string;
 -let h: !(string | number);
 +let c:
 +?string
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts b/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts
index 579bb27c4f3..3bf95b1df83 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts
@@ -1,7 +1,7 @@
 export interface Environment1 extends GenericEnvironment<
   SomeType,
   AnotherType,
-  YetAnotherType
+  YetAnotherType,
 > {
   m(): void;
 };
@@ -12,7 +12,7 @@ export class Environment2 extends GenericEnvironment<
   DifferentType1,
   DifferentType2,
   DifferentType3,
-  DifferentType4
+  DifferentType4,
 > {
   m() {};
 };
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts.snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts.snap
index 0aafee6722c..5104cc03914 100644
--- a/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts.snap
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/interface2/break.ts.snap
@@ -1,5 +1,7 @@
 ---
 source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: typescript/interface2/break.ts
 ---
 
 # Input
@@ -8,7 +10,7 @@ source: crates/rome_js_formatter/tests/prettier_tests.rs
 export interface Environment1 extends GenericEnvironment<
   SomeType,
   AnotherType,
-  YetAnotherType
+  YetAnotherType,
 > {
   m(): void;
 };
@@ -19,7 +21,7 @@ export class Environment2 extends GenericEnvironment<
   DifferentType1,
   DifferentType2,
   DifferentType3,
-  DifferentType4
+  DifferentType4,
 > {
   m() {};
 };
@@ -79,7 +81,30 @@ export interface ExtendsLongOneWithGenerics extends Bar< SomeLongTypeSomeLongTyp
 ```diff
 --- Prettier
 +++ Rome
-@@ -68,14 +68,14 @@
+@@ -1,5 +1,8 @@
+-export interface Environment1
+-  extends GenericEnvironment<SomeType, AnotherType, YetAnotherType> {
++export interface Environment1 extends GenericEnvironment<
++  SomeType,
++  AnotherType,
++  YetAnotherType,
++> {
+   m(): void;
+ }
+ export class Environment2 extends GenericEnvironment<
+@@ -9,9 +12,9 @@
+   DifferentType1,
+   DifferentType2,
+   DifferentType3,
+-  DifferentType4
++  DifferentType4,
+ > {
+-  m() {}
++  m() {};
+ }
+ 
+ // Declare Interface Break
+@@ -68,14 +71,14 @@
  
  interface ExtendsMany
    extends ASingleGenericInterface<
@@ -102,7 +127,7 @@ export interface ExtendsLongOneWithGenerics extends Bar< SomeLongTypeSomeLongTyp
    x: string;
  }
  
-@@ -97,6 +97,6 @@
+@@ -97,6 +100,6 @@
  
  export interface ExtendsLongOneWithGenerics
    extends Bar<
@@ -117,8 +142,11 @@ export interface ExtendsLongOneWithGenerics extends Bar< SomeLongTypeSomeLongTyp
 # Output
 
 ```js
-export interface Environment1
-  extends GenericEnvironment<SomeType, AnotherType, YetAnotherType> {
+export interface Environment1 extends GenericEnvironment<
+  SomeType,
+  AnotherType,
+  YetAnotherType,
+> {
   m(): void;
 }
 export class Environment2 extends GenericEnvironment<
@@ -128,9 +156,9 @@ export class Environment2 extends GenericEnvironment<
   DifferentType1,
   DifferentType2,
   DifferentType3,
-  DifferentType4
+  DifferentType4,
 > {
-  m() {}
+  m() {};
 }
 
 // Declare Interface Break
@@ -222,4 +250,21 @@ export interface ExtendsLongOneWithGenerics
 ```
 
 
+# Errors
+```
+error[SyntaxError]: expected a type parameter but instead found '>'
+  ┌─ break.ts:5:1
+  │
+5 │ > {
+  │ ^ Expected a type parameter here
+
+error[SyntaxError]: expected a type parameter but instead found '>'
+   ┌─ break.ts:16:1
+   │
+16 │ > {
+   │ ^ Expected a type parameter here
+
+
+```
+
 
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts b/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts
new file mode 100644
index 00000000000..22648828e01
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts
@@ -0,0 +1,6 @@
+type loremIpsumFooBazBar1 = 'Multiline string\
+         Multiline string'
+
+type loremIpsumFooBazBar2 = 'Multiline string\
+         Multiline string\
+         Multiline string'
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.prettier-snap
new file mode 100644
index 00000000000..73c3e12f412
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.prettier-snap
@@ -0,0 +1,7 @@
+type loremIpsumFooBazBar1 = "Multiline string\
+         Multiline string";
+
+type loremIpsumFooBazBar2 =
+  "Multiline string\
+         Multiline string\
+         Multiline string";
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.snap
new file mode 100644
index 00000000000..553bece6606
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/literal/multiline.ts.snap
@@ -0,0 +1,47 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: typescript/literal/multiline.ts
+---
+
+# Input
+
+```js
+type loremIpsumFooBazBar1 = 'Multiline string\
+         Multiline string'
+
+type loremIpsumFooBazBar2 = 'Multiline string\
+         Multiline string\
+         Multiline string'
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -1,7 +1,6 @@
+ type loremIpsumFooBazBar1 = "Multiline string\
+          Multiline string";
+ 
+-type loremIpsumFooBazBar2 =
+-  "Multiline string\
++type loremIpsumFooBazBar2 = "Multiline string\
+          Multiline string\
+          Multiline string";
+```
+
+# Output
+
+```js
+type loremIpsumFooBazBar1 = "Multiline string\
+         Multiline string";
+
+type loremIpsumFooBazBar2 = "Multiline string\
+         Multiline string\
+         Multiline string";
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts
new file mode 100644
index 00000000000..e10c347fb64
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts
@@ -0,0 +1,6 @@
+// https://github.com/typescript-eslint/typescript-eslint/pull/4382
+function decorator() {}
+@decorator
+class Foo {
+  bar(baz: typeof this) {}
+}
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.prettier-snap
new file mode 100644
index 00000000000..e10c347fb64
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.prettier-snap
@@ -0,0 +1,6 @@
+// https://github.com/typescript-eslint/typescript-eslint/pull/4382
+function decorator() {}
+@decorator
+class Foo {
+  bar(baz: typeof this) {}
+}
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.snap
new file mode 100644
index 00000000000..e9c459e11a2
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/decorators.ts.snap
@@ -0,0 +1,46 @@
+---
+source: crates/rome_js_formatter/tests/prettier_tests.rs
+info:
+  test_file: typescript/typeof-this/decorators.ts
+---
+
+# Input
+
+```js
+// https://github.com/typescript-eslint/typescript-eslint/pull/4382
+function decorator() {}
+@decorator
+class Foo {
+  bar(baz: typeof this) {}
+}
+```
+
+
+# Prettier differences
+
+```diff
+--- Prettier
++++ Rome
+@@ -1,5 +1,6 @@
+ // https://github.com/typescript-eslint/typescript-eslint/pull/4382
+ function decorator() {}
++
+ @decorator
+ class Foo {
+   bar(baz: typeof this) {}
+```
+
+# Output
+
+```js
+// https://github.com/typescript-eslint/typescript-eslint/pull/4382
+function decorator() {}
+
+@decorator
+class Foo {
+  bar(baz: typeof this) {}
+}
+```
+
+
+
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts
new file mode 100644
index 00000000000..7f3c4f11d4c
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts
@@ -0,0 +1,3 @@
+// https://github.com/typescript-eslint/typescript-eslint/pull/4382
+let self: typeof this;
+let foo: typeof this.foo;
diff --git a/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts.prettier-snap b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts.prettier-snap
new file mode 100644
index 00000000000..7f3c4f11d4c
--- /dev/null
+++ b/crates/rome_js_formatter/tests/specs/prettier/typescript/typeof-this/typeof-this.ts.prettier-snap
@@ -0,0 +1,3 @@
+// https://github.com/typescript-eslint/typescript-eslint/pull/4382
+let self: typeof this;
+let foo: typeof this.foo;