From 380a55b64f8a8b1996a5c119cc275979fa4ee579 Mon Sep 17 00:00:00 2001
From: Micha Reiser <micha@rome.tools>
Date: Mon, 19 Sep 2022 17:10:44 +0200
Subject: [PATCH] test(rome_js_formatter): Add prettier JSX tests

This PR extracts the JSX tests from prettier and updates existing tests.

There are a few instability issues, most related to comments. I'll look into those as part of the comments refactoring
---
 .../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 +-
 .../tests/specs/prettier/js/record/spread.js  |   1 -
 .../specs/prettier/js/record/spread.js.snap   |   3 +-
 .../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/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 ++++
 .../specs/prettier/jsx/fragment/fragment.js   |  72 +++
 .../jsx/fragment/fragment.js.prettier-snap    |  72 +++
 .../specs/prettier/jsx/ignore/jsx_ignore.js   |  56 ++
 .../jsx/ignore/jsx_ignore.js.prettier-snap    |  55 ++
 .../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/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 ++++
 .../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 ++++++
 .../specs/prettier/jsx/spread/attribute.js    |  25 +
 .../jsx/spread/attribute.js.prettier-snap     |  36 ++
 .../tests/specs/prettier/jsx/spread/child.js  |  23 +
 .../jsx/spread/child.js.prettier-snap         |  32 +
 .../prettier/jsx/stateless-arrow-fn/test.js   |  73 +++
 .../stateless-arrow-fn/test.js.prettier-snap  | 170 ++++++
 .../jsx/template/styled-components.js         |  18 +
 .../styled-components.js.prettier-snap        |  19 +
 .../specs/prettier/jsx/text-wrap/test.js      | 458 ++++++++++++++
 .../jsx/text-wrap/test.js.prettier-snap       | 570 ++++++++++++++++++
 .../tests/specs/prettier/prepare_tests.js     |   8 +
 .../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 +-
 60 files changed, 2893 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/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/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/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/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/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/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/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/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/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/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/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/text-wrap/test.js
 create mode 100644 crates/rome_js_formatter/tests/specs/prettier/jsx/text-wrap/test.js.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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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
+
+
+```
+