Skip to content

Commit

Permalink
breaking: remove support for react 16 and 17 for component testing an…
Browse files Browse the repository at this point in the history
…d move cypress/react18 upstream into cypress/react [run ci]
  • Loading branch information
AtofStryker committed Nov 14, 2024
1 parent 53b24b1 commit 25fde00
Show file tree
Hide file tree
Showing 91 changed files with 619 additions and 2,050 deletions.
2 changes: 1 addition & 1 deletion .circleci/cache-version.txt
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-vue-cli-service-removal
11-07-24-react-16-17-removal
10 changes: 5 additions & 5 deletions .circleci/workflows.yml
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_vue_cli_service'
- 'breaking/remove_react_16_17_merge_react18_harness_upstream'
- '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_vue_cli_service', << 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 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_vue_cli_service', << 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 All @@ -76,7 +76,7 @@ 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_vue_cli_service', << 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 +152,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_vue_cli_service" ]]; then
echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "breaking/remove_react_16_17_merge_react18_harness_upstream" ]]; 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
1 change: 0 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
- [`@cypress/eslint-plugin-dev`](https://github.com/cypress-io/cypress/blob/develop/npm/eslint-plugin-dev/CHANGELOG.md)
- [`@cypress/mount-utils`](https://github.com/cypress-io/cypress/blob/develop/npm/mount-utils/CHANGELOG.md)
- [`@cypress/react`](https://github.com/cypress-io/cypress/blob/develop/npm/react/CHANGELOG.md)
- [`@cypress/react18`](https://github.com/cypress-io/cypress/blob/develop/npm/react18/CHANGELOG.md)
- [`@cypress/svelte`](https://github.com/cypress-io/cypress/blob/develop/npm/svelte/CHANGELOG.md)
- [`@cypress/vite-dev-server`](https://github.com/cypress-io/cypress/blob/develop/npm/vite-dev-server/CHANGELOG.md)
- [`@cypress/vue`](https://github.com/cypress-io/cypress/blob/develop/npm/vue/CHANGELOG.md)
Expand Down
1 change: 0 additions & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,6 @@ Here is a list of the npm packages in this repository:
| [grep](./npm/grep) | `@cypress/grep` | Filter tests using substring |
| [mount-utils](./npm/mount-utils) | `@cypress/mount-utils` | Common functionality for Vue/React/Angular adapters. |
| [react](./npm/react) | `@cypress/react` | Cypress component testing for React. |
| [react18](./npm/react18) | `@cypress/react18` | Cypress component testing for React 18. |
| [schematic](./npm/cypress-schematic) | `@cypress/schematic` | Official Angular Schematic and Builder for the Angular CLI.|
| [svelte](./npm/svelte) | `@cypress/svelte` | Cypress component testing for Svelte. |
| [vite-dev-server](./npm/vite-dev-server) | `@cypress/vite-dev-server` | Vite powered dev server for Component Testing. |
Expand Down
1 change: 0 additions & 1 deletion cli/.eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ package.json
# these are all copied from dist'd builds from the individual libs
/angular
/react
/react18
/vue
/svelte
/mount-utils
6 changes: 4 additions & 2 deletions cli/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,13 @@ _Released 12/3/2024 (PENDING)_
- It is no longer possible to make a `fetch` or `XMLHttpRequest` request from the `about:blank` page in Electron (i.e. `cy.window().then((win) => win.fetch('<some-url>')`). You must use `cy.request` instead or perform some form of initial navigation via `cy.visit()`. Addressed in [#29547](https://github.com/cypress-io/cypress/pull/30394).
- `@cypress/webpack-dev-server` no longer supports `webpack-dev-server` version 3. Additionally, `@cypress/webpack-dev-server` now ships with `webpack-dev-server` version 5 by default. `webpack-dev-server` version 4 will need to be installed along side Cypress if you are still using `webpack` version 4. Addresses [#29308](https://github.com/cypress-io/cypress/issues/29308), [#30347](https://github.com/cypress-io/cypress/issues/30347), and [#30141](https://github.com/cypress-io/cypress/issues/30141).
- `@cypress/vite-dev-server` no longer supports `vite` versions 2 and 3. Addresses [#29377](https://github.com/cypress-io/cypress/issues/29377) and [#29378](https://github.com/cypress-io/cypress/issues/29378).
- Cypress Component Testing no longer supports `Nuxt.js` version 2. Addresses [#30468](https://github.com/cypress-io/cypress/issues/30468).
- Cypress Component Testing no longer supports `Vue` version 2. Addresses [#30295](https://github.com/cypress-io/cypress/issues/30295).
- Cypress Component Testing no longer supports `React` versions 16 and 17. Addresses [#29607](https://github.com/cypress-io/cypress/issues/29607).
- Cypress Component Testing no longer supports `Next.js` versions 10, 11, 12, and 13. Addresses [#29583](https://github.com/cypress-io/cypress/issues/29583).
- Cypress Component Testing no longer supports `Vue` version 2. Addresses [#30295](https://github.com/cypress-io/cypress/issues/30295).
- Cypress Component Testing no longer supports `Nuxt.js` version 2. Addresses [#30468](https://github.com/cypress-io/cypress/issues/30468).
- Cypress Component Testing no longer supports `Angular` versions 13, 14, 15, and 16. The minimum supported version is now `17.2.0` in order to fully support Angular [signals](https://angular.dev/guide/signals). Addresses [#29582](https://github.com/cypress-io/cypress/issues/29582). Addressed in [#30539](https://github.com/cypress-io/cypress/pull/30539).
- Cypress Component Testing no longer supports `Svelte` version 3. Addresses [#30492](https://github.com/cypress-io/cypress/issues/30492).
- The `cypress/react18` test harness is no longer included in the Cypress binary. Instead, React 18 support is now shipped with `cypress/react`! Addresses [#29607](https://github.com/cypress-io/cypress/issues/29607).
- The `cypress/angular-signals` test harness is no longer included in the Cypress binary. Instead, signals support is now shipped with `cypress/angular`! This requires `rxjs` to be installed as a `peerDependency`. Addresses [#29606](https://github.com/cypress-io/cypress/issues/29606).
- Cypress Component Testing no longer supports `create-react-app`. Addresses [#30028](https://github.com/cypress-io/cypress/issues/30028).
- Cypress Component Testing no longer supports `@vue/cli-service`. Addresses [#30481](https://github.com/cypress-io/cypress/issues/30481).
Expand Down
7 changes: 0 additions & 7 deletions cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@
"@cypress/grep": "0.0.0-development",
"@cypress/mount-utils": "0.0.0-development",
"@cypress/react": "0.0.0-development",
"@cypress/react18": "0.0.0-development",
"@cypress/sinon-chai": "2.9.1",
"@cypress/svelte": "0.0.0-development",
"@cypress/vue": "0.0.0-development",
Expand Down Expand Up @@ -114,7 +113,6 @@
"mount-utils",
"vue",
"react",
"react18",
"angular",
"svelte"
],
Expand Down Expand Up @@ -145,11 +143,6 @@
"import": "./react/dist/cypress-react.esm-bundler.js",
"require": "./react/dist/cypress-react.cjs.js"
},
"./react18": {
"types": "./react18/dist/index.d.ts",
"import": "./react18/dist/cypress-react.esm-bundler.js",
"require": "./react18/dist/cypress-react.cjs.js"
},
"./mount-utils": {
"types": "./mount-utils/dist/index.d.ts",
"require": "./mount-utils/dist/index.js"
Expand Down
1 change: 0 additions & 1 deletion cli/scripts/post-build.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ shell.set('-e') // any error is fatal
const npmModulesToCopy = [
'mount-utils',
'react',
'react18',
'vue',
'angular',
'svelte',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,15 +20,13 @@ describe('Counter with access', () => {
// the window.counter was set from the Counter's constructor
cy.window()
.should('have.property', 'counter')
.its('state')
.should('deep.equal', { count: 0 })
.its('count')
.should('equal', 0)

// let's change the state of the component
cy.window()
.its('counter')
.invoke('setState', {
count: 101,
})
.invoke('setCount', 101)

// the UI should update to reflect the new count
cy.contains('count: 101').should('be.visible')
Expand Down
44 changes: 19 additions & 25 deletions npm/react/cypress/component/advanced/app-action-example/counter.jsx
Original file line number Diff line number Diff line change
@@ -1,34 +1,28 @@
import React from 'react'
import React, { useState } from 'react'

export class Counter extends React.Component {
constructor (props) {
super(props)
this.state = {
count: 0,
}
export function Counter () {
const [count, setCount] = useState(0)

if (window.Cypress) {
// if this component is mounted from inside Cypress Test Runner
// then expose the reference to this instance
// to allow controlling it from tests
console.log(
'set window.counter to this component in window',
window.location.pathname,
)
if (window.Cypress) {
// if this component is mounted from inside Cypress Test Runner
// then expose the reference to this instance
// to allow controlling it from tests
console.log(
'set window.counter to this component in window',
window.location.pathname,
)

window.counter = this
} else {
console.log('running outside Cypress')
window.counter = {
count,
setCount,
}
} else {
console.log('running outside Cypress')
}

click = () => {
this.setState({
count: this.state.count + 1,
})
function click () {
setCount(count + 1)
}

render () {
return <p onClick={this.click}>count: {this.state.count}</p>
}
return <p onClick={click}>count: {count}</p>
}
20 changes: 9 additions & 11 deletions npm/react/cypress/component/advanced/context/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,13 @@ import React from 'react'
import { ThemeContext } from './context'
import { Toolbar } from './Toolbar.jsx'

export default class App extends React.Component {
render () {
// Use a Provider to pass the current theme to the tree below.
// Any component can read it, no matter how deep it is.
// In this example, we're passing "dark" as the current value.
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
)
}
export default function App () {
// Use a Provider to pass the current theme to the tree below.
// Any component can read it, no matter how deep it is.
// In this example, we're passing "dark" as the current value.
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
)
}
49 changes: 21 additions & 28 deletions npm/react/cypress/component/advanced/mocking-axios/1-users.jsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
import React from 'react'
import React, { useState, useEffect } from 'react'
// import the entire axios module
// later we can use axios.get to make requests
import axios from 'axios'

export class Users extends React.Component {
constructor (props) {
super(props)
this.state = {
users: [],
}
}
export function Users () {
const [users, setUsers] = useState([])

componentDidMount () {
axios
.get('https://jsonplaceholder.cypress.io/users?_limit=3')
.then((response) => {
// JSON responses are automatically parsed.
this.setState({
users: response.data,
})
})
}
const getUsers = async () => {
const response = await axios.get('https://jsonplaceholder.cypress.io/users?_limit=3')
// JSON responses are automatically parsed.

render () {
return (
<div>
{this.state.users.map((user) => (
<li key={user.id}>
<strong>{user.id}</strong> - {user.name}
</li>
))}
</div>
)
setUsers(response.data)
}

useEffect(() => {
getUsers()
}, [])

return (
<div>
{users.map((user) => (
<li key={user.id}>
<strong>{user.id}</strong> - {user.name}
</li>
))}
</div>
)
}
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/// <reference types="cypress" />
import React from 'react'
import { mount } from '@cypress/react'
import { Users } from './3-users-api.jsx'
import * as axios from './axios-api'
import { Users } from './2-users-api.jsx'
import * as axios from './axios-api.jsx'

describe('Mocking wrapped Axios', () => {
it('shows real users', () => {
Expand Down
29 changes: 29 additions & 0 deletions npm/react/cypress/component/advanced/mocking-axios/2-users-api.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, { useState, useEffect } from 'react'
// import wrapped Axios method
import axiosApi from './axios-api'

export function Users () {
const [users, setUsers] = useState([])

const getUsers = async () => {
console.log({ axiosApi })
const response = await axiosApi.get('https://jsonplaceholder.cypress.io/users?_limit=3')
// JSON responses are automatically parsed.

setUsers(response.data)
}

useEffect(() => {
getUsers()
}, [])

return (
<div>
{users.map((user) => (
<li key={user.id}>
<strong>{user.id}</strong> - {user.name}
</li>
))}
</div>
)
}

This file was deleted.

This file was deleted.

Loading

0 comments on commit 25fde00

Please sign in to comment.