Run JSX tests on acorn, espree and meriyah (#10494)

CONTRIBUTING.md

@@ -48,7 +48,7 @@ function run_spec(
 Parameters:
 
 - **`fixtures`**: Must be set to `import.meta` or to an object of the shape `{ importMeta: import.meta, ... }`. The object may have the `snippets` property to specify an array of extra input entries in addition to the files in the current directory. For each input entry (a file or a snippet), `run_spec` configures and runs a number of tests. The main check is that for a given input the output should match the snapshot (for snippets, the expected output can also be specified directly). [Additional checks](#deeper-testing) are controlled by options and environment variables.
-- **`parsers`**: A list of parser names. The tests verify that the parsers in this list produce the same output. If the list includes `typescript`, then `babel-ts` is included implicitly. If the list includes `flow`, then `babel-flow` is included implicitly. If the list includes `babel`, and the current directory is inside `tests/format/js`, then `acorn`, `espree`, and `meriyah` are included implicitly.
+- **`parsers`**: A list of parser names. The tests verify that the parsers in this list produce the same output. If the list includes `typescript`, then `babel-ts` is included implicitly. If the list includes `flow`, then `babel-flow` is included implicitly. If the list includes `babel`, and the current directory is inside `tests/format/js` or `tests/format/jsx`, then `acorn`, `espree`, and `meriyah` are included implicitly.
 - **`options`**: In addition to Prettier's formatting options, can contain the `errors` property to specify that it's expected that the formatting shouldn't be successful and an error should be thrown for all (`errors: true`) or some combinations of input entries and parsers.
 
 The implementation of `run_spec` can be found in [`tests/config/format-test.js`](tests/config/format-test.js).

tests/config/format-test.js

@@ -60,26 +60,26 @@ const espreeDisabledTests = new Set(
 const acornDisabledTests = espreeDisabledTests;
 const meriyahDisabledTests = new Set([
   ...espreeDisabledTests,
-  // Meriyah does not support decorator auto accessors syntax.
-  // But meriyah can parse it as an ordinary class property.
-  // So meriyah does not throw parsing error for it.
   ...[
-    "basic.js",
-    "computed.js",
-    "private.js",
-    "static-computed.js",
-    "static-private.js",
-    "static.js",
-    "with-semicolon-1.js",
-    "with-semicolon-2.js",
-    "comments.js",
-  ].map((filename) =>
-    path.join(__dirname, "../format/js/decorator-auto-accessors", filename)
-  ),
-  path.join(
-    __dirname,
-    "../format/js/babel-plugins/decorator-auto-accessors.js"
-  ),
+    // Meriyah does not support decorator auto accessors syntax.
+    // But meriyah can parse it as an ordinary class property.
+    // So meriyah does not throw parsing error for it.
+    ...[
+      "basic.js",
+      "computed.js",
+      "private.js",
+      "static-computed.js",
+      "static-private.js",
+      "static.js",
+      "with-semicolon-1.js",
+      "with-semicolon-2.js",
+      "comments.js",
+    ].map((filename) => `js/decorator-auto-accessors/${filename}`),
+    // https://github.com/meriyah/meriyah/issues/233
+    "js/babel-plugins/decorator-auto-accessors.js",
+    // https://github.com/meriyah/meriyah/issues/235
+    "jsx/spread/child.js",
+  ].map((file) => path.join(__dirname, "../format", file)),
 ]);
 const babelTsDisabledTest = new Set(
   [].map((directory) => path.join(__dirname, "../format/typescript", directory))
@@ -231,16 +231,19 @@ function runSpec(fixtures, parsers, options) {
       allParsers.push("babel-flow");
     }
 
-    if (parsers.includes("babel") && isTestDirectory(dirname, "js")) {
+    if (
+      parsers.includes("babel") &&
+      (isTestDirectory(dirname, "js") || isTestDirectory(dirname, "jsx"))
+    ) {
+      if (!parsers.includes("acorn") && !acornDisabledTests.has(dirname)) {
+        allParsers.push("acorn");
+      }
       if (!parsers.includes("espree") && !espreeDisabledTests.has(dirname)) {
         allParsers.push("espree");
       }
       if (!parsers.includes("meriyah") && !meriyahDisabledTests.has(dirname)) {
         allParsers.push("meriyah");
       }
-      if (!parsers.includes("acorn") && !acornDisabledTests.has(dirname)) {
-        allParsers.push("acorn");
-      }
     }
 
     if (parsers.includes("babel") && !parsers.includes("__babel_estree")) {

tests/config/utils/check-parsers.js

@@ -76,8 +76,24 @@ const categoryParsers = new Map([
   [
     "jsx",
     {
-      parsers: ["babel", "flow", "babel-flow", "typescript", "babel-ts"],
-      verifyParsers: ["babel", "flow", "babel-flow", "typescript", "babel-ts"],
+      parsers: [
+        "babel",
+        "meriyah",
+        "espree",
+        "flow",
+        "babel-flow",
+        "typescript",
+        "babel-ts",
+      ],
+      verifyParsers: [
+        "babel",
+        "meriyah",
+        "espree",
+        "flow",
+        "babel-flow",
+        "typescript",
+        "babel-ts",
+      ],
       extensions: [".js"],
     },
   ],

tests/format/jsx/comments/__snapshots__/jsfmt.spec.js.snap

@@ -83,6 +83,16 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`in-end-tag.js - {"bracketSameLine":true} [meriyah] format 1`] = `
+"Expected '>' (2:11)
+  1 | /* =========== before slash =========== */
+> 2 | <a><// line
+    |           ^
+  3 | /a>;
+  4 | <a></* block */
+  5 | /a>;"
+`;
+
 exports[`in-end-tag.js - {"bracketSameLine":true} [typescript] format 1`] = `
 "Identifier expected. (2:6)
   1 | /* =========== before slash =========== */

tests/format/jsx/comments/jsfmt.spec.js

@@ -2,5 +2,6 @@ run_spec(import.meta, ["flow", "babel", "typescript"], {
   bracketSameLine: true,
   errors: {
     typescript: ["in-end-tag.js"],
+    meriyah: ["in-end-tag.js", "fragment.js"],
   },
 });

tests/format/jsx/do/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`do.js [acorn] format 1`] = `
+"Unexpected token (2:4)
+  1 | <div>
+> 2 |   {do {
+    |    ^
+  3 | 	  1
+  4 |   }}
+  5 | </div>"
+`;
+
+exports[`do.js [espree] format 1`] = `
+"Unexpected token do (2:4)
+  1 | <div>
+> 2 |   {do {
+    |    ^
+  3 | 	  1
+  4 |   }}
+  5 | </div>"
+`;
+
+exports[`do.js [meriyah] format 1`] = `
+"Unexpected token: 'do' (2:5)
+  1 | <div>
+> 2 |   {do {
+    |     ^
+  3 | 	  1
+  4 |   }}
+  5 | </div>"
+`;
+
 exports[`do.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel"]

tests/format/jsx/do/jsfmt.spec.js

@@ -1 +1,7 @@
-run_spec(import.meta, ["babel"]);
+run_spec(import.meta, ["babel"], {
+  errors: {
+    acorn: ["do.js"],
+    espree: ["do.js"],
+    meriyah: ["do.js"],
+  },
+});

tests/format/jsx/fragment/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`fragment.js [meriyah] format 1`] = `
+"Unexpected token: '>' (38:21)
+  36 | );
+  37 |
+> 38 | </* open fragment */>
+     |                     ^
+  39 |   <Component />
+  40 |   <Component />
+  41 | </ /* close fragment */>;"
+`;
+
 exports[`fragment.js format 1`] = `
 ====================================options=====================================
 parsers: ["flow", "babel", "typescript"]

tests/format/jsx/fragment/jsfmt.spec.js

@@ -1 +1,3 @@
-run_spec(import.meta, ["flow", "babel", "typescript"]);
+run_spec(import.meta, ["flow", "babel", "typescript"], {
+  errors: { meriyah: ["fragment.js"] },
+});

tests/format/jsx/jsx/__snapshots__/jsfmt.spec.js.snap

@@ -2276,6 +2276,39 @@ foo ? (
 ================================================================================
 `;
 
+exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":false} [acorn] format 1`] = `
+"Unexpected token (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":false} [espree] format 1`] = `
+"Unexpected token : (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":false} [meriyah] format 1`] = `
+"Expected ')' (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
 exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":false} format 1`] = `
 ====================================options=====================================
 jsxSingleQuote: false
@@ -2564,6 +2597,39 @@ singleQuote: false
 ================================================================================
 `;
 
+exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":true} [acorn] format 1`] = `
+"Unexpected token (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":true} [espree] format 1`] = `
+"Unexpected token : (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":true} [meriyah] format 1`] = `
+"Expected ')' (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
 exports[`expression.js - {"singleQuote":false,"jsxSingleQuote":true} format 1`] = `
 ====================================options=====================================
 jsxSingleQuote: true
@@ -2852,6 +2918,39 @@ singleQuote: false
 ================================================================================
 `;
 
+exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":false} [acorn] format 1`] = `
+"Unexpected token (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":false} [espree] format 1`] = `
+"Unexpected token : (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":false} [meriyah] format 1`] = `
+"Expected ')' (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
 exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":false} format 1`] = `
 ====================================options=====================================
 jsxSingleQuote: false
@@ -3140,6 +3239,39 @@ singleQuote: true
 ================================================================================
 `;
 
+exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":true} [acorn] format 1`] = `
+"Unexpected token (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":true} [espree] format 1`] = `
+"Unexpected token : (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
+exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":true} [meriyah] format 1`] = `
+"Expected ')' (87:8)
+  85 | <Component
+  86 |   onChange={(
+> 87 |     key: "possible_key_1" | "possible_key_2" | "possible_key_3",
+     |        ^
+  88 |     value: string | Immutable.List<string>,
+  89 |   ) => {
+  90 |     this.setState({"
+`;
+
 exports[`expression.js - {"singleQuote":true,"jsxSingleQuote":true} format 1`] = `
 ====================================options=====================================
 jsxSingleQuote: true

tests/format/jsx/jsx/jsfmt.spec.js

@@ -1,16 +1,26 @@
+const errors = {
+  acorn: ["expression.js"],
+  espree: ["expression.js"],
+  meriyah: ["expression.js"],
+};
+
 run_spec(import.meta, ["flow", "babel", "typescript"], {
   singleQuote: false,
   jsxSingleQuote: false,
+  errors,
 });
 run_spec(import.meta, ["flow", "babel", "typescript"], {
   singleQuote: false,
   jsxSingleQuote: true,
+  errors,
 });
 run_spec(import.meta, ["flow", "babel", "typescript"], {
   singleQuote: true,
   jsxSingleQuote: false,
+  errors,
 });
 run_spec(import.meta, ["flow", "babel", "typescript"], {
   singleQuote: true,
   jsxSingleQuote: true,
+  errors,
 });

tests/format/jsx/spread/__snapshots__/jsfmt.spec.js.snap

@@ -73,6 +73,24 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`child.js [acorn] format 1`] = `
+"Unexpected token (1:7)
+> 1 | <div>{...a}</div>;
+    |       ^
+  2 |
+  3 | <div>{...a /* comment */}</div>;
+  4 |"
+`;
+
+exports[`child.js [espree] format 1`] = `
+"Unexpected token ... (1:7)
+> 1 | <div>{...a}</div>;
+    |       ^
+  2 |
+  3 | <div>{...a /* comment */}</div>;
+  4 |"
+`;
+
 exports[`child.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "flow", "typescript"]

tests/format/jsx/spread/jsfmt.spec.js

@@ -1 +1,6 @@
-run_spec(import.meta, ["babel", "flow", "typescript"]);
+run_spec(import.meta, ["babel", "flow", "typescript"], {
+  errors: {
+    acorn: ["child.js"],
+    espree: ["child.js"],
+  },
+});

tests/format/jsx/tuple/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`tuple.js [acorn] format 1`] = `
+"Unexpected character '[' (6:6)
+  4 | ]
+  5 |
+> 6 | a = #[
+    |      ^
+  7 |   <div/>,
+  8 |   <div/>,
+  9 | ]"
+`;
+
+exports[`tuple.js [espree] format 1`] = `
+"Unexpected character '[' (6:6)
+  4 | ]
+  5 |
+> 6 | a = #[
+    |      ^
+  7 |   <div/>,
+  8 |   <div/>,
+  9 | ]"
+`;
+
+exports[`tuple.js [meriyah] format 1`] = `
+"'#' not followed by identifier (6:5)
+  4 | ]
+  5 |
+> 6 | a = #[
+    |     ^
+  7 |   <div/>,
+  8 |   <div/>,
+  9 | ]"
+`;
+
 exports[`tuple.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel"]

tests/format/jsx/tuple/jsfmt.spec.js

@@ -1 +1,7 @@
-run_spec(import.meta, ["babel"]);
+run_spec(import.meta, ["babel"], {
+  errors: {
+    acorn: ["tuple.js"],
+    espree: ["tuple.js"],
+    meriyah: ["tuple.js"],
+  },
+});