-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore: Upgrade Cypress from v9 to v12 #37810
Conversation
@@ -1,5 +1,3 @@ | |||
import { parseSrcset } from "srcset" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Unused import
@@ -19,13 +19,15 @@ | |||
}, | |||
"devDependencies": { | |||
"@cypress/snapshot": "^2.1.7", | |||
"@simonsmith/cypress-image-snapshot": "^6.0.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cypress-image-snapshot doesn't work with Cypress 12 and this is a fork
@@ -39,8 +41,8 @@ | |||
"test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test", | |||
"start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run", | |||
"serve": "gatsby serve", | |||
"cy:open": "cypress open", | |||
"cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome" | |||
"cy:open": "cypress open --browser chrome --e2e", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Cypress now also has component testing so this tells it to directly open the e2e test suite with the chrome browser
@@ -27,15 +27,18 @@ after(() => { | |||
const errorPlaceholder = `false` | |||
const errorReplacement = `true` | |||
|
|||
describe(`testing error overlay and ability to automatically recover runtime errors cause by content changes (page queries variant)`, () => { | |||
it(`displays content initially (no errors yet)`, () => { | |||
describe(`testing error overlay and ability to automatically recover runtime errors cause by content changes (page queries variant)`, { testIsolation: false } , () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
New default in Cypress 12 is test isolation but these tests kinda rely on them so we opt-out
it(`plain less`, () => { | ||
// we don't want to visit page for each test - we want to visit once and then test HMR | ||
cy.window().then(win => { | ||
cy.spy(win.console, `log`).as(`hmrConsoleLog`) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is already getting set inside the support/e2e.ts
file with the
Cypress.Commands.overwrite("visit")
overwrite
window.notReloaded = true | ||
window.___navigate(`/deep-link-page/`) | ||
}) | ||
// just setting some property on the window |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adjusted from https://glebbahmutov.com/blog/detect-page-reload/
@@ -15,7 +15,7 @@ describe(`Production build tests`, () => { | |||
|
|||
// we expect 2 `componentDidMount` calls - 1 for initial page and 1 for second page | |||
cy.lifecycleCallCount(`componentDidMount`).should(`equal`, 2) | |||
cy.lifecycleCallCount(`render`).should(`equal`, Cypress.env(`TEST_PLUGIN_OFFLINE`) ? 3 : 2) | |||
cy.lifecycleCallCount(`render`).should(`equal`, 2) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This now works 🤷
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The paths for the snapshots changed. You can check the E2E test to compare the paths it generates now to this
@@ -10,8 +10,7 @@ const IS_CI = !!( | |||
false | |||
) | |||
|
|||
const shouldRecord = | |||
!!process.env.CYPRESS_PROJECT_ID && !!process.env.CYPRESS_RECORD_KEY && IS_CI | |||
const shouldRecord = !!process.env.CYPRESS_RECORD_KEY && IS_CI |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
projectId is now mostly in the config file itself, so this had to go
@@ -22,6 +21,10 @@ const cypressArgs = [`run`, ...process.argv.slice(2)] | |||
|
|||
if (shouldRecord) { | |||
cypressArgs.push(`--record`) | |||
|
|||
if (process.env.CYPRESS_GROUP_NAME) { | |||
cypressArgs.push(`--group`, process.env.CYPRESS_GROUP_NAME) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
--group
alone fails if --record
is not also given
Description
This updates our E2E tests from Cypress v9 to v12. Migration guide: https://docs.cypress.io/guides/references/migration-guide
I did also do some other following changes while at it:
start-server-and-test
to v2 (no breaking changes for us)cypress-image-snapshot
to@simonsmith/cypress-image-snapshot
because the former isn't compatible with Cypress v12Tests
All tests should still run fully and pass.