test: Conditionally test ESLint rules (#31258)

e2e-tests/development-runtime/.eslintignore

@@ -0,0 +1,2 @@
+src/pages/anonymous-arrow.js
+src/pages/anonymous-arrow-two.js

e2e-tests/development-runtime/cypress/integration/eslint-rules/limited-exports-page-templates.js

@@ -1,16 +1,44 @@
+before(() => {
+  cy.exec(
+    `npm run update -- --file src/pages/eslint-rules/limited-exports-page-templates.js --restore`
+  )
+})
+
+after(() => {
+  cy.exec(
+    `npm run update -- --file src/pages/eslint-rules/limited-exports-page-templates.js --restore`
+  )
+})
+
+const errorPlaceholder = `// export function notAllowed() {}`
+const errorReplacement = `export function notAllowed() {}`
+
 describe(`limited-exports-page-templates`, () => {
-  it(`should log warning to console for invalid export`, () => {
+  beforeEach(() => {
     cy.visit(
       `/eslint-rules/limited-exports-page-templates`
     ).waitForRouteChange()
+  })
+
+  it(`should initially not log to console`, () => {
+    cy.get(`@hmrConsoleLog`).should(
+      `not.be.calledWithMatch`,
+      /13:1 {2}warning {2}In page templates only a default export of a valid React component and the named export of a page query is allowed./i
+    )
+  })
+  it(`should log warning to console for invalid export`, () => {
+    cy.exec(
+      `npm run update -- --file src/pages/eslint-rules/limited-exports-page-templates.js --replacements "${errorPlaceholder}:${errorReplacement}" --exact`
+    )
+    cy.reload()
 
     cy.get(`@hmrConsoleLog`).should(
       `be.calledWithMatch`,
-      /15:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
+      /13:1 {2}warning {2}In page templates only a default export of a valid React component and the named export of a page query is allowed./i
     )
     cy.get(`@hmrConsoleLog`).should(
       `not.be.calledWithMatch`,
-      /17:1  warning  In page templates only a default export of a valid React component and the named export of a page query is allowed./i
+      /15:1 {2}warning {2}In page templates only a default export of a valid React component and the named export of a page query is allowed./i
     )
   })
 })

e2e-tests/development-runtime/cypress/integration/eslint-rules/no-anonymous-exports-page-templates.js

@@ -1,9 +1,53 @@
+before(() => {
+  cy.exec(
+    `npm run update -- --file src/pages/eslint-rules/no-anonymous-exports-page-templates.js --restore`
+  )
+  cy.exec(
+    `npm run update -- --file src/pages/eslint-rules/no-anonymous-exports-page-templates-function.js --restore`
+  )
+})
+
+after(() => {
+  cy.exec(
+    `npm run update -- --file src/pages/eslint-rules/no-anonymous-exports-page-templates.js --restore`
+  )
+  cy.exec(
+    `npm run update -- --file src/pages/eslint-rules/no-anonymous-exports-page-templates-function.js --restore`
+  )
+})
+
+const errorPlaceholderAnonExport01 = `const Named = () =>`
+const errorReplacementAnonExport01 = `export default () =>`
+const errorPlaceholderAnonExport02 = `export default Named`
+const errorReplacementAnonExport02 = `// named-default-export`
+const errorPlaceholderAnonFunction = `export default function Named()`
+const errorReplacementAnonFunction = `export default function ()`
+
 describe(`no-anonymous-exports-page-templates`, () => {
+  it(`should initially not log to console`, () => {
+    cy.visit(
+      `/eslint-rules/no-anonymous-exports-page-templates`
+    ).waitForRouteChange()
+    cy.get(`@hmrConsoleLog`).should(
+      `not.be.calledWithMatch`,
+      /Anonymous arrow functions cause Fast Refresh to not preserve local component state./i
+    )
+    cy.get(`@hmrConsoleLog`).should(
+      `not.be.calledWithMatch`,
+      /Anonymous function declarations cause Fast Refresh to not preserve local component state./i
+    )
+  })
   it(`should log warning to console for arrow functions`, () => {
     cy.visit(
       `/eslint-rules/no-anonymous-exports-page-templates`
     ).waitForRouteChange()
 
+    cy.exec(
+      `npm run update -- --file src/pages/eslint-rules/no-anonymous-exports-page-templates.js --replacements "${errorPlaceholderAnonExport01}:${errorReplacementAnonExport01}" --replacements "${errorPlaceholderAnonExport02}:${errorReplacementAnonExport02}" --exact`
+    )
+
+    cy.reload()
+
     cy.get(`@hmrConsoleLog`).should(
       `be.calledWithMatch`,
       /Anonymous arrow functions cause Fast Refresh to not preserve local component state./i
@@ -14,6 +58,12 @@ describe(`no-anonymous-exports-page-templates`, () => {
       `/eslint-rules/no-anonymous-exports-page-templates-function`
     ).waitForRouteChange()
 
+    cy.exec(
+      `npm run update -- --file src/pages/eslint-rules/no-anonymous-exports-page-templates-function.js --replacements "${errorPlaceholderAnonFunction}:${errorReplacementAnonFunction}" --exact`
+    )
+
+    cy.reload()
+
     cy.get(`@hmrConsoleLog`).should(
       `be.calledWithMatch`,
       /Anonymous function declarations cause Fast Refresh to not preserve local component state./i

e2e-tests/development-runtime/src/pages/eslint-rules/limited-exports-page-templates.js

@@ -5,14 +5,12 @@ function PageQuery({ data }) {
   return (
     <div>
       <h1 data-testid="title">Limited Exports Page Templates. ESLint Rule</h1>
-      <p data-testid="hot">
-        {data.site.siteMetadata.title}
-      </p>
+      <p data-testid="hot">{data.site.siteMetadata.title}</p>
     </div>
   )
 }
 
-export function notAllowed() {}
+// export function notAllowed() {}
 
 export const query = graphql`
   {

e2e-tests/development-runtime/src/pages/eslint-rules/no-anonymous-exports-page-templates-function.js

@@ -2,7 +2,7 @@ import React from "react"
 
 import Layout from "../../components/layout"
 
-export default function () {
+export default function Named() {
   return (
     <Layout>
       <h1 data-testid="title">Anonymous Arrow Function. ESLint Rule</h1>

e2e-tests/development-runtime/src/pages/eslint-rules/no-anonymous-exports-page-templates.js

@@ -2,8 +2,10 @@ import React from "react"
 
 import Layout from "../../components/layout"
 
-export default () => (
+const Named = () => (
   <Layout>
     <h1 data-testid="title">Anonymous Arrow Function. ESLint Rule</h1>
   </Layout>
 )
+
+export default Named