Skip to content
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

fix: update cypress to Typescript 5 #29568

Merged
merged 23 commits into from
Jun 4, 2024
Merged

Conversation

AtofStryker
Copy link
Contributor

@AtofStryker AtofStryker commented May 24, 2024

Additional details

Updates the Cypress monorepo to typescript 5.3.3. There are a few issues with updating to 5.4 that cause some issues with mksnapshot. This allows the ProjectConfigIPC to be able to interpret newly added values in typescript 5 much better, paving the way for some better typescript support for newer CT framework versions

Is this a breaking change?

Based on the microsoft devblog of breaking changes, it looks like most the breaking changes are related to the compiler API itself.

The minimum node version is now 12 (which Cypress' minimum is 18 currently).

A few options are now deprecated inside the users tsconfig, which might warn users on compilation who are using typescript 4 with their project config while Cypress uses Typescript 5 to interpret the config. However, this will not error for users, so backwards compatibility should not be an issue since our minimum version supported is typescript 4.

We likely do not want to update past version 5.5 until Cypress publishes a breaking change major version as 5.5 removes the importsNotUsedAsValues key, which could break users. Cypress uses whatever typescript is shipped with the end users project, except in the case of using ts-node on the server to interpret the users cypress configuration.

Bug fixes

since createProgram is no longer called in Typescript v5 inside the webpack-preprocessor, I have added code inside the webpack-batteries-included-preprocessor that checks the users tsconfig when we register ts-loader on behalf of the user. If sourceMap is configured, we opt for source maps over inline source maps . I'm not sure why this no longer happens, but figured its best to fix the issue at hand for users using wbip. See original PR #9312

Steps to test

How has the user experience changed?

PR Tasks

Copy link

cypress bot commented May 24, 2024

2 flaky tests on run #55664 ↗︎

0 5557 77 0 Flakiness 2

Details:

fix system test as adding 4 lines of comments impacts the stack trace line 4 lin...
Project: cypress Commit: 75b87221f9
Status: Passed Duration: 16:34 💡
Started: Jun 4, 2024 7:22 PM Ended: Jun 4, 2024 7:38 PM
Flakiness  querying/querying.cy.js • 1 flaky test • 5x-driver-chrome:beta

View Output

Test Artifacts
... > throws when alias property isnt just a digit Test Replay
Flakiness  waiting.cy.js • 1 flaky test • 5x-driver-chrome:beta

View Output

Test Artifacts
... > errors > throws when waiting for 2nd response to route Test Replay

Review all test suite changes for PR #29568 ↗︎

@AtofStryker AtofStryker marked this pull request as ready for review May 24, 2024 19:39
@@ -285,7 +285,6 @@ describe('errors ui', {
})

verify('assertion failure in request callback', {
column: 22,
Copy link
Member

@jennifer-shehane jennifer-shehane May 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are we not losing some coverage with this for when we can calculate the column correctly?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are you referring to test coverage or how code coverage calculation works?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took a bit of a further look into this and from what I can see we are trying to infer the row/column from the evaled chai assert/expect which seems to be slightly off from what we expect. This leads to about a line or 2 difference when opening the file in the IDE vs what is displayed in the error console. I am not too sure how to fix this to be honest since it might be hard to get the accurate stack from the evaled context.

FWIW this is the case with typescript 5 usage and cypress today. Do we want to make an issue to look into correctly calculating the user invocation stack for typescript 5 users?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, lets create an issue

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

created #29614 and linked FIXME comments in 307eb28

@@ -47,7 +47,7 @@
"esModuleInterop": true,
/** Allows us to strip internal types sourced from webpack */
"stripInternal": true,
"importsNotUsedAsValues": "error",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing this preserves the existing behavior without throwing an error - imports that are not used as values will simply be stripped, since verbatimModuleSyntax is not enabled. Is that intended?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is just oversight on my end. I need to add "verbatimModuleSyntax": true to get the expected behavior. good catch!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we will need to address this separately, since we cant use "verbatimModuleSyntax": true with import syntax inside common js modules. I wonder if we want to make an issue to reword the modules to leverage "verbatimModuleSyntax": true since there isn't anything that leads me to believe this is an issue?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we have any polyfills or other content where this would be an issue but not entirely sure

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we just want to pin to ~5.4.5 for the time being so we aren't subject to the breaking change in 5.5 with the removal of "importsNotUsedAsValues": "error"?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cacieprins I wound up going with the above comment in d3916e9

webpackOptions,
})

// will not be able to find the user's tsconfig
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to ensure that fs.readFileSync throws without requiring it to hit the fs, it might be a good idea to mock it here. Then you could lift some of the mocking up to the #getTSCompilerOptionsForBrowser beforeEach.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how is cc274f7? Should be a bit dryer

@jennifer-shehane
Copy link
Member

@AtofStryker There's a ts-check error.

@AtofStryker AtofStryker merged commit f3b6766 into develop Jun 4, 2024
80 of 82 checks passed
@AtofStryker AtofStryker deleted the fix/update_typescript_5 branch June 4, 2024 23:17
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Jun 18, 2024

Released in 13.12.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.12.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Jun 18, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TypeScript 5 support for sourceMap option
3 participants