add more e2e test - editing prop in markdown, editing component impor…

…ted by mdx

e2e-tests/mdx/cypress/integration/hmr.js

@@ -7,7 +7,7 @@ if (Cypress.env("GATSBY_COMMAND") === `develop`) {
     cy.exec(`npm run reset`)
   })
 
-  it(`Can hot-reload`, () => {
+  it(`Can hot-reload markdown content`, () => {
     cy.visit(`/hmr`, {
       onBeforeLoad: win => {
         cy.spy(win.console, "log").as(`hmrConsoleLog`)
@@ -24,4 +24,48 @@ if (Cypress.env("GATSBY_COMMAND") === `develop`) {
 
     cy.get(`h2`).invoke(`text`).should(`eq`, `Ipsum`)
   })
+
+  it(`Can hot-reload react content (i.e. change prop in mdx content)`, () => {
+    cy.visit(`/hmr`, {
+      onBeforeLoad: win => {
+        cy.spy(win.console, "log").as(`hmrConsoleLog`)
+      },
+    }).waitForRouteChange()
+    cy.get(`[data-testid="test-prop-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `prop-before`)
+
+    cy.exec(
+      `npm run update -- --file src/pages/hmr.mdx --exact --replacements "prop-before:prop-after"`
+    )
+
+    cy.get(`@hmrConsoleLog`).should(`be.calledWithMatch`, `App is up to date`)
+    cy.wait(1000)
+
+    cy.get(`[data-testid="test-prop-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `prop-after`)
+  })
+
+  it(`Can hot-reload imported js components`, () => {
+    cy.visit(`/hmr`, {
+      onBeforeLoad: win => {
+        cy.spy(win.console, "log").as(`hmrConsoleLog`)
+      },
+    }).waitForRouteChange()
+    cy.get(`[data-testid="test-imported-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `component-before`)
+
+    cy.exec(
+      `npm run update -- --file src/components/hmr-component-edit.js --exact --replacements "component-before:component-after"`
+    )
+
+    cy.get(`@hmrConsoleLog`).should(`be.calledWithMatch`, `App is up to date`)
+    cy.wait(1000)
+
+    cy.get(`[data-testid="test-imported-edit"]`)
+      .invoke(`text`)
+      .should(`eq`, `component-after`)
+  })
 }

e2e-tests/mdx/src/components/hmr-component-edit.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+const HMRImportEditComponent = () => (
+  <div data-testid="test-imported-edit">component-before</div>
+)
+
+export default HMRImportEditComponent

e2e-tests/mdx/src/components/hmr-prop-edit.js

@@ -0,0 +1,7 @@
+import React from "react"
+
+const HMRPropEditComponent = ({ test }) => (
+  <div data-testid="test-prop-edit">{test}</div>
+)
+
+export default HMRPropEditComponent

e2e-tests/mdx/src/pages/hmr.mdx

@@ -1 +1,8 @@
+import HMRImportEditComponent from "../components/hmr-component-edit"
+import HMRPropEditComponent from "../components/hmr-prop-edit"
+
 ## Lorem
+
+<HMRImportEditComponent />
+
+<HMRPropEditComponent test="prop-before" />