diff --git a/e2e-tests/mdx/cypress/integration/hmr.js b/e2e-tests/mdx/cypress/integration/hmr.js index 722424a2707ae..353184fc9ce44 100644 --- a/e2e-tests/mdx/cypress/integration/hmr.js +++ b/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`) + }) } diff --git a/e2e-tests/mdx/src/components/hmr-component-edit.js b/e2e-tests/mdx/src/components/hmr-component-edit.js new file mode 100644 index 0000000000000..c7a70d646a637 --- /dev/null +++ b/e2e-tests/mdx/src/components/hmr-component-edit.js @@ -0,0 +1,7 @@ +import React from "react" + +const HMRImportEditComponent = () => ( +