Run JSX tests from jsx-test-suite (#19484)

package.json

@@ -172,6 +172,7 @@
     "jest-watch-typeahead": "3.0.1",
     "jsesc": "3.1.0",
     "json-test-suite": "1.0.0",
+    "jsx-test-suite": "0.0.2",
     "knip": "6.21.0",
     "magic-string": "0.30.21",
     "make-synchronized": "0.8.0",

tests/format/jsx/jsx-test-suite/__snapshots__/format.test.js.snap

@@ -0,0 +1,578 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`snippet: 0005-87c4.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a>{/* foo */}</a>
+=====================================output=====================================
+<a>{/* foo */}</a>;
+
+================================================================================
+`;
+
+exports[`snippet: 0006-e58e.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<!--a
+=====================================output=====================================
+<!--a
+
+================================================================================
+`;
+
+exports[`snippet: 0006-e58e.jsx format[__babel_estree] 1`] = `
+"Unexpected token (1:1)
+> 1 | <!--a
+    | ^
+Cause: Unexpected token (1:0)"
+`;
+
+exports[`snippet: 0006-e58e.jsx format[babel] 1`] = `
+"Unexpected token (1:1)
+> 1 | <!--a
+    | ^
+Cause: Unexpected token (1:0)"
+`;
+
+exports[`snippet: 0006-e58e.jsx format[babel-ts] 1`] = `
+"Unexpected token (1:1)
+> 1 | <!--a
+    | ^
+Cause: Unexpected token (1:0)"
+`;
+
+exports[`snippet: 0006-e58e.jsx format[flow] 1`] = `
+"Unexpected token \`!\`, expected the token \`>\` (1:2)
+> 1 | <!--a
+    |  ^
+Cause: Unexpected token \`!\`, expected the token \`>\` (1:1)"
+`;
+
+exports[`snippet: 0006-e58e.jsx format[hermes] 1`] = `
+"'identifier' expected as JSX element name (1:2)
+> 1 | <!--a
+    |  ^
+Cause: 'identifier' expected as JSX element name (1:1)
+<!--a
+ ^"
+`;
+
+exports[`snippet: 0006-e58e.jsx format[typescript] 1`] = `
+"Expression expected. (1:1)
+> 1 | <!--a
+    | ^
+Cause: Expression expected."
+`;
+
+exports[`snippet: 0007-e20f.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a />
+=====================================output=====================================
+<a />;
+
+================================================================================
+`;
+
+exports[`snippet: 0008-bbc9.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<n:a n:v />
+=====================================output=====================================
+<n:a n:v />;
+
+================================================================================
+`;
+
+exports[`snippet: 0009-5240.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a n:foo="bar"> {value} <b><c /></b></a>
+=====================================output=====================================
+<a n:foo="bar">
+  {" "}
+  {value}{" "}
+  <b>
+    <c />
+  </b>
+</a>;
+
+================================================================================
+`;
+
+exports[`snippet: 0010-fb6b.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a b={" "} c=" " d="&amp;" e="&ampr;" />
+=====================================output=====================================
+<a b={" "} c=" " d="&amp;" e="&ampr;" />;
+
+================================================================================
+`;
+
+exports[`snippet: 0011-b127.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a
+/>
+=====================================output=====================================
+<a />;
+
+================================================================================
+`;
+
+exports[`snippet: 0012-912c.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<日本語></日本語>
+=====================================output=====================================
+<日本語></日本語>;
+
+================================================================================
+`;
+
+exports[`snippet: 0012-912c.jsx format[flow] 1`] = `
+"Unexpected token \`日\`, expected the token \`>\` (1:2)
+> 1 | <日本語></日本語>
+    |  ^
+Cause: Unexpected token \`日\`, expected the token \`>\` (1:1)"
+`;
+
+exports[`snippet: 0013-e776.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<AbC-def
+  test="&#x0026;&#38;">
+bar
+baz
+</AbC-def>
+=====================================output=====================================
+<AbC-def test="&#x0026;&#38;">bar baz</AbC-def>;
+
+================================================================================
+`;
+
+exports[`snippet: 0014-b2d2.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a b={x ? <c /> : <d />} />
+=====================================output=====================================
+<a b={x ? <c /> : <d />} />;
+
+================================================================================
+`;
+
+exports[`snippet: 0015-1c64.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a>{}</a>
+=====================================output=====================================
+<a>{}</a>;
+
+================================================================================
+`;
+
+exports[`snippet: 0016-30fa.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a>{/* this is a comment */}</a>
+=====================================output=====================================
+<a>{/* this is a comment */}</a>;
+
+================================================================================
+`;
+
+exports[`snippet: 0017-5bfe.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div>@test content</div>
+=====================================output=====================================
+<div>@test content</div>;
+
+================================================================================
+`;
+
+exports[`snippet: 0018-c189.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div><br />7x invalid-js-identifier</div>
+=====================================output=====================================
+<div>
+  <br />
+  7x invalid-js-identifier
+</div>;
+
+================================================================================
+`;
+
+exports[`snippet: 0019-c21b.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<LeftRight left=<a /> right=<b>monkeys /{">"} gorillas</b> />
+=====================================output=====================================
+<LeftRight left=<a /> right=<b>monkeys /{">"} gorillas</b> />;
+
+================================================================================
+`;
+
+exports[`snippet: 0019-c21b.jsx format[flow] 1`] = `
+"JSX value should be either an expression or a quoted JSX text (1:17)
+> 1 | <LeftRight left=<a /> right=<b>monkeys /{">"} gorillas</b> />
+    |                 ^
+Cause: JSX value should be either an expression or a quoted JSX text (1:16)"
+`;
+
+exports[`snippet: 0019-c21b.jsx format[hermes] 1`] = `
+"'{' expected in JSX attribute (1:17)
+> 1 | <LeftRight left=<a /> right=<b>monkeys /{">"} gorillas</b> />
+    |                 ^
+Cause: '{' expected in JSX attribute (1:16)
+<LeftRight left=<a /> right=<b>monkeys /{">"} gorillas</b> />
+           ~~~~~^"
+`;
+
+exports[`snippet: 0020-2386.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<LeftRight left=<a /> right=<b>monkeys /&gt; gorillas</b> />
+=====================================output=====================================
+<LeftRight left=<a /> right=<b>monkeys /&gt; gorillas</b> />;
+
+================================================================================
+`;
+
+exports[`snippet: 0020-2386.jsx format[flow] 1`] = `
+"JSX value should be either an expression or a quoted JSX text (1:17)
+> 1 | <LeftRight left=<a /> right=<b>monkeys /&gt; gorillas</b> />
+    |                 ^
+Cause: JSX value should be either an expression or a quoted JSX text (1:16)"
+`;
+
+exports[`snippet: 0020-2386.jsx format[hermes] 1`] = `
+"'{' expected in JSX attribute (1:17)
+> 1 | <LeftRight left=<a /> right=<b>monkeys /&gt; gorillas</b> />
+    |                 ^
+Cause: '{' expected in JSX attribute (1:16)
+<LeftRight left=<a /> right=<b>monkeys /&gt; gorillas</b> />
+           ~~~~~^"
+`;
+
+exports[`snippet: 0021-648f.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a.b></a.b>
+=====================================output=====================================
+<a.b></a.b>;
+
+================================================================================
+`;
+
+exports[`snippet: 0022-2b2b.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<a.b.c></a.b.c>
+=====================================output=====================================
+<a.b.c></a.b.c>;
+
+================================================================================
+`;
+
+exports[`snippet: 0023-f709.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+(<div />) < x;
+=====================================output=====================================
+(<div />) < x;
+
+================================================================================
+`;
+
+exports[`snippet: 0023-f709.jsx format[flow] 1`] = `
+"Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag (1:11)
+> 1 | (<div />) < x;
+    |           ^
+Cause: Unexpected token <. Remember, adjacent JSX elements must be wrapped in an enclosing parent tag (1:10)"
+`;
+
+exports[`snippet: 0024-8dcd.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div {...props} />
+=====================================output=====================================
+<div {...props} />;
+
+================================================================================
+`;
+
+exports[`snippet: 0025-d44b.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div {...props} post="attribute" />
+=====================================output=====================================
+<div {...props} post="attribute" />;
+
+================================================================================
+`;
+
+exports[`snippet: 0026-8c19.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div pre="leading" pre2="attribute" {...props}></div>
+=====================================output=====================================
+<div pre="leading" pre2="attribute" {...props}></div>;
+
+================================================================================
+`;
+
+exports[`snippet: 0027-b6c2.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<A aa={aa.bb.cc} bb={bb.cc.dd}><div>{aa.b}</div></A>
+=====================================output=====================================
+<A aa={aa.bb.cc} bb={bb.cc.dd}>
+  <div>{aa.b}</div>
+</A>;
+
+================================================================================
+`;
+
+exports[`snippet: 0028-ea7d.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<><div></div></>
+=====================================output=====================================
+<>
+  <div></div>
+</>;
+
+================================================================================
+`;
+
+exports[`snippet: 0029-5737.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<p>foo <a href="test"> bar</a> baz</p> ;
+=====================================output=====================================
+<p>
+  foo <a href="test"> bar</a> baz
+</p>;
+
+================================================================================
+`;
+
+exports[`snippet: 0030-450d.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div>{<div {...test} />}</div>
+=====================================output=====================================
+<div>{<div {...test} />}</div>;
+
+================================================================================
+`;
+
+exports[`snippet: 0031-b330.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div>{ {a} }</div>
+=====================================output=====================================
+<div>{{ a }}</div>;
+
+================================================================================
+`;
+
+exports[`snippet: 0032-e087.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div>/text</div>
+=====================================output=====================================
+<div>/text</div>;
+
+================================================================================
+`;
+
+exports[`snippet: 0033-d15f.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div>{a}{b}</div>
+=====================================output=====================================
+<div>
+  {a}
+  {b}
+</div>;
+
+================================================================================
+`;
+
+exports[`snippet: 0034-75fb.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<div pre="leading" {...props} />
+=====================================output=====================================
+<div pre="leading" {...props} />;
+
+================================================================================
+`;
+
+exports[`snippet: 0035-2f55.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<path d="M230 80
+		A 45 45, 0, 1, 0, 275 125 
+    L 275 80 Z"/>
+=====================================output=====================================
+<path
+  d="M230 80
+		A 45 45, 0, 1, 0, 275 125 
+    L 275 80 Z"
+/>;
+
+================================================================================
+`;
+
+exports[`snippet: 0041-35d9.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<A>foo{"{"}</A>
+=====================================output=====================================
+<A>foo{"{"}</A>;
+
+================================================================================
+`;
+
+exports[`snippet: 0042-491a.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<A>foo{"<"}</A>
+=====================================output=====================================
+<A>foo{"<"}</A>;
+
+================================================================================
+`;
+
+exports[`snippet: 0043-690b.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<A>foo{"}"}</A>
+=====================================output=====================================
+<A>foo{"}"}</A>;
+
+================================================================================
+`;
+
+exports[`snippet: 0044-16f0.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<A>foo&rbrace;</A>
+=====================================output=====================================
+<A>foo&rbrace;</A>;
+
+================================================================================
+`;
+
+exports[`snippet: 0045-7784.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<A>foo{">"}</A>
+=====================================output=====================================
+<A>foo{">"}</A>;
+
+================================================================================
+`;
+
+exports[`snippet: 0046-8011.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+<A>foo&gt;</A>
+=====================================output=====================================
+<A>foo&gt;</A>;
+
+================================================================================
+`;
+
+exports[`snippet: 0047-fdd5.jsx format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+                                                      printWidth: 80 (default) |
+=====================================input======================================
+function*it(){yield <a></a>}
+=====================================output=====================================
+function* it() {
+  yield <a></a>;
+}
+
+================================================================================
+`;

tests/format/jsx/jsx-test-suite/format.test.js

@@ -0,0 +1,31 @@
+import jsxTestSuite from "jsx-test-suite";
+
+const SKIP = new Set();
+const testCases = jsxTestSuite.filter(({ id }) => !SKIP.has(id));
+
+const htmlComments = ["0006-e58e.jsx"];
+
+const snippets = testCases
+  .filter(({ error }) => !error)
+  .map(({ name, input }) => ({ name, filename: name, code: input }));
+
+runFormatTest(
+  { importMeta: import.meta, snippets },
+  ["babel", "typescript", "flow"],
+  {
+    errors: {
+      babel: htmlComments,
+      "babel-ts": htmlComments,
+      __babel_estree: htmlComments,
+      typescript: htmlComments,
+      flow: [
+        ...htmlComments,
+        "0012-912c.jsx",
+        "0019-c21b.jsx",
+        "0020-2386.jsx",
+        "0023-f709.jsx",
+      ],
+      hermes: [...htmlComments, "0019-c21b.jsx", "0020-2386.jsx"],
+    },
+  },
+);

yarn.lock

@@ -6318,6 +6318,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsx-test-suite@npm:0.0.2":
+  version: 0.0.2
+  resolution: "jsx-test-suite@npm:0.0.2"
+  checksum: 10/37829b06dc68a223741b28e73298c510a9dc7d36f68c4e2d417fcd4628833804f7546cc0e80096215c434175c01b38548792887fb0166061727660dd64b696d5
+  languageName: node
+  linkType: hard
+
 "kasi@npm:^2.0.1":
   version: 2.0.1
   resolution: "kasi@npm:2.0.1"
@@ -8001,6 +8008,7 @@ __metadata:
     jsesc: "npm:3.1.0"
     json-test-suite: "npm:1.0.0"
     json5: "npm:2.2.3"
+    jsx-test-suite: "npm:0.0.2"
     knip: "npm:6.21.0"
     leven: "npm:4.1.0"
     linguist-languages: "npm:9.4.0"