-
{status}
-
- {this.renderSquare(0)}
- {this.renderSquare(1)}
- {this.renderSquare(2)}
-
-
- {this.renderSquare(3)}
- {this.renderSquare(4)}
- {this.renderSquare(5)}
-
-
- {this.renderSquare(6)}
- {this.renderSquare(7)}
- {this.renderSquare(8)}
-
-
-
-
-
-
{/* status */}
-
{/* TODO */}
-
+ return (
+
+ )
+}
+
+export function calculateWinner (squares) {
+ const lines = [
+ [0, 1, 2],
+ [3, 4, 5],
+ [6, 7, 8],
+ [0, 3, 6],
+ [1, 4, 7],
+ [2, 5, 8],
+ [0, 4, 8],
+ [2, 4, 6],
+ ]
+
+ for (let i = 0; i < lines.length; i++) {
+ const [a, b, c] = lines[i]
+
+ if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+ return squares[a]
+ }
}
+
+ return null
}
diff --git a/npm/react/cypress/component/basic/css/Button.jsx b/npm/react/cypress/component/basic/css/Button.jsx
index f2801f5dc218..69564bb12127 100644
--- a/npm/react/cypress/component/basic/css/Button.jsx
+++ b/npm/react/cypress/component/basic/css/Button.jsx
@@ -1,22 +1,20 @@
import React from 'react'
import './Button.css'
-export class Button extends React.Component {
- handleClick () {
- this.props.clickHandler(this.props.name)
- }
-
- render () {
- const className = [
- 'component-button',
- this.props.orange ? 'orange' : '',
- this.props.wide ? 'wide' : '',
- ]
+export function Button ({ name, orange, wide, clickHandler }) {
+ const className = [
+ 'component-button',
+ orange ? 'orange' : '',
+ wide ? 'wide' : '',
+ ]
- return (
-
- {this.props.name}
-
- )
+ function handleClick () {
+ clickHandler(name)
}
+
+ return (
+
+ {name}
+
+ )
}
diff --git a/npm/react/cypress/component/basic/enzyme/README.md b/npm/react/cypress/component/basic/enzyme/README.md
deleted file mode 100644
index 947f0b442ed8..000000000000
--- a/npm/react/cypress/component/basic/enzyme/README.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# Enzyme examples
-
-This folder shows several examples from [Enzyme docs](https://enzymejs.github.io/enzyme/).
-
-In general if you are migrating from Enzyme to `@cypress/react`:
-
-- there is no shallow mounting, only the full mounting. Thus `@cypress/react` has `mount` which is similar to the Enzyme's `render`. It renders the full HTML and CSS output of your component.
-- you can mock [children components](https://github.com/bahmutov/cypress-react-unit-test/tree/main/cypress/component/advanced/mocking-component) if you want to avoid running "expensive" components during tests
-- the test is running as a "mini" web application. Thus if you want to set a context around component, then set the [context around the component](https://github.com/bahmutov/cypress-react-unit-test/tree/main/cypress/component/advanced/context)
-
-## setState
-
-If you want to change the component's internal state, use the component reference. You can get it by using the special property `ref` when mounting.
-
-```js
-// get the component reference using "ref" prop
-// and place it into the object for Cypress to "wait" for it
-let c = {}
-mount(
(c.instance = i)} />)
-cy.wrap(c)
- .its('instance')
- .invoke('setState', { count: 10 })
-```
-
-See [state-spec.js](state-spec.js) file.
-
-## setProps
-
-There is no direct implementation of `setProps`. If you want to see how the component behaves with different props:
-
-```js
-it('mounts component with new props', () => {
- mount({name || 'not set'}
-}
-```
-
-Since the above syntax is [deprecated](https://reactjs.org/docs/legacy-context.html), `@cypress/react` does not support it. Instead use `createContext` and `Context.Provider` to surround the mounted component, just like you would do in a regular application code.
-
-```js
-mount(
-
- ,
-)
-```
-
-Instead of setting a new context, mount the same component but surround it with a different context provider
-
-```js
-const cmp =
- {cmp}
- ,
-)
-
-// same component, different provider
-mount(
-
- {cmp}
- ,
-)
-```
-
-See [context-spec.js](context-spec.js) for more examples.
diff --git a/npm/react/cypress/component/basic/enzyme/context.cy.jsx b/npm/react/cypress/component/basic/enzyme/context.cy.jsx
deleted file mode 100644
index 87e660cab7af..000000000000
--- a/npm/react/cypress/component/basic/enzyme/context.cy.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-///
- ,
- )
-
- cy.contains('test context').should('be.visible')
- })
-
- it('mounts new context', () => {
- // instead of setting the context from the test
- // just mount the component again with a different provider around it
- const cmp =
- {cmp}
- ,
- )
-
- cy.contains('first context').should('be.visible')
- cy.contains('.id', '0x123').should('be.visible')
-
- // same component, different provider
- mount(
-
- {cmp}
- ,
- )
-
- cy.contains('second context').should('be.visible')
- cy.contains('.id', '0x123').should('be.visible')
- })
- })
-})
diff --git a/npm/react/cypress/component/basic/enzyme/props.cy.jsx b/npm/react/cypress/component/basic/enzyme/props.cy.jsx
deleted file mode 100644
index 0ccb58844c06..000000000000
--- a/npm/react/cypress/component/basic/enzyme/props.cy.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-///
- {foo} count {this.state.count}
-
- )
- }
-}
-
-describe('Enzyme', () => {
- // example test copied from
- // https://github.com/enzymejs/enzyme/blob/master/packages/enzyme-test-suite/test/shared/methods/setProps.jsx
-
- context('setProps', () => {
- it('gets props from the component', () => {
- mount({this.context.name || 'context not set'}
- {this.state.id}
-
- )
- }
-}
-
-SimpleComponent.contextType = SimpleContext
diff --git a/npm/react/cypress/component/basic/enzyme/simple-context.jsx b/npm/react/cypress/component/basic/enzyme/simple-context.jsx
deleted file mode 100644
index 80fd038f2e82..000000000000
--- a/npm/react/cypress/component/basic/enzyme/simple-context.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// https://reactjs.org/docs/context.html
-import { createContext } from 'react'
-
-export const SimpleContext = createContext({ name: '' })
diff --git a/npm/react/cypress/component/basic/enzyme/state.cy.jsx b/npm/react/cypress/component/basic/enzyme/state.cy.jsx
deleted file mode 100644
index 2f3db3157097..000000000000
--- a/npm/react/cypress/component/basic/enzyme/state.cy.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-///
- {foo} count {this.state.count}
-
- )
- }
-}
-
-describe('Enzyme', () => {
- context('setState', () => {
- it('sets component state', () => {
- // get the component reference using "ref" prop
- // and place it into the object for Cypress to "wait" for it
- let c = {}
-
- mount( (c.instance = i)} />)
- cy.contains('initial').should('be.visible')
-
- cy.log('**check state**')
- cy.wrap(c)
- .its('instance.state')
- .should('deep.equal', { count: 0 })
-
- cy.log('**setState**')
- cy.wrap(c)
- .its('instance')
- .invoke('setState', { count: 10 })
-
- cy.wrap(c)
- .its('instance.state')
- .should('deep.equal', { count: 10 })
-
- cy.contains('initial count 10')
- })
- })
-})
diff --git a/npm/react/cypress/component/basic/network/1-users.jsx b/npm/react/cypress/component/basic/network/1-users.jsx
index 6f879c6f6337..feb0aafacfdb 100644
--- a/npm/react/cypress/component/basic/network/1-users.jsx
+++ b/npm/react/cypress/component/basic/network/1-users.jsx
@@ -1,34 +1,26 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
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')
- render () {
- return (
-
- {this.state.users.map((user) => (
-
- {user.id} - {user.name}
-
- ))}
-
- )
+ setUsers(response.data)
}
+
+ useEffect(() => {
+ getUsers()
+ }, [])
+
+ return (
+
+ {users.map((user) => (
+
+ {user.id} - {user.name}
+
+ ))}
+
+ )
}
diff --git a/npm/react/cypress/component/basic/network/2-users-fetch.jsx b/npm/react/cypress/component/basic/network/2-users-fetch.jsx
index f63f26c53254..b5d302291010 100644
--- a/npm/react/cypress/component/basic/network/2-users-fetch.jsx
+++ b/npm/react/cypress/component/basic/network/2-users-fetch.jsx
@@ -1,34 +1,26 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
-export class Users extends React.Component {
- constructor (props) {
- super(props)
- this.state = {
- users: [],
- }
- }
+export function Users () {
+ const [users, setUsers] = useState([])
- componentDidMount () {
- fetch('https://jsonplaceholder.cypress.io/users?_limit=3')
- .then((response) => {
- return response.json()
- })
- .then((list) => {
- this.setState({
- users: list,
- })
- })
- }
+ const getUsers = async () => {
+ const response = await fetch('https://jsonplaceholder.cypress.io/users?_limit=3')
+ const list = await response.json()
- render () {
- return (
-
- {this.state.users.map((user) => (
-
- {user.id} - {user.name}
-
- ))}
-
- )
+ setUsers(list)
}
+
+ useEffect(() => {
+ getUsers()
+ }, [])
+
+ return (
+
+ {users.map((user) => (
+
+ {user.id} - {user.name}
+
+ ))}
+
+ )
}
diff --git a/npm/react/cypress/component/basic/react-tutorial/game.cy.jsx b/npm/react/cypress/component/basic/react-tutorial/game.cy.jsx
index c365c60638c0..263c638db5c0 100644
--- a/npm/react/cypress/component/basic/react-tutorial/game.cy.jsx
+++ b/npm/react/cypress/component/basic/react-tutorial/game.cy.jsx
@@ -5,11 +5,11 @@ import { mount } from '@cypress/react'
import './tic-tac-toe.css'
// for now need a constructor, otherwise getting "Weak map" key
-const BoardWrap = ({ squares, onClick }) => {
+const BoardWrap = ({ squares, onPlay }) => {
return (
)
@@ -21,16 +21,16 @@ beforeEach(() => {
it('renders empty Board', () => {
const squares = Array(9).fill(null)
- const onClick = cy.stub()
+ const onPlay = cy.stub()
- mount(
- {props.value}
+
+ {value}
)
}
-export class Board extends React.Component {
- renderSquare (i) {
- return (
- this.props.onClick(i)}
- />
- )
- }
-
- render () {
- return (
-
-
- {this.renderSquare(0)}
- {this.renderSquare(1)}
- {this.renderSquare(2)}
-
-
- {this.renderSquare(3)}
- {this.renderSquare(4)}
- {this.renderSquare(5)}
-
-
- {this.renderSquare(6)}
- {this.renderSquare(7)}
- {this.renderSquare(8)}
-
-
{status}
+
+ handleClick(0)} />
+ handleClick(1)} />
+ handleClick(2)} />
+
+
+ handleClick(3)} />
+ handleClick(4)} />
+ handleClick(5)} />
+
+
+ handleClick(6)} />
+ handleClick(7)} />
+ handleClick(8)} />
+
+
+ )
+}
+
+export default function Game () {
+ const [history, setHistory] = useState([Array(9).fill(null)])
+ const [currentMove, setCurrentMove] = useState(0)
+ const xIsNext = currentMove % 2 === 0
+ const currentSquares = history[currentMove]
+
+ function handlePlay (nextSquares) {
+ const nextHistory = [...history.slice(0, currentMove + 1), nextSquares]
- const moves = history.map((step, move) => {
- const desc = move ? `Go to move #${move}` : 'Go to game start'
+ setHistory(nextHistory)
+ setCurrentMove(nextHistory.length - 1)
+ }
- return (
-
- this.jumpTo(move)}>{desc}
-
- )
- })
+ function jumpTo (nextMove) {
+ setCurrentMove(nextMove)
+ }
- let status
+ const moves = history.map((squares, move) => {
+ let description
- if (winner) {
- status = `Winner: ${winner}`
+ if (move > 0) {
+ description = `Go to move #${ move}`
} else {
- status = `Next player: ${this.state.xIsNext ? 'X' : 'O'}`
+ description = 'Go to game start'
}
return (
-
-
- this.handleClick(i)} />
-
-
-
+ jumpTo(move)}>{description}
+
)
- }
-}
+ })
-// ========================================
-
-// ReactDOM.render(
-
Shopping List for {this.props.name}
-
- Instagram
- WhatsApp
- Oculus
-
-
+
Shopping List for {name}
+
+ Instagram
+ WhatsApp
+ Oculus
+
+
alert('click')}>
- {this.props.value}
-
- )
- }
+export default function Square ({ value }) {
+ return (
+ alert('click')}>
+ {value}
+
+ )
}
diff --git a/npm/react/cypress/component/basic/react-tutorial/square2.jsx b/npm/react/cypress/component/basic/react-tutorial/square2.jsx
index 564fd505c3de..9869d3ef332b 100644
--- a/npm/react/cypress/component/basic/react-tutorial/square2.jsx
+++ b/npm/react/cypress/component/basic/react-tutorial/square2.jsx
@@ -1,18 +1,9 @@
import React from 'react'
-export default class Square extends React.Component {
- constructor (props) {
- super(props)
- this.state = {
- value: null,
- }
- }
-
- render () {
- return (
- alert('click')}>
- {this.props.value}
-
- )
- }
+export default function Square ({ value }) {
+ return (
+ alert('click')}>
+ {value || null}
+
+ )
}
diff --git a/npm/react/cypress/component/basic/react-tutorial/square3.jsx b/npm/react/cypress/component/basic/react-tutorial/square3.jsx
index 35bc02beee2f..1c5122962847 100644
--- a/npm/react/cypress/component/basic/react-tutorial/square3.jsx
+++ b/npm/react/cypress/component/basic/react-tutorial/square3.jsx
@@ -1,18 +1,11 @@
-import React from 'react'
+import React, { useState } from 'react'
-export default class Square extends React.Component {
- constructor (props) {
- super(props)
- this.state = {
- value: null,
- }
- }
+export default function Square () {
+ const [value, setValue] = useState(null)
- render () {
- return (
- this.setState({ value: 'X' })}>
- {this.state.value}
-
- )
- }
+ return (
+ setValue('X')}>
+ {value}
+
+ )
}
diff --git a/npm/react/cypress/component/basic/react-tutorial/square4.jsx b/npm/react/cypress/component/basic/react-tutorial/square4.jsx
index 507259650fa1..97ee0aaed834 100644
--- a/npm/react/cypress/component/basic/react-tutorial/square4.jsx
+++ b/npm/react/cypress/component/basic/react-tutorial/square4.jsx
@@ -1,9 +1,9 @@
import React from 'react'
-export default function Square (props) {
+export default function Square ({ value, onClick }) {
return (
-
- {props.value}
+
+ {value}
)
}
diff --git a/npm/react/cypress/component/basic/rerender/effects.cy.jsx b/npm/react/cypress/component/basic/rerender/effects.cy.jsx
index cebe663c7e08..b170d0ad6b9c 100644
--- a/npm/react/cypress/component/basic/rerender/effects.cy.jsx
+++ b/npm/react/cypress/component/basic/rerender/effects.cy.jsx
@@ -1,7 +1,6 @@
/// Hello
)
.then(async () => {
// does not call useEffect in react 17 unmount synchronously.
// @see https://github.com/facebook/react/issues/20263
diff --git a/npm/react/cypress/component/basic/unmount/comp.cy.jsx b/npm/react/cypress/component/basic/unmount/comp.cy.jsx
index f12b80c56e6c..c6f53a307379 100644
--- a/npm/react/cypress/component/basic/unmount/comp.cy.jsx
+++ b/npm/react/cypress/component/basic/unmount/comp.cy.jsx
@@ -1,5 +1,5 @@
/// Component with mount and unmount calls
- }
+ return Component with mount and unmount calls
}
diff --git a/npm/react/cypress/component/basic/unmount/unmount.cy.jsx b/npm/react/cypress/component/basic/unmount/unmount.cy.jsx
deleted file mode 100644
index e4bd608e723e..000000000000
--- a/npm/react/cypress/component/basic/unmount/unmount.cy.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/// My component
- }
-}
-
-describe('Comp with componentWillUnmount', () => {
- it('calls the prop', () => {
- mount(Hello
- }
+export function MyComponent () {
+ return Hello
}
export default MyComponent
diff --git a/npm/react/package.json b/npm/react/package.json
index a0f4d42f429f..bc72a7e8b8d0 100644
--- a/npm/react/package.json
+++ b/npm/react/package.json
@@ -17,25 +17,26 @@
},
"devDependencies": {
"@cypress/mount-utils": "0.0.0-development",
- "@types/semver": "7.5.0",
- "@vitejs/plugin-react": "4.3.0",
- "axios": "0.21.2",
+ "@types/semver": "7.5.8",
+ "@vitejs/plugin-react": "4.3.3",
+ "axios": "1.7.7",
"cypress": "0.0.0-development",
- "prop-types": "15.7.2",
- "react": "17.0.2",
- "react-dom": "17.0.2",
- "react-router": "6.10.0",
- "react-router-dom": "6.10.0",
+ "prop-types": "15.8.1",
+ "react": "18.3.1",
+ "react-dom": "18.3.1",
+ "react-router": "6.28.0",
+ "react-router-dom": "6.28.0",
"semver": "^7.5.3",
"typescript": "~5.4.5",
- "vite": "5.2.11",
+ "vite": "5.4.10",
"vite-plugin-require-transform": "1.0.12"
},
"peerDependencies": {
- "@types/react": "^16.9.16 || ^17.0.0",
+ "@types/react": "^18",
+ "@types/react-dom": "^18",
"cypress": "*",
- "react": "^=16.x || ^=17.x",
- "react-dom": "^=16.x || ^=17.x"
+ "react": "^18",
+ "react-dom": "^18"
},
"files": [
"dist"
@@ -90,9 +91,6 @@
"nx": {
"targets": {
"build": {
- "dependsOn": [
- "!@cypress/react18:build"
- ],
"outputs": [
"{workspaceRoot}/cli/react",
"{projectRoot}/dist"
diff --git a/npm/react/src/mount.ts b/npm/react/src/mount.ts
index d4cb0fa21c93..f1904fac7663 100644
--- a/npm/react/src/mount.ts
+++ b/npm/react/src/mount.ts
@@ -1,23 +1,23 @@
-import { getContainerEl } from '@cypress/mount-utils'
import React from 'react'
-import ReactDOM from 'react-dom'
-import major from 'semver/functions/major'
+import ReactDOM from 'react-dom/client'
+import { getContainerEl } from '@cypress/mount-utils'
import {
makeMountFn,
makeUnmountFn,
-} from './createMount'
+} from './index'
import type {
MountOptions,
InternalMountOptions,
-} from './types'
+ UnmountArgs,
+} from './index'
-let lastReactDom: typeof ReactDOM
+let root: ReactDOM.Root | null
const cleanup = () => {
- if (lastReactDom) {
- const root = getContainerEl()
+ if (root) {
+ root.unmount()
- lastReactDom.unmountComponentAtNode(root)
+ root = null
return true
}
@@ -27,10 +27,10 @@ const cleanup = () => {
/**
* Mounts a React component into the DOM.
- * @param jsx {React.ReactNode} The React component to mount.
- * @param options {MountOptions} [options={}] options to pass to the mount function.
- * @param rerenderKey {string} [rerenderKey] A key to use to force a rerender.
- * @see {@link https://on.cypress.io/mounting-react} for more details.
+ * @param {import('react').JSX.Element} jsx The React component to mount.
+ * @param {MountOptions} options Options to pass to the mount function.
+ * @param {string} rerenderKey A key to use to force a rerender.
+ *
* @example
* import { mount } from '@cypress/react'
* import { Stepper } from './Stepper'
@@ -40,24 +40,24 @@ const cleanup = () => {
* cy.get('[data-cy=increment]').click()
* cy.get('[data-cy=counter]').should('have.text', '1')
* }
+ *
+ * @see {@link https://on.cypress.io/mounting-react} for more details.
+ *
+ * @returns {Cypress.Chainable} The mounted component.
*/
export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerenderKey?: string) {
- if (major(React.version) === 18) {
- const message = '[cypress/react]: You are using `cypress/react`, which is designed for React <= 17. Consider changing to `cypress/react18`, which is designed for React 18.'
-
- console.error(message)
- Cypress.log({ name: 'warning', message })
- }
-
// Remove last mounted component if cy.mount is called more than once in a test
+ // React by default removes the last component when calling render, but we should remove the root
+ // to wipe away any state
cleanup()
-
const internalOptions: InternalMountOptions = {
reactDom: ReactDOM,
- render: (reactComponent: ReturnType, el: HTMLElement, reactDomToUse: typeof ReactDOM) => {
- lastReactDom = (reactDomToUse || ReactDOM)
+ render: (reactComponent: ReturnType, el: HTMLElement) => {
+ if (!root) {
+ root = ReactDOM.createRoot(el)
+ }
- return lastReactDom.render(reactComponent, el)
+ return root.render(reactComponent)
},
unmount: internalUnmount,
cleanup,
@@ -66,20 +66,14 @@ export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerende
return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
}
-/**
- * Unmounts the component from the DOM.
- * @internal
- * @param options - Options for unmounting.
- */
function internalUnmount (options = { log: true }) {
return makeUnmountFn(options)
}
-
/**
* Removed as of Cypress 11.0.0.
* @see https://on.cypress.io/migration-11-0-0-component-testing-updates
*/
-export function unmount (options = { log: true }) {
+export function unmount (options: UnmountArgs = { log: true }) {
// @ts-expect-error - undocumented API
Cypress.utils.throwErrByPath('mount.unmount')
}
diff --git a/npm/react/src/types.ts b/npm/react/src/types.ts
index b13bbcb1246f..e9da14f24548 100644
--- a/npm/react/src/types.ts
+++ b/npm/react/src/types.ts
@@ -8,7 +8,7 @@ export interface UnmountArgs {
export type MountOptions = Partial
export interface MountReactComponentOptions {
- ReactDom: typeof import('react-dom')
+ ReactDom: typeof import('react-dom/client')
/**
* Log the mounting command into Cypress Command Log,
* true by default.
@@ -22,11 +22,11 @@ export interface MountReactComponentOptions {
}
export interface InternalMountOptions {
- reactDom: typeof import('react-dom')
+ reactDom: typeof import('react-dom/client')
render: (
reactComponent: ReturnType,
el: HTMLElement,
- reactDomToUse: typeof import('react-dom')
+ reactDomToUse: typeof import('react-dom/client')
) => void
unmount: (options: UnmountArgs) => void
cleanup: () => boolean
diff --git a/npm/react18/.eslintignore b/npm/react18/.eslintignore
deleted file mode 100644
index 79afe972da7d..000000000000
--- a/npm/react18/.eslintignore
+++ /dev/null
@@ -1,5 +0,0 @@
-**/dist
-**/*.d.ts
-**/package-lock.json
-**/tsconfig.json
-**/cypress/fixtures
\ No newline at end of file
diff --git a/npm/react18/.releaserc.js b/npm/react18/.releaserc.js
deleted file mode 100644
index 17d3bb871472..000000000000
--- a/npm/react18/.releaserc.js
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
- ...require('../../.releaserc'),
-}
diff --git a/npm/react18/CHANGELOG.md b/npm/react18/CHANGELOG.md
deleted file mode 100644
index 8afdf6422cc5..000000000000
--- a/npm/react18/CHANGELOG.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# [@cypress/react18-v2.0.1](https://github.com/cypress-io/cypress/compare/@cypress/react18-v2.0.0...@cypress/react18-v2.0.1) (2024-06-07)
-
-
-### Bug Fixes
-
-* update cypress to Typescript 5 ([#29568](https://github.com/cypress-io/cypress/issues/29568)) ([f3b6766](https://github.com/cypress-io/cypress/commit/f3b67666a5db0438594339c379cf27e1fd1e4abc))
-
-# [@cypress/react18-v2.0.0](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.1.1...@cypress/react18-v2.0.0) (2022-11-07)
-
-
-### Bug Fixes
-
-* remove last mounted component upon subsequent mount calls ([#24470](https://github.com/cypress-io/cypress/issues/24470)) ([f39eb1c](https://github.com/cypress-io/cypress/commit/f39eb1c19e0923bda7ae263168fc6448da942d54))
-* remove some CT functions and props ([#24419](https://github.com/cypress-io/cypress/issues/24419)) ([294985f](https://github.com/cypress-io/cypress/commit/294985f8b3e0fa00ed66d25f88c8814603766074))
-
-
-### BREAKING CHANGES
-
-* remove last mounted component upon subsequent mount calls of mount
-
-# [@cypress/react18-v1.1.1](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.1.0...@cypress/react18-v1.1.1) (2022-10-13)
-
-
-### Bug Fixes
-
-* cypress/react18 rerender ([#23360](https://github.com/cypress-io/cypress/issues/23360)) ([8b8f20e](https://github.com/cypress-io/cypress/commit/8b8f20eec77d4c0a704aee7f7077dc92dbafb93f))
-
-# [@cypress/react18-v1.1.0](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.0.1...@cypress/react18-v1.1.0) (2022-08-30)
-
-
-### Features
-
-* adding svelte component testing support ([#23553](https://github.com/cypress-io/cypress/issues/23553)) ([f6eaad4](https://github.com/cypress-io/cypress/commit/f6eaad40e1836fa9db87c60defa5ae6f390c8fd8))
-
-# [@cypress/react18-v1.0.1](https://github.com/cypress-io/cypress/compare/@cypress/react18-v1.0.0...@cypress/react18-v1.0.1) (2022-08-15)
-
-
-### Bug Fixes
-
-* **react18:** unmount component with react18 API ([#23204](https://github.com/cypress-io/cypress/issues/23204)) ([eab950b](https://github.com/cypress-io/cypress/commit/eab950bec013f9caf5836e3fa58670fde25e2684))
-
-# @cypress/react18-v1.0.0 (2022-08-11)
-
-
-### Features
-
-* React 18 support ([#22876](https://github.com/cypress-io/cypress/issues/22876)) ([f0d3a48](https://github.com/cypress-io/cypress/commit/f0d3a4867907bf6e60468510daa883ccc8dcfb63))
diff --git a/npm/react18/README.md b/npm/react18/README.md
deleted file mode 100644
index 4f85d8081af8..000000000000
--- a/npm/react18/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# @cypress/react18
-
-Mount React 18 components in the open source [Cypress.io](https://www.cypress.io/) test runner
-
-> **Note:** This package is bundled with the `cypress` package and should not need to be installed separately. See the [React Component Testing Docs](https://docs.cypress.io/guides/component-testing/react/overview) for mounting React components. Installing and importing `mount` from `@cypress/react18` should only be done for advanced use-cases.
-
-## [Changelog](./CHANGELOG.md)
diff --git a/npm/react18/package.json b/npm/react18/package.json
deleted file mode 100644
index 5104e75eb943..000000000000
--- a/npm/react18/package.json
+++ /dev/null
@@ -1,71 +0,0 @@
-{
- "name": "@cypress/react18",
- "version": "0.0.0-development",
- "description": "Test React components using Cypress",
- "main": "dist/cypress-react.cjs.js",
- "scripts": {
- "build": "rimraf dist && rollup -c rollup.config.mjs",
- "postbuild": "node ../../scripts/sync-exported-npm-with-cli.js",
- "check-ts": "tsc --noEmit",
- "lint": "eslint --ext .js,.jsx,.ts,.tsx,.json, .",
- "watch": "yarn build --watch --watch.exclude ./dist/**/*"
- },
- "devDependencies": {
- "@cypress/mount-utils": "0.0.0-development",
- "@cypress/react": "0.0.0-development",
- "@rollup/plugin-commonjs": "^17.1.0",
- "@rollup/plugin-node-resolve": "^11.1.1",
- "@types/react": "17.0.83",
- "@types/react-dom": "17.0.25",
- "cypress": "0.0.0-development",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "rollup": "3.7.3",
- "rollup-plugin-typescript2": "^0.29.0",
- "typescript": "~5.4.5"
- },
- "peerDependencies": {
- "@types/react": "^18",
- "@types/react-dom": "^18",
- "cypress": "*",
- "react": "^18",
- "react-dom": "^18"
- },
- "files": [
- "dist"
- ],
- "types": "dist/index.d.ts",
- "license": "MIT",
- "repository": {
- "type": "git",
- "url": "https://github.com/cypress-io/cypress.git"
- },
- "homepage": "https://github.com/cypress-io/cypress/blob/develop/npm/react18/#readme",
- "bugs": "https://github.com/cypress-io/cypress/issues/new?assignees=&labels=npm%3A%20%40cypress%2Freact18&template=1-bug-report.md&title=",
- "keywords": [
- "react",
- "cypress",
- "cypress-io",
- "test",
- "testing"
- ],
- "module": "dist/cypress-react.esm-bundler.js",
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- },
- "publishConfig": {
- "access": "public"
- },
- "nx": {
- "targets": {
- "build": {
- "outputs": [
- "{workspaceRoot}/cli/react18",
- "{projectRoot}/dist"
- ]
- }
- }
- }
-}
diff --git a/npm/react18/rollup.config.mjs b/npm/react18/rollup.config.mjs
deleted file mode 100644
index db047e2bbd48..000000000000
--- a/npm/react18/rollup.config.mjs
+++ /dev/null
@@ -1,3 +0,0 @@
-import rollupConfig from '@cypress/react/rollup.config.mjs'
-
-export default rollupConfig
diff --git a/npm/react18/src/index.ts b/npm/react18/src/index.ts
deleted file mode 100644
index 9ab7390dfc87..000000000000
--- a/npm/react18/src/index.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { getContainerEl } from '@cypress/mount-utils'
-import {
- makeMountFn,
- makeUnmountFn,
-} from '@cypress/react'
-import type {
- MountOptions,
- MountReturn,
- InternalMountOptions,
- UnmountArgs,
-} from '@cypress/react'
-
-let root: ReactDOM.Root | null
-
-const cleanup = () => {
- if (root) {
- root.unmount()
-
- root = null
-
- return true
- }
-
- return false
-}
-
-/**
- * Mounts a React component into the DOM.
- * @param {import('react').JSX.Element} jsx The React component to mount.
- * @param {MountOptions} options Options to pass to the mount function.
- * @param {string} rerenderKey A key to use to force a rerender.
- *
- * @example
- * import { mount } from '@cypress/react'
- * import { Stepper } from './Stepper'
- *
- * it('mounts', () => {
- * mount(} The mounted component.
- */
-export function mount (jsx: React.ReactNode, options: MountOptions = {}, rerenderKey?: string) {
- // Remove last mounted component if cy.mount is called more than once in a test
- // React by default removes the last component when calling render, but we should remove the root
- // to wipe away any state
- cleanup()
- const internalOptions: InternalMountOptions = {
- // @ts-expect-error
- reactDom: ReactDOM,
- render: (reactComponent: ReturnType, el: HTMLElement) => {
- if (!root) {
- root = ReactDOM.createRoot(el)
- }
-
- return root.render(reactComponent)
- },
- unmount: internalUnmount,
- cleanup,
- }
-
- // @ts-expect-error
- return makeMountFn('mount', jsx, { ReactDom: ReactDOM, ...options }, rerenderKey, internalOptions)
-}
-
-function internalUnmount (options = { log: true }) {
- return makeUnmountFn(options)
-}
-/**
- * Removed as of Cypress 11.0.0.
- * @see https://on.cypress.io/migration-11-0-0-component-testing-updates
- */
-export function unmount (options: UnmountArgs = { log: true }) {
- // @ts-expect-error - undocumented API
- Cypress.utils.throwErrByPath('mount.unmount')
-}
-
-// Re-export this to help with migrating away from `unmount`
-export {
- getContainerEl,
-}
-
-export type {
- MountOptions,
- MountReturn,
-}
diff --git a/npm/react18/tsconfig.json b/npm/react18/tsconfig.json
deleted file mode 100644
index 8e6ae3e4c8a9..000000000000
--- a/npm/react18/tsconfig.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
- "compilerOptions": {
- "target": "es5",
- "module": "esnext",
- "moduleResolution": "node",
- "lib": [
- "es2015",
- "dom"
- ],
- "rootDir": "src",
- "outDir": "dist",
- "declaration": true,
- "strict": true,
- "types": [
- "cypress"
- ],
- "allowSyntheticDefaultImports": true,
- "esModuleInterop": true,
- "resolveJsonModule": false
- },
- "include": ["src/**/*.ts"]
-}
diff --git a/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts b/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
index 7c4959580c45..fb11182beacc 100644
--- a/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
+++ b/npm/vite-dev-server/cypress/e2e/vite-dev-server.cy.ts
@@ -19,7 +19,7 @@ describe('Config options', () => {
await ctx.actions.file.writeFileInProject(
'src/App.cy.jsx', `
import React from 'react'
- import { mount } from 'cypress/react18'
+ import { mount } from 'cypress/react'
export const App = () => {
return (
diff --git a/npm/vite-plugin-cypress-esm/README.md b/npm/vite-plugin-cypress-esm/README.md
index 97cb3aed2d5a..422b211f1b1b 100644
--- a/npm/vite-plugin-cypress-esm/README.md
+++ b/npm/vite-plugin-cypress-esm/README.md
@@ -10,8 +10,8 @@ Run Cypress with `DEBUG=cypress:vite-plugin-cypress-esm`. You will get logs in t
## Compatibility
| @cypress/vite-plugin-cypress-esm | cypress |
-| ------------------------ | ------- |
-| >= v1 | >= v12 |
+| -------------------------------- | ------- |
+| >= v1 | >= v12 |
## Usage
@@ -80,6 +80,14 @@ CypressEsm({
})
```
+If using the `@cypress/react` test harness, you may need to ignore the `react-dom/client` module by configuring as such:
+
+```ts
+CypressEsm({
+ ignoreImportList: ['**/react-dom/client']
+})
+```
+
## Known Issues
### Import Syntax
diff --git a/npm/vite-plugin-cypress-esm/cypress.config.ts b/npm/vite-plugin-cypress-esm/cypress.config.ts
index 3ea2aa0a48f5..88778d7d2290 100644
--- a/npm/vite-plugin-cypress-esm/cypress.config.ts
+++ b/npm/vite-plugin-cypress-esm/cypress.config.ts
@@ -13,12 +13,11 @@ export default defineConfig({
viteConfig: () => {
return {
plugins: [
- react({
- jsxRuntime: 'classic',
- }),
+ react(),
CypressEsm({
ignoreModuleList: ['**/ignoreModuleList.cy.ts', '*MyAsync*'],
- ignoreImportList: ['**/ImmutableModuleB*'],
+ // For `cypress/react` on react 18+, we need to ignore transforming the react-dom/client library
+ ignoreImportList: ['**/ImmutableModuleB*', '**/react-dom/client'],
}),
],
}
diff --git a/npm/vite-plugin-cypress-esm/package.json b/npm/vite-plugin-cypress-esm/package.json
index d7b5f214f551..f111d493a2b7 100644
--- a/npm/vite-plugin-cypress-esm/package.json
+++ b/npm/vite-plugin-cypress-esm/package.json
@@ -19,11 +19,11 @@
"devDependencies": {
"@tanstack/react-query": "4.36.1",
"@types/picomatch": "2.3.0",
- "@vitejs/plugin-react": "4.3.0",
- "react": "16.8.6",
- "react-dom": "16.8.6",
- "react-router": "6.10.0",
- "react-router-dom": "6.10.0",
+ "@vitejs/plugin-react": "4.3.3",
+ "react": "18.3.1",
+ "react-dom": "18.3.1",
+ "react-router": "6.28.0",
+ "react-router-dom": "6.28.0",
"vite": "5.2.11"
},
"files": [
diff --git a/npm/vue/package.json b/npm/vue/package.json
index 147a496893c1..b0544dde24d1 100644
--- a/npm/vue/package.json
+++ b/npm/vue/package.json
@@ -82,9 +82,6 @@
"nx": {
"targets": {
"build": {
- "dependsOn": [
- "!@cypress/react18:build"
- ],
"outputs": [
"{workspaceRoot}/cli/vue",
"{projectRoot}/dist"
diff --git a/npm/webpack-preprocessor/package.json b/npm/webpack-preprocessor/package.json
index 61b8978b67b9..0a614f0051c1 100644
--- a/npm/webpack-preprocessor/package.json
+++ b/npm/webpack-preprocessor/package.json
@@ -70,9 +70,6 @@
"nx": {
"targets": {
"build": {
- "dependsOn": [
- "!@cypress/react18:build"
- ],
"outputs": [
"{projectRoot}/dist"
]
diff --git a/packages/launchpad/cypress/e2e/config-warning.cy.ts b/packages/launchpad/cypress/e2e/config-warning.cy.ts
index 6ae9a48de1e9..a006556dc3a6 100644
--- a/packages/launchpad/cypress/e2e/config-warning.cy.ts
+++ b/packages/launchpad/cypress/e2e/config-warning.cy.ts
@@ -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 ^16.0.0 || ^17.0.0 || ^18.0.0, found 15.6.2.')
- .should('contain.text', 'react-dom. Expected ^16.0.0 || ^17.0.0 || ^18.0.0 but dependency was not found.')
+ .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.')
cy.get('.warning-markdown').find('li').should('have.length', 3)
})
diff --git a/packages/reporter/cypress/support/component.ts b/packages/reporter/cypress/support/component.ts
index 7ffa238e8510..4fe6c1860b90 100644
--- a/packages/reporter/cypress/support/component.ts
+++ b/packages/reporter/cypress/support/component.ts
@@ -1,4 +1,4 @@
-import { mount } from 'cypress/react18'
+import { mount } from 'cypress/react'
import 'cypress-real-events/support'
import { installCustomPercyCommand } from '@packages/frontend-shared/cypress/support/customPercyCommand'
diff --git a/packages/scaffold-config/src/dependencies.ts b/packages/scaffold-config/src/dependencies.ts
index bcbc6af49bdb..1a866514d967 100644
--- a/packages/scaffold-config/src/dependencies.ts
+++ b/packages/scaffold-config/src/dependencies.ts
@@ -22,7 +22,7 @@ export const WIZARD_DEPENDENCY_REACT = {
package: 'react',
installer: 'react',
description: 'A JavaScript library for building user interfaces',
- minVersion: '^16.0.0 || ^17.0.0 || ^18.0.0',
+ minVersion: '^18.0.0',
} as const
export const WIZARD_DEPENDENCY_REACT_DOM = {
@@ -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: '^16.0.0 || ^17.0.0 || ^18.0.0',
+ minVersion: '^18.0.0',
} as const
export const WIZARD_DEPENDENCY_TYPESCRIPT = {
diff --git a/packages/scaffold-config/src/frameworks.ts b/packages/scaffold-config/src/frameworks.ts
index 9c909d4ace9b..cf914d1c6903 100644
--- a/packages/scaffold-config/src/frameworks.ts
+++ b/packages/scaffold-config/src/frameworks.ts
@@ -101,16 +101,6 @@ export function getBundler (bundler: WizardBundler['type']): WizardBundler {
const mountModule = (mountModule: T) => (projectPath: string) => Promise.resolve(mountModule)
-const reactMountModule = async (projectPath: string) => {
- const reactPkg = await isDependencyInstalled(dependencies.WIZARD_DEPENDENCY_REACT, projectPath)
-
- if (!reactPkg.detectedVersion || !semver.valid(reactPkg.detectedVersion)) {
- return 'cypress/react'
- }
-
- return semver.major(reactPkg.detectedVersion) === 18 ? 'cypress/react18' : 'cypress/react'
-}
-
export const SUPPORT_STATUSES: Readonly = ['alpha', 'beta', 'full', 'community'] as const
export const CT_FRAMEWORKS: Cypress.ComponentFrameworkDefinition[] = [
@@ -130,7 +120,7 @@ export const CT_FRAMEWORKS: Cypress.ComponentFrameworkDefinition[] = [
},
codeGenFramework: 'react',
glob: '*.{js,jsx,tsx}',
- mountModule: reactMountModule,
+ mountModule: mountModule('cypress/react'),
supportStatus: 'full',
/**
* Next.js uses style-loader to inject CSS and requires this element to exist in the HTML.
@@ -176,7 +166,7 @@ export const CT_FRAMEWORKS: Cypress.ComponentFrameworkDefinition[] = [
},
codeGenFramework: 'react',
glob: '*.{js,jsx,tsx}',
- mountModule: reactMountModule,
+ mountModule: mountModule('cypress/react'),
supportStatus: 'full',
componentIndexHtml: componentIndexHtmlGenerator(),
},
diff --git a/packages/scaffold-config/test/unit/supportFile.spec.ts b/packages/scaffold-config/test/unit/supportFile.spec.ts
index 745d76791a3c..ac0e12d6bec1 100644
--- a/packages/scaffold-config/test/unit/supportFile.spec.ts
+++ b/packages/scaffold-config/test/unit/supportFile.spec.ts
@@ -4,11 +4,12 @@ import { expect } from 'chai'
describe('supportFileComponent', () => {
context('react', () => {
- for (const mountModule of ['cypress/react', 'cypress/react18'] as const) {
- it(`handles ${mountModule} and JS`, () => {
- const actual = supportFileComponent('js', mountModule)
+ const mountModule = 'cypress/react'
- expect(actual).to.eq(dedent`
+ it(`handles ${mountModule} and JS`, () => {
+ const actual = supportFileComponent('js', mountModule)
+
+ expect(actual).to.eq(dedent`
// ***********************************************************
// This example support/component.js is processed and
// loaded automatically before your test files.
@@ -37,12 +38,12 @@ describe('supportFileComponent', () => {
// Example use:
// cy.mount(Hello world
-}
-
-describe('using legacy mount', () => {
- it('issues a warning encouraging user to update', () => {
- // dont log else we create an endless loop!
- const log = cy.spy(Cypress, 'log').log(false)
- const err = cy.spy(console, 'error')
-
- mount(