test(e2e): add base babelrc support tests for dev and prod (#30644)

* test(e2e): add base babelrc support tests for dev and prod

* test(e2e): add editing .babelrc case

* test(e2e): add adding  .babelrc case

* test(e2e): add removing .babelrc case

* maybe this command will work in circle?

e2e-tests/development-runtime/cypress/integration/functionality/babelrc.js

@@ -0,0 +1,91 @@
+const TEST_ELEMENT = `test-element`
+
+before(() => {
+  cy.exec(`npm run reset`)
+})
+
+after(() => {
+  cy.exec(`npm run reset`)
+})
+
+describe(`babelrc`, () => {
+  it(`Applies .babelrc`, () => {
+    cy.visit(`/babelrc/base/`).waitForRouteChange()
+
+    cy.getTestElement(TEST_ELEMENT)
+      .invoke(`text`)
+      .should(`eq`, `babel-rc-is-used`)
+  })
+
+  describe(`hot reload`, () => {
+    it(`editing .babelrc`, () => {
+      cy.visit(`/babelrc/edit/`).waitForRouteChange()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-initial`)
+
+      cy.exec(
+        `npm run update -- --file src/pages/babelrc/edit/.babelrc --replacements "babel-rc-initial:babel-rc-edited" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-edited`)
+    })
+
+    it(`adding .babelrc`, () => {
+      cy.visit(`/babelrc/add/`).waitForRouteChange()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-test`)
+
+      cy.exec(
+        `npm run update -- --file src/pages/babelrc/add/.babelrc --file-source src/pages/babelrc/add/.babelrc-fixture`
+      )
+
+      // babel-loader doesn't actually hot reloads itself when new .babelrc file is added
+      // this is because it registers dependency only if file already exists
+      // ( https://github.com/babel/babel-loader/blob/1669ac07ee1eed28a8e6fcacbf1c07ceb06fe053/src/index.js#L214-L216 )
+      // so to test hot-reloading here we actually have to invalidate js file, which would recompile it and discover
+      // new babelrc file
+      cy.exec(
+        `npm run update -- --file src/pages/babelrc/add/index.js --replacements "foo-bar:foo-bar" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-added`)
+    })
+
+    it(`removing .babelrc`, () => {
+      cy.visit(`/babelrc/remove/`).waitForRouteChange()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-will-be-deleted`)
+
+      cy.exec(
+        `npm run update -- --file src/pages/babelrc/remove/.babelrc --delete`
+      )
+
+      // babel-loader doesn't actually hot reloads itself when .babelrc file is deleted
+      // so to test hot-reloading here we actually have to invalidate js file, which would recompile it and discover
+      // new babelrc file
+      cy.exec(
+        `npm run update -- --file src/pages/babelrc/remove/index.js --replacements "foo-bar:foo-bar" --exact`
+      )
+
+      cy.waitForHmr()
+
+      cy.getTestElement(TEST_ELEMENT)
+        .invoke(`text`)
+        .should(`eq`, `babel-rc-test`)
+    })
+  })
+})

e2e-tests/development-runtime/package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "author": "Dustin Schau <dustin@gatsbyjs.com>",
   "dependencies": {
+    "babel-plugin-search-and-replace": "^1.1.0",
     "gatsby": "^3.0.0-next.6",
     "gatsby-image": "^3.0.0-next.0",
     "gatsby-plugin-image": "^1.0.0-next.5",

e2e-tests/development-runtime/scripts/update.js

@@ -17,6 +17,10 @@ const args = yargs
     default: false,
     type: `boolean`,
   })
+  .option(`delete`, {
+    default: false,
+    type: `boolean`,
+  })
   .option(`fileContent`, {
     default: JSON.stringify(
       `
@@ -35,6 +39,9 @@ const args = yargs
     ).trim(),
     type: `string`,
   })
+  .option(`fileSource`, {
+    type: `string`,
+  })
   .option(`restore`, {
     default: false,
     type: `boolean`,
@@ -60,27 +67,35 @@ async function update() {
   let exists = true
   if (!fs.existsSync(filePath)) {
     exists = false
-    await fs.writeFile(
-      filePath,
-      JSON.parse(args.fileContent).replace(/\+n/g, `\n`),
-      `utf8`
-    )
+    let fileContent
+    if (args.fileSource) {
+      fileContent = await fs.readFile(args.fileSource, `utf8`)
+    } else if (args.fileContent) {
+      fileContent = JSON.parse(args.fileContent).replace(/\+n/g, `\n`)
+    }
+    await fs.writeFile(filePath, fileContent, `utf8`)
   }
   const file = await fs.readFile(filePath, `utf8`)
 
   if (!history.has(filePath)) {
     history.set(filePath, exists ? file : false)
   }
 
-  const contents = replacements.reduce((replaced, pair) => {
-    const [key, value] = pair.split(`:`)
-    return replaced.replace(
-      args.exact ? key : new RegExp(`%${key}%`, `g`),
-      value
-    )
-  }, file)
+  if (args.delete) {
+    if (exists) {
+      await fs.remove(filePath)
+    }
+  } else {
+    const contents = replacements.reduce((replaced, pair) => {
+      const [key, value] = pair.split(`:`)
+      return replaced.replace(
+        args.exact ? key : new RegExp(`%${key}%`, `g`),
+        value
+      )
+    }, file)
 
-  await fs.writeFile(filePath, contents, `utf8`)
+    await fs.writeFile(filePath, contents, `utf8`)
+  }
 
   await writeHistory(history)
 }

e2e-tests/development-runtime/src/pages/babelrc/add/.babelrc-fixture

@@ -0,0 +1,20 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-search-and-replace",
+      {
+        "rules": [
+          {
+            "search": "babel-rc-test",
+            "replace": "babel-rc-added",
+            "searchTemplateStrings": true
+          }
+
+        ]
+      }
+    ]
+  ],
+  "presets": [
+    "babel-preset-gatsby"
+  ]
+}

e2e-tests/development-runtime/src/pages/babelrc/add/index.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+export default function BabelrcAdd() {
+  return (
+    <>
+      <p>
+        Code block below should contain <code>babel-rc-test</code> first and
+        after .babelrc addition it should contain <code>babel-rc-added</code>
+      </p>
+      <pre data-testid="test-element">babel-rc-test</pre>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/babelrc/base/.babelrc

@@ -0,0 +1,20 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-search-and-replace",
+      {
+        "rules": [
+          {
+            "search": "babel-rc-test",
+            "replace": "babel-rc-is-used",
+            "searchTemplateStrings": true
+          }
+
+        ]
+      }
+    ]
+  ],
+  "presets": [
+    "babel-preset-gatsby"
+  ]
+}

e2e-tests/development-runtime/src/pages/babelrc/base/index.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+export default function BabelrcBase() {
+  return (
+    <>
+      <p>
+        Code block below should contain <code>babel-rc-is-used</code> when
+        compiled
+      </p>
+      <pre data-testid="test-element">babel-rc-test</pre>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/babelrc/edit/.babelrc

@@ -0,0 +1,20 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-search-and-replace",
+      {
+        "rules": [
+          {
+            "search": "babel-rc-test",
+            "replace": "babel-rc-initial",
+            "searchTemplateStrings": true
+          }
+
+        ]
+      }
+    ]
+  ],
+  "presets": [
+    "babel-preset-gatsby"
+  ]
+}

e2e-tests/development-runtime/src/pages/babelrc/edit/index.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+export default function BabelrcEdit() {
+  return (
+    <>
+      <p>
+        Code block below should contain <code>babel-rc-initial</code> first and
+        after edit it should contain <code>babel-rc-edited</code>
+      </p>
+      <pre data-testid="test-element">babel-rc-test</pre>
+    </>
+  )
+}

e2e-tests/development-runtime/src/pages/babelrc/remove/.babelrc

@@ -0,0 +1,20 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-search-and-replace",
+      {
+        "rules": [
+          {
+            "search": "babel-rc-test",
+            "replace": "babel-rc-will-be-deleted",
+            "searchTemplateStrings": true
+          }
+
+        ]
+      }
+    ]
+  ],
+  "presets": [
+    "babel-preset-gatsby"
+  ]
+}

e2e-tests/development-runtime/src/pages/babelrc/remove/index.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+export default function BabelrcRemove() {
+  return (
+    <>
+      <p>
+        Code block below should contain <code>babel-rc-will-be-deleted</code>{" "}
+        first and after removal it should contain <code>babel-rc-test</code>
+      </p>
+      <pre data-testid="test-element">babel-rc-test</pre>
+    </>
+  )
+}

e2e-tests/production-runtime/cypress/integration/babelrc.js

@@ -0,0 +1,11 @@
+const TEST_ELEMENT = `test-element`
+
+describe(`babelrc`, () => {
+  it(`Applies .babelrc`, () => {
+    cy.visit(`/babelrc/base/`).waitForRouteChange()
+
+    cy.getTestElement(TEST_ELEMENT)
+      .invoke(`text`)
+      .should(`eq`, `babel-rc-is-used`)
+  })
+})

e2e-tests/production-runtime/package.json

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
+    "babel-plugin-search-and-replace": "^1.1.0",
     "cypress": "^6.5.0",
     "gatsby": "^3.0.0-next.6",
     "gatsby-plugin-image": "^1.0.0-next.5",

e2e-tests/production-runtime/src/pages/babelrc/base/.babelrc

@@ -0,0 +1,20 @@
+{
+  "plugins": [
+    [
+      "babel-plugin-search-and-replace",
+      {
+        "rules": [
+          {
+            "search": "babel-rc-test",
+            "replace": "babel-rc-is-used",
+            "searchTemplateStrings": true
+          }
+
+        ]
+      }
+    ]
+  ],
+  "presets": [
+    "babel-preset-gatsby"
+  ]
+}

e2e-tests/production-runtime/src/pages/babelrc/base/index.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+export default function BabelrcBase() {
+  return (
+    <>
+      <p>
+        Code block below should contain <code>babel-rc-is-used</code> when
+        compiled
+      </p>
+      <pre data-testid="test-element">babel-rc-test</pre>
+    </>
+  )
+}