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.

Sign up for GitHub

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

feat: support React 19 for Cypress Component Testing #30651

Merged
merged 1 commit into from
Nov 21, 2024
Merged

feat: support React 19 for Cypress Component Testing #30651

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .circleci/cache-version.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Bump this version to force CI to re-create the cache from scratch.

11-07-24-react-16-17-removal
11-19-24-react-19
9 changes: 4 additions & 5 deletions .circleci/workflows.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
- /^release\/\d+\.\d+\.\d+$/
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- 'update-v8-snapshot-cache-on-develop'
- 'breaking/remove_react_16_17_merge_react18_harness_upstream'
- 'feat/support_react_19'
- 'publish-binary'

# usually we don't build Mac app - it takes a long time
Expand All @@ -42,7 +42,7 @@ macWorkflowFilters: &darwin-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'breaking/remove_react_16_17_merge_react18_harness_upstream', << pipeline.git.branch >> ]
- equal: [ 'feat/support_react_19', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand All @@ -53,7 +53,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'breaking/remove_react_16_17_merge_react18_harness_upstream', << pipeline.git.branch >> ]
- equal: [ 'feat/support_react_19', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand All @@ -76,7 +76,6 @@ windowsWorkflowFilters: &windows-workflow-filters
- equal: [ develop, << pipeline.git.branch >> ]
# use the following branch as well to ensure that v8 snapshot cache updates are fully tested
- equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
- equal: [ 'breaking/remove_react_16_17_merge_react18_harness_upstream', << pipeline.git.branch >> ]
- matches:
pattern: /^release\/\d+\.\d+\.\d+$/
value: << pipeline.git.branch >>
Expand Down Expand Up @@ -152,7 +151,7 @@ commands:
name: Set environment variable to determine whether or not to persist artifacts
command: |
echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "breaking/remove_react_16_17_merge_react18_harness_upstream" ]]; then
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/support_react_19" ]]; then
export SHOULD_PERSIST_ARTIFACTS=true
fi' >> "$BASH_ENV"
# You must run `setup_should_persist_artifacts` command and be using bash before running this command
Expand Down
4 changes: 4 additions & 0 deletions cli/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ _Released 12/3/2024 (PENDING)_
- The `resourceType` option on `cy.intercept` has been deprecated. We anticipate the resource types to change or be completely removed in the future. Our intention is to replace essential functionality dependent on the `resourceType` within Cypress in a future version (like hiding network logs that are not fetch/xhr). Please leave feedback on any essential uses of `resourceType`
in this [GitHub issue](https://github.com/cypress-io/cypress/issues/30447). Addresses [#30433](https://github.com/cypress-io/cypress/issues/30433).

**Features:**

- Cypress Component Testing now supports `React` version 19. Cypress will allow detected use of the React 19 Release Candidate until React 19 is officially released. Addresses [#29470](https://github.com/cypress-io/cypress/issues/29470).

**Bugfixes:**

- Elements with `display: contents` will no longer use box model calculations for visibility, and correctly show as visible when it is visible. Fixed in [#29680](https://github.com/cypress-io/cypress/pull/29680). Fixes [#29605](https://github.com/cypress-io/cypress/issues/29605).
Expand Down
8 changes: 4 additions & 4 deletions npm/react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@
"vite-plugin-require-transform": "1.0.12"
},
"peerDependencies": {
"@types/react": "^18",
"@types/react-dom": "^18",
"@types/react": "^18 || ^19",
Copy link
Contributor Author

Choose a reason for hiding this comment

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

these peer dependencies are slightly off since they don't match the release candidate semver, which is not a problem with the shipped binary but could cause problems if someone is trying to install @cypress/react with the react 19 release candidate. I don't see anyone actually needing to do this, and especially since React 19 isn't officially released yet, I am hesitant to make the change here.

"@types/react-dom": "^18 || ^19",
"cypress": "*",
"react": "^18",
"react-dom": "^18"
"react": "^18 || ^19",
"react-dom": "^18 || ^19"
},
"files": [
"dist"
Expand Down
3 changes: 1 addition & 2 deletions packages/app/cypress/e2e/runner/ct-framework-errors.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,7 @@ function loadErrorSpec (options: Options): VerifyFunc {
return createVerify({ fileName: Cypress._.last(filePath.split('/')), hasPreferredIde: false, mode: 'component' })
}

// keeping structure as to easily adapt for future versions of react
const reactVersions = [18] as const
const reactVersions = [18, 19] as const

reactVersions.forEach((reactVersion) => {
describe(`React ${reactVersion}`, {
Expand Down
4 changes: 2 additions & 2 deletions packages/launchpad/cypress/e2e/config-warning.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,8 +203,8 @@ describe('component testing dependency warnings', () => {
cy.get('[data-cy="warning-alert"]', { timeout: 12000 }).should('exist')
.should('contain.text', 'Warning: Component Testing Mismatched Dependencies')
.should('contain.text', 'vite. Expected ^4.0.0 || ^5.0.0, found 3.2.11')
.should('contain.text', 'react. Expected ^18.0.0, found 15.6.2.')
.should('contain.text', 'react-dom. Expected ^18.0.0 but dependency was not found.')
.should('contain.text', 'react. Expected ^18.0.0 || ^19.0.0-rc || ^19.0.0, found 15.6.2.')
.should('contain.text', 'react-dom. Expected ^18.0.0 || ^19.0.0-rc || ^19.0.0 but dependency was not found.')

cy.get('.warning-markdown').find('li').should('have.length', 3)
})
Expand Down
4 changes: 2 additions & 2 deletions packages/scaffold-config/src/dependencies.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const WIZARD_DEPENDENCY_REACT = {
package: 'react',
installer: 'react',
description: 'A JavaScript library for building user interfaces',
minVersion: '^18.0.0',
minVersion: '^18.0.0 || ^19.0.0-rc || ^19.0.0',
} as const

export const WIZARD_DEPENDENCY_REACT_DOM = {
Expand All @@ -31,7 +31,7 @@ export const WIZARD_DEPENDENCY_REACT_DOM = {
package: 'react-dom',
installer: 'react-dom',
description: 'This package serves as the entry point to the DOM and server renderers for React',
minVersion: '^18.0.0',
minVersion: '^18.0.0 || ^19.0.0-rc || ^19.0.0',
} as const

export const WIZARD_DEPENDENCY_TYPESCRIPT = {
Expand Down
Loading