-
Notifications
You must be signed in to change notification settings - Fork 3.1k
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
feat: React 18 support #22876
Merged
Merged
feat: React 18 support #22876
Changes from 39 commits
Commits
Show all changes
43 commits
Select commit
Hold shift + click to select a range
993e1da
update cli exports
lmiller1990 ade4351
add additional react adapters
lmiller1990 fcfbf03
update system test infra to better cover react versions
lmiller1990 98e7656
use idiomatic cy.mount and cy.unmount
lmiller1990 f9efc14
add additional test projects
lmiller1990 9b1defc
update tests
lmiller1990 080d57c
add new modules
lmiller1990 035be0b
remove dead code, organize code more
lmiller1990 0b2d010
add react 16 project
lmiller1990 4eb8861
update webpack to resolve react correctly
lmiller1990 12187dd
add test for react 16
lmiller1990 b20afbc
update snaps
lmiller1990 27af092
add react adapters
lmiller1990 8349a58
ignore cli/react files
lmiller1990 2a13757
use official rollup plugin to bundle npm/react
lmiller1990 47b8311
update yarn lock for webpack dev server tests
lmiller1990 84f2981
update vite dev server projects
lmiller1990 e47b9d0
update config
lmiller1990 bd9064d
remove console.log
lmiller1990 5566be4
update tsconfig
lmiller1990 9631f61
fix tests
lmiller1990 4b292ce
fix another test
lmiller1990 288d792
update snaps
lmiller1990 66bae5a
update snaps
lmiller1990 0bbb08b
fix build
lmiller1990 d6e0609
remove react{16,17}, update tests
lmiller1990 5be91db
update build
lmiller1990 0f7be7a
add missing export
lmiller1990 8b473c6
update test
lmiller1990 e0d2a9a
fixing tests
lmiller1990 92d0fe7
fixing tests
lmiller1990 34fbe9a
update snaps
lmiller1990 53ac824
Merge remote-tracking branch 'origin/develop' into lmiller/react-adap…
lmiller1990 802be43
update snaps again
lmiller1990 9e6c151
build artifacts on circle
lmiller1990 0cfdae1
dont try to update rollup plugin
lmiller1990 b485f24
update circle
lmiller1990 3899bba
update
lmiller1990 dfb2b15
add missing build step
lmiller1990 b33d378
update deps, remove old code
lmiller1990 9e4de06
revert circle changes
lmiller1990 b4b666c
do not hoist deps from react18
lmiller1990 88143d7
remove deps
lmiller1990 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -17,5 +17,5 @@ build | |
# the sync-exported-npm-with-cli.js script | ||
vue | ||
vue2 | ||
react | ||
react* | ||
mount-utils |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,207 @@ | ||
import * as React from 'react' | ||
import ReactDOM from 'react-dom' | ||
import getDisplayName from './getDisplayName' | ||
import { | ||
injectStylesBeforeElement, | ||
getContainerEl, | ||
ROOT_SELECTOR, | ||
setupHooks, | ||
} from '@cypress/mount-utils' | ||
import type { InternalMountOptions, InternalUnmountOptions, MountOptions, MountReturn, UnmountArgs } from './types' | ||
|
||
/** | ||
* Inject custom style text or CSS file or 3rd party style resources | ||
*/ | ||
const injectStyles = (options: MountOptions) => { | ||
return (): HTMLElement => { | ||
const el = getContainerEl() | ||
|
||
return injectStylesBeforeElement(options, document, el) | ||
} | ||
} | ||
|
||
export let lastMountedReactDom: (typeof ReactDOM) | undefined | ||
|
||
/** | ||
* Create an `mount` function. Performs all the non-React-version specific | ||
* behavior related to mounting. The React-version-specific code | ||
* is injected. This helps us to maintain a consistent public API | ||
* and handle breaking changes in React's rendering API. | ||
* | ||
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters, | ||
* or people writing adapters for third-party, custom adapters. | ||
*/ | ||
export const makeMountFn = ( | ||
type: 'mount' | 'rerender', | ||
jsx: React.ReactNode, | ||
options: MountOptions = {}, | ||
rerenderKey?: string, | ||
internalMountOptions?: InternalMountOptions, | ||
): globalThis.Cypress.Chainable<MountReturn> => { | ||
if (!internalMountOptions) { | ||
throw Error('internalMountOptions must be provided with `render` and `reactDom` parameters') | ||
} | ||
|
||
// Get the display name property via the component constructor | ||
// @ts-ignore FIXME | ||
const componentName = getDisplayName(jsx.type, options.alias) | ||
const displayName = options.alias || componentName | ||
|
||
const jsxComponentName = `<${componentName} ... />` | ||
|
||
const message = options.alias | ||
? `${jsxComponentName} as "${options.alias}"` | ||
: jsxComponentName | ||
|
||
return cy | ||
.then(injectStyles(options)) | ||
.then(() => { | ||
const reactDomToUse = internalMountOptions.reactDom | ||
|
||
lastMountedReactDom = reactDomToUse | ||
|
||
const el = getContainerEl() | ||
|
||
if (!el) { | ||
throw new Error( | ||
[ | ||
`[@cypress/react] 🔥 Hmm, cannot find root element to mount the component. Searched for ${ROOT_SELECTOR}`, | ||
].join(' '), | ||
) | ||
} | ||
|
||
const key = rerenderKey ?? | ||
// @ts-ignore provide unique key to the the wrapped component to make sure we are rerendering between tests | ||
(Cypress?.mocha?.getRunner()?.test?.title as string || '') + Math.random() | ||
const props = { | ||
key, | ||
} | ||
|
||
const reactComponent = React.createElement( | ||
options.strict ? React.StrictMode : React.Fragment, | ||
props, | ||
jsx, | ||
) | ||
// since we always surround the component with a fragment | ||
// let's get back the original component | ||
const userComponent = (reactComponent.props as { | ||
key: string | ||
children: React.ReactNode | ||
}).children | ||
|
||
internalMountOptions.render(reactComponent, el, reactDomToUse) | ||
|
||
if (options.log !== false) { | ||
Cypress.log({ | ||
name: type, | ||
type: 'parent', | ||
message: [message], | ||
// @ts-ignore | ||
$el: (el.children.item(0) as unknown) as JQuery<HTMLElement>, | ||
consoleProps: () => { | ||
return { | ||
// @ts-ignore protect the use of jsx functional components use ReactNode | ||
props: jsx.props, | ||
description: type === 'mount' ? 'Mounts React component' : 'Rerenders mounted React component', | ||
home: 'https://github.com/cypress-io/cypress', | ||
} | ||
}, | ||
}).snapshot('mounted').end() | ||
} | ||
|
||
return ( | ||
// Separate alias and returned value. Alias returns the component only, and the thenable returns the additional functions | ||
cy.wrap<React.ReactNode>(userComponent, { log: false }) | ||
.as(displayName) | ||
.then(() => { | ||
return cy.wrap<MountReturn>({ | ||
component: userComponent, | ||
rerender: (newComponent) => makeMountFn('rerender', newComponent, options, key, internalMountOptions), | ||
unmount: internalMountOptions.unmount, | ||
}, { log: false }) | ||
}) | ||
// by waiting, we delaying test execution for the next tick of event loop | ||
// and letting hooks and component lifecycle methods to execute mount | ||
// https://github.com/bahmutov/cypress-react-unit-test/issues/200 | ||
.wait(0, { log: false }) | ||
) | ||
// Bluebird types are terrible. I don't think the return type can be carried without this cast | ||
}) as unknown as globalThis.Cypress.Chainable<MountReturn> | ||
} | ||
|
||
/** | ||
* Create an `unmount` function. Performs all the non-React-version specific | ||
* behavior related to unmounting. | ||
* | ||
* This is designed to be consumed by `npm/react{16,17,18}`, and other React adapters, | ||
* or people writing adapters for third-party, custom adapters. | ||
*/ | ||
export const makeUnmountFn = (options: UnmountArgs, internalUnmountOptions: InternalUnmountOptions) => { | ||
return cy.then(() => { | ||
return cy.get(ROOT_SELECTOR, { log: false }).then(($el) => { | ||
if (lastMountedReactDom) { | ||
internalUnmountOptions.unmount($el[0]) | ||
const wasUnmounted = internalUnmountOptions.unmount($el[0]) | ||
|
||
if (wasUnmounted && options.log) { | ||
Cypress.log({ | ||
name: 'unmount', | ||
type: 'parent', | ||
message: [options.boundComponentMessage ?? 'Unmounted component'], | ||
consoleProps: () => { | ||
return { | ||
description: 'Unmounts React component', | ||
parent: $el[0], | ||
home: 'https://github.com/cypress-io/cypress', | ||
} | ||
}, | ||
}) | ||
} | ||
} | ||
}) | ||
}) | ||
} | ||
|
||
// Cleanup before each run | ||
// NOTE: we cannot use unmount here because | ||
// we are not in the context of a test | ||
const preMountCleanup = () => { | ||
const el = getContainerEl() | ||
|
||
if (el && lastMountedReactDom) { | ||
lastMountedReactDom.unmountComponentAtNode(el) | ||
} | ||
} | ||
|
||
const _mount = (jsx: React.ReactNode, options: MountOptions = {}) => makeMountFn('mount', jsx, options) | ||
|
||
export const createMount = (defaultOptions: MountOptions) => { | ||
return ( | ||
element: React.ReactElement, | ||
options?: MountOptions, | ||
) => { | ||
return _mount(element, { ...defaultOptions, ...options }) | ||
} | ||
} | ||
|
||
/** @deprecated Should be removed in the next major version */ | ||
// TODO: Remove | ||
export default _mount | ||
|
||
export interface JSX extends Function { | ||
displayName: string | ||
} | ||
|
||
// Side effects from "import { mount } from '@cypress/<my-framework>'" are annoying, we should avoid doing this | ||
// by creating an explicit function/import that the user can register in their 'component.js' support file, | ||
// such as: | ||
// import 'cypress/<my-framework>/support' | ||
// or | ||
// import { registerCT } from 'cypress/<my-framework>' | ||
// registerCT() | ||
// Note: This would be a breaking change | ||
|
||
// it is required to unmount component in beforeEach hook in order to provide a clean state inside test | ||
// because `mount` can be called after some preparation that can side effect unmount | ||
// @see npm/react/cypress/component/advanced/set-timeout-example/loading-indicator-spec.js | ||
setupHooks(preMountCleanup) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,7 @@ | ||
export * from './createMount' | ||
|
||
export * from './mount' | ||
|
||
export * from './mountHook' | ||
|
||
export * from './types' |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
So CT team can test the binary - most of the team is on mac.