From e91c355de2b1bd4b1b2fc1c42a471f95353e4db1 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Mon, 10 Aug 2020 16:17:12 -0700 Subject: [PATCH 01/29] [New] add `enzyme-adapter-react-17` --- .travis.yml | 7 + env.js | 3 + packages/enzyme-adapter-react-17/.babelrc | 9 + .../enzyme-adapter-react-17/.eslintignore | 1 + packages/enzyme-adapter-react-17/.eslintrc | 22 + packages/enzyme-adapter-react-17/.npmignore | 1 + packages/enzyme-adapter-react-17/.npmrc | 1 + packages/enzyme-adapter-react-17/package.json | 73 ++ .../src/ReactSeventeenAdapter.js | 881 ++++++++++++++++++ .../src/detectFiberTags.js | 112 +++ .../src/findCurrentFiberUsingSlowPath.js | 104 +++ packages/enzyme-adapter-react-17/src/index.js | 2 + .../src/getAdapterForReactVersion.js | 3 + .../enzyme-adapter-react-helper/src/index.js | 33 +- packages/enzyme-adapter-utils/src/Utils.js | 1 + .../test/ReactWrapper-spec.jsx | 2 +- .../test/ShallowWrapper-spec.jsx | 4 +- .../test/enzyme-adapter-react-install-spec.js | 4 + .../test/shared/methods/debug.jsx | 4 +- .../test/shared/methods/simulate.jsx | 8 +- 20 files changed, 1254 insertions(+), 21 deletions(-) create mode 100644 packages/enzyme-adapter-react-17/.babelrc create mode 120000 packages/enzyme-adapter-react-17/.eslintignore create mode 100644 packages/enzyme-adapter-react-17/.eslintrc create mode 120000 packages/enzyme-adapter-react-17/.npmignore create mode 120000 packages/enzyme-adapter-react-17/.npmrc create mode 100644 packages/enzyme-adapter-react-17/package.json create mode 100644 packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js create mode 100644 packages/enzyme-adapter-react-17/src/detectFiberTags.js create mode 100644 packages/enzyme-adapter-react-17/src/findCurrentFiberUsingSlowPath.js create mode 100644 packages/enzyme-adapter-react-17/src/index.js diff --git a/.travis.yml b/.travis.yml index 3b77e991b..14885adad 100644 --- a/.travis.yml +++ b/.travis.yml @@ -39,9 +39,15 @@ matrix: - node_js: "lts/*" env: LINT=true stage: test + - node_js: "8" + env: REACT=17 + stage: test - node_js: "8" env: REACT=16 stage: test + - node_js: "6" + env: REACT=17 + stage: test - node_js: "6" env: REACT=16 stage: test @@ -112,6 +118,7 @@ matrix: - node_js: "6" env: REACT=0.13 env: + - REACT=17.0 - REACT=16.14 - REACT=16.13 - REACT=16.12 diff --git a/env.js b/env.js index 9f4171412..89644f905 100755 --- a/env.js +++ b/env.js @@ -86,6 +86,9 @@ function getAdapter(reactVersion) { return '16.1'; } } + if (semver.intersects(reactVersion, '^17.0.0')) { + return '17'; + } return null; } const reactVersion = version < 15 ? '0.' + version : version; diff --git a/packages/enzyme-adapter-react-17/.babelrc b/packages/enzyme-adapter-react-17/.babelrc new file mode 100644 index 000000000..ba8ef12b9 --- /dev/null +++ b/packages/enzyme-adapter-react-17/.babelrc @@ -0,0 +1,9 @@ +{ + "presets": [ + ["airbnb", { "transformRuntime": false }], + ], + "plugins": [ + ["transform-replace-object-assign", { "moduleSpecifier": "object.assign" }], + ], + "sourceMaps": "both", +} diff --git a/packages/enzyme-adapter-react-17/.eslintignore b/packages/enzyme-adapter-react-17/.eslintignore new file mode 120000 index 000000000..86039baf5 --- /dev/null +++ b/packages/enzyme-adapter-react-17/.eslintignore @@ -0,0 +1 @@ +../../.eslintignore \ No newline at end of file diff --git a/packages/enzyme-adapter-react-17/.eslintrc b/packages/enzyme-adapter-react-17/.eslintrc new file mode 100644 index 000000000..b90230db4 --- /dev/null +++ b/packages/enzyme-adapter-react-17/.eslintrc @@ -0,0 +1,22 @@ +{ + "extends": "airbnb", + "parser": "babel-eslint", + "root": true, + "rules": { + "max-classes-per-file": 0, + "max-len": 0, + "import/no-extraneous-dependencies": 2, + "import/no-unresolved": 2, + "import/extensions": 2, + "react/no-deprecated": 0, + "react/no-find-dom-node": 0, + "react/no-multi-comp": 0, + "no-underscore-dangle": 0, + "class-methods-use-this": 0 + }, + "settings": { + "react": { + "version": "17", + }, + }, +} diff --git a/packages/enzyme-adapter-react-17/.npmignore b/packages/enzyme-adapter-react-17/.npmignore new file mode 120000 index 000000000..bc62d9df1 --- /dev/null +++ b/packages/enzyme-adapter-react-17/.npmignore @@ -0,0 +1 @@ +../enzyme/.npmignore \ No newline at end of file diff --git a/packages/enzyme-adapter-react-17/.npmrc b/packages/enzyme-adapter-react-17/.npmrc new file mode 120000 index 000000000..cba44bb38 --- /dev/null +++ b/packages/enzyme-adapter-react-17/.npmrc @@ -0,0 +1 @@ +../../.npmrc \ No newline at end of file diff --git a/packages/enzyme-adapter-react-17/package.json b/packages/enzyme-adapter-react-17/package.json new file mode 100644 index 000000000..0246806af --- /dev/null +++ b/packages/enzyme-adapter-react-17/package.json @@ -0,0 +1,73 @@ +{ + "name": "enzyme-adapter-react-17", + "version": "0.0.0", + "description": "JavaScript Testing utilities for React", + "homepage": "https://enzymejs.github.io/enzyme/", + "main": "build", + "scripts": { + "clean": "rimraf build", + "lint": "eslint --ext js,jsx .", + "pretest": "npm run lint", + "prebuild": "npm run clean", + "build": "babel --source-maps=both src --out-dir build", + "watch": "npm run build -- -w", + "prepublish": "not-in-publish || (npm run build && safe-publish-latest && cp ../../{LICENSE,README}.md ./)" + }, + "repository": { + "type": "git", + "url": "https://github.com/enzymejs/enzyme.git", + "directory": "packages/enzyme-adapter-react-17" + }, + "keywords": [ + "javascript", + "shallow rendering", + "shallowRender", + "test", + "reactjs", + "react", + "flux", + "testing", + "test utils", + "assertion helpers", + "tdd", + "mocha" + ], + "author": "Jordan Harband ", + "funding": { + "url": "https://github.com/sponsors/ljharb" + }, + "license": "MIT", + "dependencies": { + "enzyme-adapter-utils": "^1.13.1", + "enzyme-shallow-equal": "^1.0.4", + "has": "^1.0.3", + "object.assign": "^4.1.0", + "object.values": "^1.1.1", + "prop-types": "^15.7.2", + "react-is": "^17.0.0", + "react-test-renderer": "^17.0.0", + "semver": "^5.7.0" + }, + "peerDependencies": { + "enzyme": "^3.0.0", + "react": "^17.0.0", + "react-dom": "^17.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.0.0", + "@babel/core": "^7.0.0", + "babel-eslint": "^10.1.0", + "babel-plugin-transform-replace-object-assign": "^2.0.0", + "babel-preset-airbnb": "^4.5.0", + "enzyme": "^3.0.0", + "eslint": "^7.6.0", + "eslint-config-airbnb": "^18.2.0", + "eslint-plugin-import": "^2.22.0", + "eslint-plugin-jsx-a11y": "^6.3.1", + "eslint-plugin-react": "^7.20.5", + "eslint-plugin-react-hooks": "^4.0.8", + "in-publish": "^2.0.1", + "rimraf": "^2.7.1", + "safe-publish-latest": "^1.1.4" + } +} diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js new file mode 100644 index 000000000..62ebcc8c3 --- /dev/null +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -0,0 +1,881 @@ +/* eslint no-use-before-define: 0 */ +import React from 'react'; +import ReactDOM from 'react-dom'; +// eslint-disable-next-line import/no-unresolved +import ReactDOMServer from 'react-dom/server'; +// eslint-disable-next-line import/no-unresolved +import ShallowRenderer from 'react-test-renderer/shallow'; +// eslint-disable-next-line import/no-unresolved +import TestUtils from 'react-dom/test-utils'; +import checkPropTypes from 'prop-types/checkPropTypes'; +import has from 'has'; +import { + ConcurrentMode, + ContextConsumer, + ContextProvider, + Element, + ForwardRef, + Fragment, + isContextConsumer, + isContextProvider, + isElement, + isForwardRef, + isPortal, + isSuspense, + isValidElementType, + Lazy, + Memo, + Portal, + Profiler, + StrictMode, + Suspense, +} from 'react-is'; +import { EnzymeAdapter } from 'enzyme'; +import { typeOfNode } from 'enzyme/build/Utils'; +import shallowEqual from 'enzyme-shallow-equal'; +import { + displayNameOfNode, + elementToTree as utilElementToTree, + nodeTypeFromType as utilNodeTypeFromType, + mapNativeEventNames, + propFromEvent, + assertDomAvailable, + withSetStateAllowed, + createRenderWrapper, + createMountWrapper, + propsWithKeysAndRef, + ensureKeyOrUndefined, + simulateError, + wrap, + getMaskedContext, + getComponentStack, + RootFinder, + getNodeFromRootFinder, + wrapWithWrappingComponent, + getWrappingComponentMountRenderer, + compareNodeTypeOf, +} from 'enzyme-adapter-utils'; +import findCurrentFiberUsingSlowPath from './findCurrentFiberUsingSlowPath'; +import detectFiberTags from './detectFiberTags'; + +// Lazily populated if DOM is available. +let FiberTags = null; + +function nodeAndSiblingsArray(nodeWithSibling) { + const array = []; + let node = nodeWithSibling; + while (node != null) { + array.push(node); + node = node.sibling; + } + return array; +} + +function flatten(arr) { + const result = []; + const stack = [{ i: 0, array: arr }]; + while (stack.length) { + const n = stack.pop(); + while (n.i < n.array.length) { + const el = n.array[n.i]; + n.i += 1; + if (Array.isArray(el)) { + stack.push(n); + stack.push({ i: 0, array: el }); + break; + } + result.push(el); + } + } + return result; +} + +function nodeTypeFromType(type) { + if (type === Portal) { + return 'portal'; + } + + return utilNodeTypeFromType(type); +} + +function isMemo(type) { + return compareNodeTypeOf(type, Memo); +} + +function isLazy(type) { + return compareNodeTypeOf(type, Lazy); +} + +function unmemoType(type) { + return isMemo(type) ? type.type : type; +} + +function transformSuspense(renderedEl, prerenderEl, { suspenseFallback }) { + if (!isSuspense(renderedEl)) { + return renderedEl; + } + + let { children } = renderedEl.props; + + if (suspenseFallback) { + const { fallback } = renderedEl.props; + children = replaceLazyWithFallback(children, fallback); + } + + const { + propTypes, + defaultProps, + contextTypes, + contextType, + childContextTypes, + } = renderedEl.type; + + const FakeSuspense = Object.assign( + isStateful(prerenderEl.type) + ? class FakeSuspense extends prerenderEl.type { + render() { + const { type, props } = prerenderEl; + return React.createElement( + type, + { ...props, ...this.props }, + children, + ); + } + } + : function FakeSuspense(props) { // eslint-disable-line prefer-arrow-callback + return React.createElement( + renderedEl.type, + { ...renderedEl.props, ...props }, + children, + ); + }, + { + propTypes, + defaultProps, + contextTypes, + contextType, + childContextTypes, + }, + ); + return React.createElement(FakeSuspense, null, children); +} + +function elementToTree(el) { + if (!isPortal(el)) { + return utilElementToTree(el, elementToTree); + } + + const { children, containerInfo } = el; + const props = { children, containerInfo }; + + return { + nodeType: 'portal', + type: Portal, + props, + key: ensureKeyOrUndefined(el.key), + ref: el.ref || null, + instance: null, + rendered: elementToTree(el.children), + }; +} + +function toTree(vnode) { + if (vnode == null) { + return null; + } + // TODO(lmr): I'm not really sure I understand whether or not this is what + // i should be doing, or if this is a hack for something i'm doing wrong + // somewhere else. Should talk to sebastian about this perhaps + const node = findCurrentFiberUsingSlowPath(vnode); + switch (node.tag) { + case FiberTags.HostRoot: + return childrenToTree(node.child); + case FiberTags.HostPortal: { + const { + stateNode: { containerInfo }, + memoizedProps: children, + } = node; + const props = { containerInfo, children }; + return { + nodeType: 'portal', + type: Portal, + props, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: null, + rendered: childrenToTree(node.child), + }; + } + case FiberTags.ClassComponent: + return { + nodeType: 'class', + type: node.type, + props: { ...node.memoizedProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: node.stateNode, + rendered: childrenToTree(node.child), + }; + case FiberTags.FunctionalComponent: + return { + nodeType: 'function', + type: node.type, + props: { ...node.memoizedProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: null, + rendered: childrenToTree(node.child), + }; + case FiberTags.MemoClass: + return { + nodeType: 'class', + type: node.elementType.type, + props: { ...node.memoizedProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: node.stateNode, + rendered: childrenToTree(node.child.child), + }; + case FiberTags.MemoSFC: { + let renderedNodes = flatten(nodeAndSiblingsArray(node.child).map(toTree)); + if (renderedNodes.length === 0) { + renderedNodes = [node.memoizedProps.children]; + } + return { + nodeType: 'function', + type: node.elementType, + props: { ...node.memoizedProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: null, + rendered: renderedNodes, + }; + } + case FiberTags.HostComponent: { + let renderedNodes = flatten(nodeAndSiblingsArray(node.child).map(toTree)); + if (renderedNodes.length === 0) { + renderedNodes = [node.memoizedProps.children]; + } + return { + nodeType: 'host', + type: node.type, + props: { ...node.memoizedProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: node.stateNode, + rendered: renderedNodes, + }; + } + case FiberTags.HostText: + return node.memoizedProps; + case FiberTags.Fragment: + case FiberTags.Mode: + case FiberTags.ContextProvider: + case FiberTags.ContextConsumer: + return childrenToTree(node.child); + case FiberTags.Profiler: + case FiberTags.ForwardRef: { + return { + nodeType: 'function', + type: node.type, + props: { ...node.pendingProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: null, + rendered: childrenToTree(node.child), + }; + } + case FiberTags.Suspense: { + return { + nodeType: 'function', + type: Suspense, + props: { ...node.memoizedProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: null, + rendered: childrenToTree(node.child), + }; + } + case FiberTags.Lazy: + return childrenToTree(node.child); + default: + throw new Error(`Enzyme Internal Error: unknown node with tag ${node.tag}`); + } +} + +function childrenToTree(node) { + if (!node) { + return null; + } + const children = nodeAndSiblingsArray(node); + if (children.length === 0) { + return null; + } + if (children.length === 1) { + return toTree(children[0]); + } + return flatten(children.map(toTree)); +} + +function nodeToHostNode(_node) { + // NOTE(lmr): node could be a function component + // which wont have an instance prop, but we can get the + // host node associated with its return value at that point. + // Although this breaks down if the return value is an array, + // as is possible with React 16. + let node = _node; + while (node && !Array.isArray(node) && node.instance === null) { + node = node.rendered; + } + // if the SFC returned null effectively, there is no host node. + if (!node) { + return null; + } + + const mapper = (item) => { + if (item && item.instance) return ReactDOM.findDOMNode(item.instance); + return null; + }; + if (Array.isArray(node)) { + return node.map(mapper); + } + if (Array.isArray(node.rendered) && node.nodeType === 'class') { + return node.rendered.map(mapper); + } + return mapper(node); +} + +function replaceLazyWithFallback(node, fallback) { + if (!node) { + return null; + } + if (Array.isArray(node)) { + return node.map((el) => replaceLazyWithFallback(el, fallback)); + } + if (isLazy(node.type)) { + return fallback; + } + return { + ...node, + props: { + ...node.props, + children: replaceLazyWithFallback(node.props.children, fallback), + }, + }; +} + +const eventOptions = { + animation: true, + pointerEvents: true, + auxClick: true, +}; + +function wrapAct(fn) { + let returnVal; + TestUtils.act(() => { returnVal = fn(); }); + return returnVal; +} + +function getProviderDefaultValue(Provider) { + // React stores references to the Provider's defaultValue differently across versions. + if ('_defaultValue' in Provider._context) { + return Provider._context._defaultValue; + } + if ('_currentValue' in Provider._context) { + return Provider._context._currentValue; + } + throw new Error('Enzyme Internal Error: can’t figure out how to get Provider’s default value'); +} + +function makeFakeElement(type) { + return { $$typeof: Element, type }; +} + +function isStateful(Component) { + return Component.prototype && ( + Component.prototype.isReactComponent + || Array.isArray(Component.__reactAutoBindPairs) // fallback for createClass components + ); +} + +class ReactSeventeenAdapter extends EnzymeAdapter { + constructor() { + super(); + const { lifecycles } = this.options; + this.options = { + ...this.options, + enableComponentDidUpdateOnSetState: true, // TODO: remove, semver-major + legacyContextMode: 'parent', + lifecycles: { + ...lifecycles, + componentDidUpdate: { + onSetState: true, + }, + getDerivedStateFromProps: { + hasShouldComponentUpdateBug: false, + }, + getSnapshotBeforeUpdate: true, + setState: { + skipsComponentDidUpdateOnNullish: true, + }, + getChildContext: { + calledByRenderer: false, + }, + getDerivedStateFromError: true, + }, + }; + } + + createMountRenderer(options) { + assertDomAvailable('mount'); + if (has(options, 'suspenseFallback')) { + throw new TypeError('`suspenseFallback` is not supported by the `mount` renderer'); + } + if (FiberTags === null) { + // Requires DOM. + FiberTags = detectFiberTags(); + } + const { attachTo, hydrateIn, wrappingComponentProps } = options; + const domNode = hydrateIn || attachTo || global.document.createElement('div'); + let instance = null; + const adapter = this; + return { + render(el, context, callback) { + return wrapAct(() => { + if (instance === null) { + const { type, props, ref } = el; + const wrapperProps = { + Component: type, + props, + wrappingComponentProps, + context, + ...(ref && { refProp: ref }), + }; + const ReactWrapperComponent = createMountWrapper(el, { ...options, adapter }); + const wrappedEl = React.createElement(ReactWrapperComponent, wrapperProps); + instance = hydrateIn + ? ReactDOM.hydrate(wrappedEl, domNode) + : ReactDOM.render(wrappedEl, domNode); + if (typeof callback === 'function') { + callback(); + } + } else { + instance.setChildProps(el.props, context, callback); + } + }); + }, + unmount() { + ReactDOM.unmountComponentAtNode(domNode); + instance = null; + }, + getNode() { + if (!instance) { + return null; + } + return getNodeFromRootFinder( + adapter.isCustomComponent, + toTree(instance._reactInternals), + options, + ); + }, + simulateError(nodeHierarchy, rootNode, error) { + const isErrorBoundary = ({ instance: elInstance, type }) => { + if (type && type.getDerivedStateFromError) { + return true; + } + return elInstance && elInstance.componentDidCatch; + }; + + const { + instance: catchingInstance, + type: catchingType, + } = nodeHierarchy.find(isErrorBoundary) || {}; + + simulateError( + error, + catchingInstance, + rootNode, + nodeHierarchy, + nodeTypeFromType, + adapter.displayNameOfNode, + catchingType, + ); + }, + simulateEvent(node, event, mock) { + const mappedEvent = mapNativeEventNames(event, eventOptions); + const eventFn = TestUtils.Simulate[mappedEvent]; + if (!eventFn) { + throw new TypeError(`ReactWrapper::simulate() event '${event}' does not exist`); + } + wrapAct(() => { + eventFn(adapter.nodeToHostNode(node), mock); + }); + }, + batchedUpdates(fn) { + return fn(); + // return ReactDOM.unstable_batchedUpdates(fn); + }, + getWrappingComponentRenderer() { + return { + ...this, + ...getWrappingComponentMountRenderer({ + toTree: (inst) => toTree(inst._reactInternals), + getMountWrapperInstance: () => instance, + }), + }; + }, + wrapInvoke: wrapAct, + }; + } + + createShallowRenderer(options = {}) { + const adapter = this; + const renderer = new ShallowRenderer(); + const { suspenseFallback } = options; + if (typeof suspenseFallback !== 'undefined' && typeof suspenseFallback !== 'boolean') { + throw TypeError('`options.suspenseFallback` should be boolean or undefined'); + } + let isDOM = false; + let cachedNode = null; + + let lastComponent = null; + let wrappedComponent = null; + const sentinel = {}; + + // wrap memo components with a PureComponent, or a class component with sCU + const wrapPureComponent = (Component, compare) => { + if (lastComponent !== Component) { + if (isStateful(Component)) { + wrappedComponent = class extends Component {}; // eslint-disable-line react/prefer-stateless-function + if (compare) { + wrappedComponent.prototype.shouldComponentUpdate = (nextProps) => !compare(this.props, nextProps); + } else { + wrappedComponent.prototype.isPureReactComponent = true; + } + } else { + let memoized = sentinel; + let prevProps; + wrappedComponent = function (props, ...args) { + const shouldUpdate = memoized === sentinel || (compare + ? !compare(prevProps, props) + : !shallowEqual(prevProps, props) + ); + if (shouldUpdate) { + memoized = Component({ ...Component.defaultProps, ...props }, ...args); + prevProps = props; + } + return memoized; + }; + } + Object.assign( + wrappedComponent, + Component, + { displayName: adapter.displayNameOfNode({ type: Component }) }, + ); + lastComponent = Component; + } + return wrappedComponent; + }; + + const renderElement = (elConfig, ...rest) => { + const renderedEl = renderer.render(elConfig, ...rest); + + if (renderedEl && renderedEl.type) { + const clonedEl = transformSuspense(renderedEl, elConfig, { suspenseFallback }); + + const elementIsChanged = clonedEl.type !== renderedEl.type; + if (elementIsChanged) { + return renderer.render({ ...elConfig, type: clonedEl.type }, ...rest); + } + } + + return renderedEl; + }; + + return { + render(el, unmaskedContext, { + providerValues = new Map(), + } = {}) { + cachedNode = el; + /* eslint consistent-return: 0 */ + if (typeof el.type === 'string') { + isDOM = true; + } else if (isContextProvider(el)) { + providerValues.set(el.type, el.props.value); + const MockProvider = Object.assign( + (props) => props.children, + el.type, + ); + return withSetStateAllowed(() => renderElement({ ...el, type: MockProvider })); + } else if (isContextConsumer(el)) { + const Provider = adapter.getProviderFromConsumer(el.type); + const value = providerValues.has(Provider) + ? providerValues.get(Provider) + : getProviderDefaultValue(Provider); + const MockConsumer = Object.assign( + (props) => props.children(value), + el.type, + ); + return withSetStateAllowed(() => renderElement({ ...el, type: MockConsumer })); + } else { + isDOM = false; + let renderedEl = el; + if (isLazy(renderedEl)) { + throw TypeError('`React.lazy` is not supported by shallow rendering.'); + } + + renderedEl = transformSuspense(renderedEl, renderedEl, { suspenseFallback }); + const { type: Component } = renderedEl; + + const context = getMaskedContext(Component.contextTypes, unmaskedContext); + + if (isMemo(el.type)) { + const { type: InnerComp, compare } = el.type; + + return withSetStateAllowed(() => renderElement( + { ...el, type: wrapPureComponent(InnerComp, compare) }, + context, + )); + } + + if (!isStateful(Component) && typeof Component === 'function') { + return withSetStateAllowed(() => renderElement( + { ...renderedEl, type: Component }, + context, + )); + } + + return withSetStateAllowed(() => renderElement(renderedEl, context)); + } + }, + unmount() { + renderer.unmount(); + }, + getNode() { + if (isDOM) { + return elementToTree(cachedNode); + } + const output = renderer.getRenderOutput(); + return { + nodeType: nodeTypeFromType(cachedNode.type), + type: cachedNode.type, + props: cachedNode.props, + key: ensureKeyOrUndefined(cachedNode.key), + ref: cachedNode.ref, + instance: renderer._instance, + rendered: Array.isArray(output) + ? flatten(output).map((el) => elementToTree(el)) + : elementToTree(output), + }; + }, + simulateError(nodeHierarchy, rootNode, error) { + simulateError( + error, + renderer._instance, + cachedNode, + nodeHierarchy.concat(cachedNode), + nodeTypeFromType, + adapter.displayNameOfNode, + cachedNode.type, + ); + }, + simulateEvent(node, event, ...args) { + const handler = node.props[propFromEvent(event, eventOptions)]; + if (handler) { + withSetStateAllowed(() => { + // TODO(lmr): create/use synthetic events + // TODO(lmr): emulate React's event propagation + // ReactDOM.unstable_batchedUpdates(() => { + handler(...args); + // }); + }); + } + }, + batchedUpdates(fn) { + return fn(); + // return ReactDOM.unstable_batchedUpdates(fn); + }, + checkPropTypes(typeSpecs, values, location, hierarchy) { + return checkPropTypes( + typeSpecs, + values, + location, + displayNameOfNode(cachedNode), + () => getComponentStack(hierarchy.concat([cachedNode])), + ); + }, + }; + } + + createStringRenderer(options) { + if (has(options, 'suspenseFallback')) { + throw new TypeError('`suspenseFallback` should not be specified in options of string renderer'); + } + return { + render(el, context) { + if (options.context && (el.type.contextTypes || options.childContextTypes)) { + const childContextTypes = { + ...(el.type.contextTypes || {}), + ...options.childContextTypes, + }; + const ContextWrapper = createRenderWrapper(el, context, childContextTypes); + return ReactDOMServer.renderToStaticMarkup(React.createElement(ContextWrapper)); + } + return ReactDOMServer.renderToStaticMarkup(el); + }, + }; + } + + // Provided a bag of options, return an `EnzymeRenderer`. Some options can be implementation + // specific, like `attach` etc. for React, but not part of this interface explicitly. + // eslint-disable-next-line class-methods-use-this + createRenderer(options) { + switch (options.mode) { + case EnzymeAdapter.MODES.MOUNT: return this.createMountRenderer(options); + case EnzymeAdapter.MODES.SHALLOW: return this.createShallowRenderer(options); + case EnzymeAdapter.MODES.STRING: return this.createStringRenderer(options); + default: + throw new Error(`Enzyme Internal Error: Unrecognized mode: ${options.mode}`); + } + } + + wrap(element) { + return wrap(element); + } + + // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed + // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should + // be pretty straightforward for people to implement. + // eslint-disable-next-line class-methods-use-this + nodeToElement(node) { + if (!node || typeof node !== 'object') return null; + const { type } = node; + return React.createElement(unmemoType(type), propsWithKeysAndRef(node)); + } + + // eslint-disable-next-line class-methods-use-this + matchesElementType(node, matchingType) { + if (!node) { + return node; + } + const { type } = node; + return unmemoType(type) === unmemoType(matchingType); + } + + elementToNode(element) { + return elementToTree(element); + } + + nodeToHostNode(node, supportsArray = false) { + const nodes = nodeToHostNode(node); + if (Array.isArray(nodes) && !supportsArray) { + return nodes[0]; + } + return nodes; + } + + displayNameOfNode(node) { + if (!node) return null; + const { type, $$typeof } = node; + + const nodeType = type || $$typeof; + + // newer node types may be undefined, so only test if the nodeType exists + if (nodeType) { + switch (nodeType) { + case ConcurrentMode || NaN: return 'ConcurrentMode'; + case Fragment || NaN: return 'Fragment'; + case StrictMode || NaN: return 'StrictMode'; + case Profiler || NaN: return 'Profiler'; + case Portal || NaN: return 'Portal'; + case Suspense || NaN: return 'Suspense'; + default: + } + } + + const $$typeofType = type && type.$$typeof; + + switch ($$typeofType) { + case ContextConsumer || NaN: return 'ContextConsumer'; + case ContextProvider || NaN: return 'ContextProvider'; + case Memo || NaN: { + const nodeName = displayNameOfNode(node); + return typeof nodeName === 'string' ? nodeName : `Memo(${displayNameOfNode(type)})`; + } + case ForwardRef || NaN: { + if (type.displayName) { + return type.displayName; + } + const name = displayNameOfNode({ type: type.render }); + return name ? `ForwardRef(${name})` : 'ForwardRef'; + } + case Lazy || NaN: { + return 'lazy'; + } + default: return displayNameOfNode(node); + } + } + + isValidElement(element) { + return isElement(element); + } + + isValidElementType(object) { + return !!object && isValidElementType(object); + } + + isFragment(fragment) { + return typeOfNode(fragment) === Fragment; + } + + isCustomComponent(type) { + const fakeElement = makeFakeElement(type); + return !!type && ( + typeof type === 'function' + || isForwardRef(fakeElement) + || isContextProvider(fakeElement) + || isContextConsumer(fakeElement) + || isSuspense(fakeElement) + ); + } + + isContextConsumer(type) { + return !!type && isContextConsumer(makeFakeElement(type)); + } + + isCustomComponentElement(inst) { + if (!inst || !this.isValidElement(inst)) { + return false; + } + return this.isCustomComponent(inst.type); + } + + getProviderFromConsumer(Consumer) { + // React stores references to the Provider on a Consumer differently across versions. + if (Consumer) { + let Provider; + if (Consumer._context) { // check this first, to avoid a deprecation warning + ({ Provider } = Consumer._context); + } else if (Consumer.Provider) { + ({ Provider } = Consumer); + } + if (Provider) { + return Provider; + } + } + throw new Error('Enzyme Internal Error: can’t figure out how to get Provider from Consumer'); + } + + createElement(...args) { + return React.createElement(...args); + } + + wrapWithWrappingComponent(node, options) { + return { + RootFinder, + node: wrapWithWrappingComponent(React.createElement, node, options), + }; + } +} + +module.exports = ReactSeventeenAdapter; diff --git a/packages/enzyme-adapter-react-17/src/detectFiberTags.js b/packages/enzyme-adapter-react-17/src/detectFiberTags.js new file mode 100644 index 000000000..ed909e219 --- /dev/null +++ b/packages/enzyme-adapter-react-17/src/detectFiberTags.js @@ -0,0 +1,112 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { fakeDynamicImport } from 'enzyme-adapter-utils'; + +function getFiber(element) { + const container = global.document.createElement('div'); + let inst = null; + class Tester extends React.Component { + render() { + inst = this; + return element; + } + } + ReactDOM.render(React.createElement(Tester), container); + return inst._reactInternalFiber.child; +} + +function getLazyFiber(LazyComponent) { + const container = global.document.createElement('div'); + let inst = null; + // eslint-disable-next-line react/prefer-stateless-function + class Tester extends React.Component { + render() { + inst = this; + return React.createElement(LazyComponent); + } + } + // eslint-disable-next-line react/prefer-stateless-function + class SuspenseWrapper extends React.Component { + render() { + return React.createElement( + React.Suspense, + { fallback: false }, + React.createElement(Tester), + ); + } + } + ReactDOM.render(React.createElement(SuspenseWrapper), container); + return inst._reactInternalFiber.child; +} + +module.exports = function detectFiberTags() { + const supportsMode = typeof React.StrictMode !== 'undefined'; + const supportsContext = typeof React.createContext !== 'undefined'; + const supportsForwardRef = typeof React.forwardRef !== 'undefined'; + const supportsMemo = typeof React.memo !== 'undefined'; + const supportsProfiler = typeof React.unstable_Profiler !== 'undefined' || typeof React.Profiler !== 'undefined'; + const supportsSuspense = typeof React.Suspense !== 'undefined'; + const supportsLazy = typeof React.lazy !== 'undefined'; + + function Fn() { + return null; + } + // eslint-disable-next-line react/prefer-stateless-function + class Cls extends React.Component { + render() { + return null; + } + } + let Ctx = null; + let FwdRef = null; + let LazyComponent = null; + if (supportsContext) { + Ctx = React.createContext(); + } + if (supportsForwardRef) { + // React will warn if we don't have both arguments. + // eslint-disable-next-line no-unused-vars + FwdRef = React.forwardRef((props, ref) => null); + } + if (supportsLazy) { + LazyComponent = React.lazy(() => fakeDynamicImport(() => null)); + } + + return { + HostRoot: getFiber('test').return.return.tag, // Go two levels above to find the root + ClassComponent: getFiber(React.createElement(Cls)).tag, + Fragment: getFiber([['nested']]).tag, + FunctionalComponent: getFiber(React.createElement(Fn)).tag, + MemoSFC: supportsMemo + ? getFiber(React.createElement(React.memo(Fn))).tag + : -1, + MemoClass: supportsMemo + ? getFiber(React.createElement(React.memo(Cls))).tag + : -1, + HostPortal: getFiber(ReactDOM.createPortal(null, global.document.createElement('div'))).tag, + HostComponent: getFiber(React.createElement('span')).tag, + HostText: getFiber('text').tag, + Mode: supportsMode + ? getFiber(React.createElement(React.StrictMode)).tag + : -1, + ContextConsumer: supportsContext + ? getFiber(React.createElement(Ctx.Consumer, null, () => null)).tag + : -1, + ContextProvider: supportsContext + ? getFiber(React.createElement(Ctx.Provider, { value: null }, null)).tag + : -1, + ForwardRef: supportsForwardRef + ? getFiber(React.createElement(FwdRef)).tag + : -1, + Profiler: supportsProfiler + ? getFiber(React.createElement((React.Profiler || React.unstable_Profiler), { id: 'mock', onRender() {} })).tag + : -1, + Suspense: supportsSuspense + ? getFiber(React.createElement(React.Suspense, { fallback: false })).tag + : -1, + Lazy: supportsLazy + ? getLazyFiber(LazyComponent).tag + : -1, + OffscreenComponent: getLazyFiber('div').return.return.tag, + }; +}; diff --git a/packages/enzyme-adapter-react-17/src/findCurrentFiberUsingSlowPath.js b/packages/enzyme-adapter-react-17/src/findCurrentFiberUsingSlowPath.js new file mode 100644 index 000000000..e8d33f608 --- /dev/null +++ b/packages/enzyme-adapter-react-17/src/findCurrentFiberUsingSlowPath.js @@ -0,0 +1,104 @@ +// Extracted from https://github.com/facebook/react/blob/7bdf93b17a35a5d8fcf0ceae0bf48ed5e6b16688/src/renderers/shared/fiber/ReactFiberTreeReflection.js#L104-L228 +function findCurrentFiberUsingSlowPath(fiber) { + const { alternate } = fiber; + if (!alternate) { + return fiber; + } + // If we have two possible branches, we'll walk backwards up to the root + // to see what path the root points to. On the way we may hit one of the + // special cases and we'll deal with them. + let a = fiber; + let b = alternate; + while (true) { // eslint-disable-line + const parentA = a.return; + const parentB = parentA ? parentA.alternate : null; + if (!parentA || !parentB) { + // We're at the root. + break; + } + + // If both copies of the parent fiber point to the same child, we can + // assume that the child is current. This happens when we bailout on low + // priority: the bailed out fiber's child reuses the current child. + if (parentA.child === parentB.child) { + let { child } = parentA; + while (child) { + if (child === a) { + // We've determined that A is the current branch. + return fiber; + } + if (child === b) { + // We've determined that B is the current branch. + return alternate; + } + child = child.sibling; + } + // We should never have an alternate for any mounting node. So the only + // way this could possibly happen is if this was unmounted, if at all. + throw new Error('Unable to find node on an unmounted component.'); + } + + if (a.return !== b.return) { + // The return pointer of A and the return pointer of B point to different + // fibers. We assume that return pointers never criss-cross, so A must + // belong to the child set of A.return, and B must belong to the child + // set of B.return. + a = parentA; + b = parentB; + } else { + // The return pointers point to the same fiber. We'll have to use the + // default, slow path: scan the child sets of each parent alternate to see + // which child belongs to which set. + // + // Search parent A's child set + let didFindChild = false; + let { child } = parentA; + while (child) { + if (child === a) { + didFindChild = true; + a = parentA; + b = parentB; + break; + } + if (child === b) { + didFindChild = true; + b = parentA; + a = parentB; + break; + } + child = child.sibling; + } + if (!didFindChild) { + // Search parent B's child set + ({ child } = parentB); + while (child) { + if (child === a) { + didFindChild = true; + a = parentB; + b = parentA; + break; + } + if (child === b) { + didFindChild = true; + b = parentB; + a = parentA; + break; + } + child = child.sibling; + } + if (!didFindChild) { + throw new Error('Child was not found in either parent set. This indicates a bug ' + + 'in React related to the return pointer. Please file an issue.'); + } + } + } + } + if (a.stateNode.current === a) { + // We've determined that A is the current branch. + return fiber; + } + // Otherwise B has to be current branch. + return alternate; +} + +module.exports = findCurrentFiberUsingSlowPath; diff --git a/packages/enzyme-adapter-react-17/src/index.js b/packages/enzyme-adapter-react-17/src/index.js new file mode 100644 index 000000000..db08a6156 --- /dev/null +++ b/packages/enzyme-adapter-react-17/src/index.js @@ -0,0 +1,2 @@ +/* eslint global-require: 0 */ +module.exports = require('./ReactSeventeenAdapter'); diff --git a/packages/enzyme-adapter-react-helper/src/getAdapterForReactVersion.js b/packages/enzyme-adapter-react-helper/src/getAdapterForReactVersion.js index 9a52e72f5..b7a14fa4d 100644 --- a/packages/enzyme-adapter-react-helper/src/getAdapterForReactVersion.js +++ b/packages/enzyme-adapter-react-helper/src/getAdapterForReactVersion.js @@ -13,6 +13,9 @@ function getValidRange(version) { export default function getAdapterForReactVersion(reactVersion) { const versionRange = getValidRange(reactVersion); + if (semver.intersects(versionRange, '^17.0.0')) { + return 'enzyme-adapter-react-17'; + } if (semver.intersects(versionRange, '^16.4.0')) { return 'enzyme-adapter-react-16'; } diff --git a/packages/enzyme-adapter-react-helper/src/index.js b/packages/enzyme-adapter-react-helper/src/index.js index e0d46b97c..5f3876769 100644 --- a/packages/enzyme-adapter-react-helper/src/index.js +++ b/packages/enzyme-adapter-react-helper/src/index.js @@ -5,37 +5,42 @@ export default function setupEnzymeAdapter(enzymeOptions = {}, adapterOptions = try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-16'); + Adapter = require('enzyme-adapter-react-17'); } catch (R) { try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-16.3'); + Adapter = require('enzyme-adapter-react-16'); } catch (E) { try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-16.2'); + Adapter = require('enzyme-adapter-react-16.3'); } catch (A) { try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-16.1'); - } catch (r) { + Adapter = require('enzyme-adapter-react-16.2'); + } catch (C) { try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-15'); - } catch (e) { + Adapter = require('enzyme-adapter-react-16.1'); + } catch (r) { try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-15.4'); - } catch (a) { + Adapter = require('enzyme-adapter-react-15'); + } catch (e) { try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-14'); - } catch (c) { + Adapter = require('enzyme-adapter-react-15.4'); + } catch (a) { try { // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved - Adapter = require('enzyme-adapter-react-13'); - } catch (t) { - throw new Error('It seems as though you don’t have any `enzyme-adapter-react-*` installed. Please install the relevant version and try again.'); + Adapter = require('enzyme-adapter-react-14'); + } catch (c) { + try { + // eslint-disable-next-line import/no-extraneous-dependencies, global-require, import/no-unresolved + Adapter = require('enzyme-adapter-react-13'); + } catch (t) { + throw new Error('It seems as though you don’t have any `enzyme-adapter-react-*` installed. Please install the relevant version and try again.'); + } } } } diff --git a/packages/enzyme-adapter-utils/src/Utils.js b/packages/enzyme-adapter-utils/src/Utils.js index ab29e9d5f..2f830cfe2 100644 --- a/packages/enzyme-adapter-utils/src/Utils.js +++ b/packages/enzyme-adapter-utils/src/Utils.js @@ -283,6 +283,7 @@ export function getComponentStack( 'WrapperComponent', ]]); + // TODO: create proper component stack for react 17 return tuples.map(([, name], i, arr) => { const [, closestComponent] = arr.slice(i + 1).find(([nodeType]) => nodeType !== 'host') || []; return `\n in ${name}${closestComponent ? ` (created by ${closestComponent})` : ''}`; diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index e61923683..29e7216a6 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -406,7 +406,7 @@ describeWithDOM('mount', () => { .it('with isValidElementType defined on the Adapter', () => { expect(() => { mount(); - }).to.throw('Warning: Failed prop type: Component must be a valid element type!\n in WrapperComponent'); + }).to.throw(/^Warning: Failed prop type: Component must be a valid element type!\n {4}(?:at|in) WrapperComponent(?: \([^:]+:\d+:\d+\))?$/); }); }); }); diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx index a46c62b56..dda00c57a 100644 --- a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx @@ -1716,7 +1716,7 @@ describe('shallow', () => { it('works without memoizing', () => { const wrapper = shallow(); - expect(wrapper.debug()).to.equal(''); + expect(wrapper.debug()).to.equal(is('>= 17') ? '' : ''); expect(wrapper.dive().debug()).to.equal(`
Guest
`); @@ -2187,7 +2187,7 @@ describe('shallow', () => { wrapper.setContext({ foo: 'bar' }); expect(spy.args).to.deep.equal([ - ['componentWillReceiveProps'], + ...(is('>= 17') ? [] : [['componentWillReceiveProps']]), ['shouldComponentUpdate'], ['componentWillUpdate'], ['render'], diff --git a/packages/enzyme-test-suite/test/enzyme-adapter-react-install-spec.js b/packages/enzyme-test-suite/test/enzyme-adapter-react-install-spec.js index 049b09ce5..3f583b7e0 100644 --- a/packages/enzyme-test-suite/test/enzyme-adapter-react-install-spec.js +++ b/packages/enzyme-test-suite/test/enzyme-adapter-react-install-spec.js @@ -3,6 +3,10 @@ import getAdapterForReactVersion from 'enzyme-adapter-react-helper/build/getAdap describe('enzyme-adapter-react-helper', () => { describe('getAdapterForReactVersion', () => { + it('returns "enzyme-adapter-react-17" when intended', () => { + expect(getAdapterForReactVersion('17.0.0')).to.equal('enzyme-adapter-react-17'); + }); + it('returns "enzyme-adapter-react-16" when intended', () => { expect(getAdapterForReactVersion('16')).to.equal('enzyme-adapter-react-16'); diff --git a/packages/enzyme-test-suite/test/shared/methods/debug.jsx b/packages/enzyme-test-suite/test/shared/methods/debug.jsx index 928f69101..6b89edf6b 100644 --- a/packages/enzyme-test-suite/test/shared/methods/debug.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/debug.jsx @@ -101,9 +101,9 @@ export default function describeDebug({ )); expect(wrapper.debug()).to.equal(`
- + ${is('>= 17') ? '' : ''} - + ${is('>= 17') ? '' : ''} diff --git a/packages/enzyme-test-suite/test/shared/methods/simulate.jsx b/packages/enzyme-test-suite/test/shared/methods/simulate.jsx index a40874e43..273b2cc8a 100644 --- a/packages/enzyme-test-suite/test/shared/methods/simulate.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/simulate.jsx @@ -250,8 +250,12 @@ export default function describeSimulate({ const wrapper = Wrap(); wrapper.simulate('click'); - expect(wrapper.text()).to.equal('1'); - expect(renderCount).to.equal(2); + + // TODO: figure out why this is broken in shallow rendering in react 17 + const todoShallow17 = isShallow && is('>= 17'); + + expect(wrapper.text()).to.equal(todoShallow17 ? '2' : '1'); + expect(renderCount).to.equal(todoShallow17 ? 3 : 2); }); // FIXME: figure out why this fails on 15.0 and 15.1 From 0797375e49b529cb1894e999e0692dc1e9d62cc2 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 12 Aug 2020 10:08:48 +0200 Subject: [PATCH 02/29] feat: add an adapter for React 17 --- packages/enzyme-adapter-react-17/src/detectFiberTags.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/enzyme-adapter-react-17/src/detectFiberTags.js b/packages/enzyme-adapter-react-17/src/detectFiberTags.js index ed909e219..54747b5a5 100644 --- a/packages/enzyme-adapter-react-17/src/detectFiberTags.js +++ b/packages/enzyme-adapter-react-17/src/detectFiberTags.js @@ -12,7 +12,7 @@ function getFiber(element) { } } ReactDOM.render(React.createElement(Tester), container); - return inst._reactInternalFiber.child; + return inst._reactInternals.child; } function getLazyFiber(LazyComponent) { @@ -36,7 +36,7 @@ function getLazyFiber(LazyComponent) { } } ReactDOM.render(React.createElement(SuspenseWrapper), container); - return inst._reactInternalFiber.child; + return inst._reactInternals.child; } module.exports = function detectFiberTags() { From 42fce4a0c3e5bdc57e44774b1ee4fb3328fb09ab Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 12 Aug 2020 10:16:08 +0200 Subject: [PATCH 03/29] add versions to CI --- karma.conf.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/karma.conf.js b/karma.conf.js index 38ddeab18..32d396aaa 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -16,6 +16,7 @@ function getPlugins() { const adapter162 = new IgnorePlugin(/enzyme-adapter-react-16.2$/); const adapter163 = new IgnorePlugin(/enzyme-adapter-react-16.3$/); const adapter16 = new IgnorePlugin(/enzyme-adapter-react-16$/); + const adapter17 = new IgnorePlugin(/enzyme-adapter-react-17$/); var plugins = [ adapter13, @@ -23,6 +24,7 @@ function getPlugins() { adapter154, adapter15, adapter16, + adapter17, ]; function not(x) { @@ -48,6 +50,8 @@ function getPlugins() { plugins = plugins.filter(not(adapter163)); } else if (is('^16.4.0-0')) { plugins = plugins.filter(not(adapter16)); + } else if (is('^17.0.0')) { + plugins = plugins.filter(not(adapter17)); } return plugins; From 46de537fd726334d869f952132409f5a810dbdac Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 12 Aug 2020 11:35:16 +0200 Subject: [PATCH 04/29] version updates --- .../enzyme-test-suite/test/_helpers/adapter.js | 2 ++ .../test/_helpers/react-compat.js | 14 +++++++------- .../enzyme-test-suite/test/_helpers/version.js | 5 +++-- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/enzyme-test-suite/test/_helpers/adapter.js b/packages/enzyme-test-suite/test/_helpers/adapter.js index 3d339c6b4..105dbf061 100644 --- a/packages/enzyme-test-suite/test/_helpers/adapter.js +++ b/packages/enzyme-test-suite/test/_helpers/adapter.js @@ -27,6 +27,8 @@ if (process.env.ADAPTER) { Adapter = require('enzyme-adapter-react-16.3'); } else if (is('^16.4.0-0')) { Adapter = require('enzyme-adapter-react-16'); +} else if (is('^17')) { + Adapter = require('enzyme-adapter-react-17'); } module.exports = Adapter; diff --git a/packages/enzyme-test-suite/test/_helpers/react-compat.js b/packages/enzyme-test-suite/test/_helpers/react-compat.js index 900ad4c0b..08d9fc42c 100644 --- a/packages/enzyme-test-suite/test/_helpers/react-compat.js +++ b/packages/enzyme-test-suite/test/_helpers/react-compat.js @@ -36,7 +36,7 @@ let useRef; let useState; let act; -if (is('>=15.5 || ^16.0.0-alpha || ^16.3.0-alpha')) { +if (is('>=15.5 || ^16.0.0-alpha || ^16.3.0-alpha || ^17.0.0')) { // eslint-disable-next-line import/no-extraneous-dependencies createClass = require('create-react-class'); } else { @@ -50,7 +50,7 @@ if (is('^0.13.0')) { ({ renderToString } = require('react-dom/server')); } -if (is('^16.0.0-0 || ^16.3.0-0')) { +if (is('^16.0.0-0 || ^16.3.0-0 || ^17.0.0')) { ({ createPortal } = require('react-dom')); } else { createPortal = null; @@ -62,13 +62,13 @@ if (is('>=15.3')) { PureComponent = null; } -if (is('^16.2.0-0')) { +if (is('^16.2.0-0 || ^17.0.0')) { ({ Fragment } = require('react')); } else { Fragment = null; } -if (is('^16.3.0-0')) { +if (is('^16.3.0-0 || ^17.0.0')) { ({ createContext, createRef, @@ -84,7 +84,7 @@ if (is('^16.3.0-0')) { AsyncMode = null; } -if (is('^16.9.0-0')) { +if (is('^16.9.0-0 || ^17.0.0')) { ({ Profiler } = require('react')); } else if (is('^16.4.0-0')) { ({ @@ -94,7 +94,7 @@ if (is('^16.9.0-0')) { Profiler = null; } -if (is('^16.6.0-0')) { +if (is('^16.6.0-0 || ^17.0.0')) { ({ Suspense, lazy, @@ -122,7 +122,7 @@ if (is('^16.9.0-0')) { createRoot = null; } -if (is('^16.8.0-0')) { +if (is('^16.8.0-0 || ^17.0.0')) { ({ useCallback, useContext, diff --git a/packages/enzyme-test-suite/test/_helpers/version.js b/packages/enzyme-test-suite/test/_helpers/version.js index fb88717f9..946288a88 100644 --- a/packages/enzyme-test-suite/test/_helpers/version.js +++ b/packages/enzyme-test-suite/test/_helpers/version.js @@ -7,11 +7,12 @@ export function is(range) { if (/&&/.test(range)) { throw new RangeError('&& may not work properly in ranges, apparently'); } - return semver.satisfies(VERSION, range); + return semver.satisfies(VERSION, range, { includePrerelease: true }); } export const REACT16 = is('16'); +export const REACT17 = is('17'); // The shallow renderer in react 16 does not yet support batched updates. When it does, // we should be able to go un-skip all of the tests that are skipped with this flag. -export const BATCHING = !REACT16; +export const BATCHING = !REACT16 && !REACT17; From 13111be16e96b1a4bbc2a5bc6071266a2ae88c6b Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Mon, 26 Oct 2020 11:47:55 -0700 Subject: [PATCH 05/29] offscreencomponent wip --- packages/enzyme-adapter-react-17/package.json | 1 + .../src/ReactSeventeenAdapter.js | 12 ++++++++++++ .../enzyme-test-suite/test/ReactWrapper-spec.jsx | 1 + 3 files changed, 14 insertions(+) diff --git a/packages/enzyme-adapter-react-17/package.json b/packages/enzyme-adapter-react-17/package.json index 0246806af..f816f58a5 100644 --- a/packages/enzyme-adapter-react-17/package.json +++ b/packages/enzyme-adapter-react-17/package.json @@ -45,6 +45,7 @@ "object.values": "^1.1.1", "prop-types": "^15.7.2", "react-is": "^17.0.0", + "react-reconciler": "^0.26.1", "react-test-renderer": "^17.0.0", "semver": "^5.7.0" }, diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index 62ebcc8c3..0e6913181 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -298,6 +298,18 @@ function toTree(vnode) { } case FiberTags.Lazy: return childrenToTree(node.child); + case FiberTags.OffscreenComponent: { + console.log(node.return.memoizedProps.children); + return { + nodeType: 'function', + type: Suspense, + props: { ...node.memoizedProps }, + key: ensureKeyOrUndefined(node.key), + ref: node.ref, + instance: null, + rendered: childrenToTree(nodeToHostNode(node.return.memoizedProps.children)), + }; + } default: throw new Error(`Enzyme Internal Error: unknown node with tag ${node.tag}`); } diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 29e7216a6..361f839a1 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -1167,6 +1167,7 @@ describeWithDOM('mount', () => { const wrapper = mount(); expect(wrapper.is(SuspenseComponent)).to.equal(true); + console.log(wrapper.debug()); expect(wrapper.find(Component)).to.have.lengthOf(1); expect(wrapper.find(Fallback)).to.have.lengthOf(0); }); From 1337f7583db23deb6383c07be9d4cb8e4c0ee366 Mon Sep 17 00:00:00 2001 From: Jordan Harband Date: Tue, 19 Jan 2021 18:25:27 -0800 Subject: [PATCH 06/29] test TODOs --- .../test/ReactWrapper-spec.jsx | 17 +++++++++-------- packages/enzyme-test-suite/test/Utils-spec.jsx | 4 ++-- .../enzyme-test-suite/test/_helpers/version.js | 4 ++++ .../shared/lifecycles/componentDidCatch.jsx | 6 +++--- .../test/shared/lifecycles/misc.jsx | 3 ++- .../test/shared/methods/setContext.jsx | 10 ++++++---- 6 files changed, 26 insertions(+), 18 deletions(-) diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 361f839a1..457ef7879 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -42,6 +42,7 @@ import describeLifecycles from './_helpers/describeLifecycles'; import describeHooks from './_helpers/describeHooks'; import { is, + TODO_17, } from './_helpers/version'; describeWithDOM('mount', () => { @@ -406,7 +407,7 @@ describeWithDOM('mount', () => { .it('with isValidElementType defined on the Adapter', () => { expect(() => { mount(); - }).to.throw(/^Warning: Failed prop type: Component must be a valid element type!\n {4}(?:at|in) WrapperComponent(?: \([^:]+:\d+:\d+\))?$/); + }).to.throw(/^Warning: Failed prop type: Component must be a valid element type!\n {4}(?:at|in) (?:Fake\.)?WrapperComponent(?: \([^:]+:\d+:\d+\))?$/); }); }); }); @@ -1149,7 +1150,7 @@ describeWithDOM('mount', () => { } } - it('finds Suspense and its children when no lazy component', () => { + itIf(!TODO_17(true), 'finds Suspense and its children when no lazy component', () => { class Component extends React.Component { render() { return ( @@ -1167,12 +1168,11 @@ describeWithDOM('mount', () => { const wrapper = mount(); expect(wrapper.is(SuspenseComponent)).to.equal(true); - console.log(wrapper.debug()); expect(wrapper.find(Component)).to.have.lengthOf(1); expect(wrapper.find(Fallback)).to.have.lengthOf(0); }); - it('works with Suspense with multiple children', () => { + itIf(!TODO_17(true), 'works with Suspense with multiple children', () => { const SuspenseComponent = () => ( }>
@@ -1233,7 +1233,8 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - + ${TODO_17(true) ? ` + ` : ''}
Fallback
@@ -1242,7 +1243,7 @@ describeWithDOM('mount', () => { `); }); - it('return wrapped component when given loaded lazy component in initial mount', () => { + itIf(!TODO_17(true), 'return wrapped component when given loaded lazy component in initial mount', () => { const LazyComponent = getLoadedLazyComponent(DynamicComponent); const SuspenseComponent = () => ( }> @@ -1270,11 +1271,11 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - + ${TODO_17(true) ? '' : `
Dynamic Component
- + `} `); }); diff --git a/packages/enzyme-test-suite/test/Utils-spec.jsx b/packages/enzyme-test-suite/test/Utils-spec.jsx index f80991553..6133f36c3 100644 --- a/packages/enzyme-test-suite/test/Utils-spec.jsx +++ b/packages/enzyme-test-suite/test/Utils-spec.jsx @@ -30,7 +30,7 @@ import { get, reset, merge as configure } from 'enzyme/build/configuration'; import './_helpers/setupAdapters'; import { describeIf } from './_helpers'; -import { is } from './_helpers/version'; +import { is, TODO_17 } from './_helpers/version'; describe('Utils', () => { describe('nodeEqual', () => { @@ -593,7 +593,7 @@ describe('Utils', () => { }); }); - describeIf(is('>= 16.6'), 'given an inner displayName wrapped in Memo and forwardRef', () => { + describeIf(is('>= 16.6') && !TODO_17(true), 'given an inner displayName wrapped in Memo and forwardRef', () => { it('returns the displayName', () => { const adapter = getAdapter(); const Foo = () =>
; diff --git a/packages/enzyme-test-suite/test/_helpers/version.js b/packages/enzyme-test-suite/test/_helpers/version.js index 946288a88..97d46813e 100644 --- a/packages/enzyme-test-suite/test/_helpers/version.js +++ b/packages/enzyme-test-suite/test/_helpers/version.js @@ -16,3 +16,7 @@ export const REACT17 = is('17'); // The shallow renderer in react 16 does not yet support batched updates. When it does, // we should be able to go un-skip all of the tests that are skipped with this flag. export const BATCHING = !REACT16 && !REACT17; + +export const TODO_17 = function (condition) { + return REACT17 && condition; +}; diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx b/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx index 5cba72a4b..0c5ea94f2 100644 --- a/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx +++ b/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx @@ -2,7 +2,7 @@ import React from 'react'; import sinon from 'sinon-sandbox'; import { expect } from 'chai'; -import { is } from '../../_helpers/version'; +import { is, TODO_17 } from '../../_helpers/version'; import { describeIf, itIf, @@ -206,7 +206,7 @@ export default function describeCDC({ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(0); }); - it('catches errors during render', () => { + itIf(!TODO_17(!isShallow), 'catches errors during render', () => { const spy = sinon.spy(); const wrapper = Wrap(); @@ -230,7 +230,7 @@ export default function describeCDC({ }); }); - it('works when the root is an SFC', () => { + itIf(!TODO_17(!isShallow), 'works when the root is an SFC', () => { const spy = sinon.spy(); const wrapper = Wrap(); diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx b/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx index 86a35f0ab..5bdeaa3fa 100644 --- a/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx +++ b/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx @@ -15,6 +15,7 @@ import { import { is, BATCHING, + TODO_17, } from '../../_helpers/version'; export default function describeMisc({ @@ -468,7 +469,7 @@ export default function describeMisc({ ]); }); - itIf(!isShallow, 'calls getDerivedStateFromError first and then componentDidCatch', () => { + itIf(!isShallow && !TODO_17(true), 'calls getDerivedStateFromError first and then componentDidCatch', () => { const wrapper = Wrap(); expect(lifecycleSpy.args).to.deep.equal([ diff --git a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx index d37775533..930c024d5 100644 --- a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx @@ -7,7 +7,7 @@ import { describeIf, itIf, } from '../../_helpers'; -import { is } from '../../_helpers/version'; +import { is, TODO_17 } from '../../_helpers/version'; import { createClass, @@ -112,7 +112,7 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ['componentWillReceiveProps'], + ...(TODO_17(isShallow) ? [] : [['componentWillReceiveProps']]), ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); @@ -161,8 +161,10 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ['componentWillReceiveProps'], - ['UNSAFE_componentWillReceiveProps'], + ...(TODO_17(isShallow) ? [] : [ + ['componentWillReceiveProps'], + ['UNSAFE_componentWillReceiveProps'], + ]), ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); From 07504dbd289bf16797a885f913dadda0cbcb13ed Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Tue, 10 Aug 2021 12:47:03 -0400 Subject: [PATCH 07/29] Remove TODO_17 tags --- .../enzyme-test-suite/test/ReactWrapper-spec.jsx | 14 ++++++-------- packages/enzyme-test-suite/test/Utils-spec.jsx | 4 ++-- .../test/shared/lifecycles/componentDidCatch.jsx | 6 +++--- .../test/shared/lifecycles/misc.jsx | 3 +-- .../test/shared/methods/setContext.jsx | 10 ++++------ .../test/shared/methods/simulate.jsx | 7 ++----- 6 files changed, 18 insertions(+), 26 deletions(-) diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 457ef7879..0cc61320d 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -42,7 +42,6 @@ import describeLifecycles from './_helpers/describeLifecycles'; import describeHooks from './_helpers/describeHooks'; import { is, - TODO_17, } from './_helpers/version'; describeWithDOM('mount', () => { @@ -1150,7 +1149,7 @@ describeWithDOM('mount', () => { } } - itIf(!TODO_17(true), 'finds Suspense and its children when no lazy component', () => { + it('finds Suspense and its children when no lazy component', () => { class Component extends React.Component { render() { return ( @@ -1172,7 +1171,7 @@ describeWithDOM('mount', () => { expect(wrapper.find(Fallback)).to.have.lengthOf(0); }); - itIf(!TODO_17(true), 'works with Suspense with multiple children', () => { + it('works with Suspense with multiple children', () => { const SuspenseComponent = () => ( }>
@@ -1233,8 +1232,7 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - ${TODO_17(true) ? ` - ` : ''} +
Fallback
@@ -1243,7 +1241,7 @@ describeWithDOM('mount', () => { `); }); - itIf(!TODO_17(true), 'return wrapped component when given loaded lazy component in initial mount', () => { + it('return wrapped component when given loaded lazy component in initial mount', () => { const LazyComponent = getLoadedLazyComponent(DynamicComponent); const SuspenseComponent = () => ( }> @@ -1271,11 +1269,11 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - ${TODO_17(true) ? '' : ` +
Dynamic Component
- `} + `); }); diff --git a/packages/enzyme-test-suite/test/Utils-spec.jsx b/packages/enzyme-test-suite/test/Utils-spec.jsx index 6133f36c3..f80991553 100644 --- a/packages/enzyme-test-suite/test/Utils-spec.jsx +++ b/packages/enzyme-test-suite/test/Utils-spec.jsx @@ -30,7 +30,7 @@ import { get, reset, merge as configure } from 'enzyme/build/configuration'; import './_helpers/setupAdapters'; import { describeIf } from './_helpers'; -import { is, TODO_17 } from './_helpers/version'; +import { is } from './_helpers/version'; describe('Utils', () => { describe('nodeEqual', () => { @@ -593,7 +593,7 @@ describe('Utils', () => { }); }); - describeIf(is('>= 16.6') && !TODO_17(true), 'given an inner displayName wrapped in Memo and forwardRef', () => { + describeIf(is('>= 16.6'), 'given an inner displayName wrapped in Memo and forwardRef', () => { it('returns the displayName', () => { const adapter = getAdapter(); const Foo = () =>
; diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx b/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx index 0c5ea94f2..5cba72a4b 100644 --- a/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx +++ b/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx @@ -2,7 +2,7 @@ import React from 'react'; import sinon from 'sinon-sandbox'; import { expect } from 'chai'; -import { is, TODO_17 } from '../../_helpers/version'; +import { is } from '../../_helpers/version'; import { describeIf, itIf, @@ -206,7 +206,7 @@ export default function describeCDC({ expect(wrapper.find({ children: 'HasNotThrown' })).to.have.lengthOf(0); }); - itIf(!TODO_17(!isShallow), 'catches errors during render', () => { + it('catches errors during render', () => { const spy = sinon.spy(); const wrapper = Wrap(); @@ -230,7 +230,7 @@ export default function describeCDC({ }); }); - itIf(!TODO_17(!isShallow), 'works when the root is an SFC', () => { + it('works when the root is an SFC', () => { const spy = sinon.spy(); const wrapper = Wrap(); diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx b/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx index 5bdeaa3fa..86a35f0ab 100644 --- a/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx +++ b/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx @@ -15,7 +15,6 @@ import { import { is, BATCHING, - TODO_17, } from '../../_helpers/version'; export default function describeMisc({ @@ -469,7 +468,7 @@ export default function describeMisc({ ]); }); - itIf(!isShallow && !TODO_17(true), 'calls getDerivedStateFromError first and then componentDidCatch', () => { + itIf(!isShallow, 'calls getDerivedStateFromError first and then componentDidCatch', () => { const wrapper = Wrap(); expect(lifecycleSpy.args).to.deep.equal([ diff --git a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx index 930c024d5..d37775533 100644 --- a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx @@ -7,7 +7,7 @@ import { describeIf, itIf, } from '../../_helpers'; -import { is, TODO_17 } from '../../_helpers/version'; +import { is } from '../../_helpers/version'; import { createClass, @@ -112,7 +112,7 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ...(TODO_17(isShallow) ? [] : [['componentWillReceiveProps']]), + ['componentWillReceiveProps'], ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); @@ -161,10 +161,8 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ...(TODO_17(isShallow) ? [] : [ - ['componentWillReceiveProps'], - ['UNSAFE_componentWillReceiveProps'], - ]), + ['componentWillReceiveProps'], + ['UNSAFE_componentWillReceiveProps'], ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); diff --git a/packages/enzyme-test-suite/test/shared/methods/simulate.jsx b/packages/enzyme-test-suite/test/shared/methods/simulate.jsx index 273b2cc8a..626dabc95 100644 --- a/packages/enzyme-test-suite/test/shared/methods/simulate.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/simulate.jsx @@ -251,11 +251,8 @@ export default function describeSimulate({ const wrapper = Wrap(); wrapper.simulate('click'); - // TODO: figure out why this is broken in shallow rendering in react 17 - const todoShallow17 = isShallow && is('>= 17'); - - expect(wrapper.text()).to.equal(todoShallow17 ? '2' : '1'); - expect(renderCount).to.equal(todoShallow17 ? 3 : 2); + expect(wrapper.text()).to.equal('1'); + expect(renderCount).to.equal(2); }); // FIXME: figure out why this fails on 15.0 and 15.1 From 75a15f443253d4bdda1f2bca3d55bd796e92fcc8 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Tue, 10 Aug 2021 13:48:09 -0400 Subject: [PATCH 08/29] Fix two failing tests by using less fragile syntax. --- .../lifecycles/.componentDidCatch.jsx.swp | Bin 0 -> 20480 bytes .../shared/lifecycles/componentDidCatch.jsx | 22 +++++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 packages/enzyme-test-suite/test/shared/lifecycles/.componentDidCatch.jsx.swp diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/.componentDidCatch.jsx.swp b/packages/enzyme-test-suite/test/shared/lifecycles/.componentDidCatch.jsx.swp new file mode 100644 index 0000000000000000000000000000000000000000..306b25f955ee5e617acac96e6f3493e253c61fef GIT binary patch literal 20480 zcmeI3ZH!!18OJZBs30hoKnNOhS{mj~n7va#3bs2%*ivnwNT9UEg6^G}Gds6?_ulC} z_wIHbR*ZZ>jZqYB3?>-;0uqVfE1-!GV}uwqC|?AO#y~JAC<)>RL;XMJ<-W}9ba$bM zkUQbmnZ5U%=RD^*&pGEgFElso-oBGv=$vcebFyXaynl`RQsWz|KlW40+RugH^n8iW zPPcVQ7*3B}8HJ7?wp@Qi`cFxL^{rtmnc+b!>Jt%nW4^2F38xj#)F*sTKEB**@+fx2 zwj^kK!Bm|GpPZlJ^`6_BcBi<|e~-mn#A71yVqT}8bdcCuKqqS@cvl+cSCrkC@oN0ptL|~fzkq{1xgE)7AP%HTA;K*X@SxLZ-52dwkq^VTJYoi->mk z1ilTv1rp$ckAvNy0X_h1unHUlo_LpK{SN#RJP1Aqt^%imyHB#Ld*6vW1zeS0Y2CW&IeDS9c5cmvoihR2Yb8~+jf;Twy?R#?e%!%biAN#@9IY39FMAw@MaPp zmoYAlqA;>K{ktoaZ>v=&2xBJ>otP5a)y+eKMQ^@J3A*kqcY09>@$tM}!A%few)GitjQVf%Ai{9 zN}&*@ZKvCj$tDs-lQ9;ZF7t`+;A>ecAWCX)_2+((qTNH4q64&jc}jM6-d zm`V!D+e+nbbJ2=$8OpBc<{7qT=BE*llPF*V-Kg(4vPTM1(^#vM1g+Q$116pK>TMI! zmj(H$rAl5fNg2~cPnf$@o6M7%PAi3&e(SV($4&egcfooBeKeD(Qy06|fHRNR+urP! zG^NsIyuQ<&Z}M%CJ4M&V246EaUKc$#7=BJ~7Lli<_S;@tR*hZ6Dj#u${2f%-Ci&MD zVXPly23Gm#-|-Pr`{RSg(jBtVk7?|bjW8^5d@=RMk5K8s@^#bOR;JPJBVvr| zS!+@XrHg4kmB&~k|5S~&eM_aFfAtgN0jW=5u+zoSpeVB9A|AAPgi$y3gJSy^2VKUD z8k;a?B|NW;QF{|p17%JtRZkvYO;xq?`qJDW$BP>Cf=*cQHd7axOGc?bbb+uSZDggg z`jgSJIt^*QWTmJ^vKNsc^$`iCR~y~hjiyAdMzTIp(uy&Eo43$VWor4Z5URVIo{C8= zM(YT66(*M0$=Wh)s?1Zhg9VB2XLZY7>uRW3R)-B)IjHO zD&owjS)DZ+4LSS9a-=hlbyfri6fBviGO>K3?OJ|3PTkj3x%~qS+lt? znubA?6}0-O9l|7tn401dt{uzLO+!HQu#LV&lO~l{W6)5{d5AP+(h$)mJ;wx`irX%& z%tRt6`Zii91ESdw^Fd`74I>2X2w7cawi@gC+=a3o56YVaP8Rsp>!iCfF&udV81wsaYO+4FvZ`WRACKme`)>%lW8TGr3NAS+JV#>{6i za?+&OMJdRX2~5^B6|L!xkZe-b2x({+

Ga_X|rw?E27V&!o{?FGP0yzd_l5_+?58jWH%xB1(j;HZl~8;J++XKZMKqaakX&W zw=b7nZO&YOJ(d^PjFI~qW(}V!&%Ba_HM!#kcEyb%cfL}^@3uO8@Ody5cR$*(&&d|| zMHw>tpeb?(6$2UP@~0(52X#cc<%E?Lt%239l^g{uDph^7y`cY6Wfu-f%x;_30LGy% zs*g#iJ3`=MCnP2xUXwwG&q&msG%bPku01WYqY&HESdO3zL3VC^WtnQ2u|oa*YR3`N zy$k(paO_F@emO#vBLr1I(P}|{Kvr;z^B2D;KN`W_#4*v z&w=j)x+f5V23QY{1AoF=|2}XVm;T)rDPRrw3(oF;1Y#h-MsPkjjPv_fz&*eP zd%$jRI(Q6c_qTvAfs4TlIIDji+zP$|wt^SY2G4+}0ky|HVEALkWX=rdni85%xLEEC@24-Ka;nBai zusl_>Q^3*M9>vPPn(1Fn?{U(!s{=PB$Uh>kd_mAI`_O#|wdbs6d>H`bTt-zZ+r2EF z`O|Zp9l1fAJ449j)-I6`8IFdtk#`t-FGt=HU9DhkEp4SSTERbM42X+02wJ$U`igv1 zyiJpyIi)UW^2wu9opB&Ql}Q8)EbojA89_@}qLdV>%e+S5qwy(JZ z6voN#Ab%}tWn!B zsh8(BSO)X_e=ehT@|iHbcUV{k7MIuQNKYevaT}z#*`hrn-RBs!)gp&SIs6Td$YxHV zZ<&DQb|ObV%H4qnOBH#=|} zosBpK*ILU7%G_Hq0|x17e!ry$58cem8#YD{8p|3o3Y|pXPbv%yFnM+@S_TH@%5>%o gD;*egq3}p`zl#c3*=A=ZA&UpqeWSrU*)*;G7nz*{djJ3c literal 0 HcmV?d00001 diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx b/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx index 5cba72a4b..098ec6f78 100644 --- a/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx +++ b/packages/enzyme-test-suite/test/shared/lifecycles/componentDidCatch.jsx @@ -219,15 +219,20 @@ export default function describeCDC({ expect(spy.args).to.be.an('array').and.have.lengthOf(1); const [[actualError, info]] = spy.args; expect(actualError).to.satisfy(properErrorMessage); - expect(info).to.deep.equal({ - componentStack: ` + if (is('>= 17')) { + expect(info).to.have.property('componentStack'); + expect(info.componentStack).to.match(/at Thrower (.+)\n/); + } else { + expect(info).to.deep.equal({ + componentStack: ` in Thrower (created by ErrorBoundary) in span (created by ErrorBoundary)${hasFragments ? '' : ` in main (created by ErrorBoundary)`} in div (created by ErrorBoundary) in ErrorBoundary (created by WrapperComponent) in WrapperComponent`, - }); + }); + } }); it('works when the root is an SFC', () => { @@ -243,8 +248,12 @@ export default function describeCDC({ expect(spy.args).to.be.an('array').and.have.lengthOf(1); const [[actualError, info]] = spy.args; expect(actualError).to.satisfy(properErrorMessage); - expect(info).to.deep.equal({ - componentStack: ` + if (is('>= 17')) { + expect(info).to.have.property('componentStack'); + expect(info.componentStack).to.match(/at Thrower (.+)\n/); + } else { + expect(info).to.deep.equal({ + componentStack: ` in Thrower (created by ErrorBoundary) in span (created by ErrorBoundary)${hasFragments ? '' : ` in main (created by ErrorBoundary)`} @@ -252,7 +261,8 @@ export default function describeCDC({ in ErrorBoundary (created by ErrorSFC) in ErrorSFC (created by WrapperComponent) in WrapperComponent`, - }); + }); + } }); }); }); From 658595a84264f4c1c5c51c088ef6ebb08ca8a0c5 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Tue, 10 Aug 2021 13:58:48 -0400 Subject: [PATCH 09/29] Fix another test with fragile matching. --- .gitignore | 5 +++++ packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx | 7 ++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 50838623a..9bf861cc5 100644 --- a/.gitignore +++ b/.gitignore @@ -48,3 +48,8 @@ packages/*/LICENSE.md packages/enzyme/README.md packages/enzyme-adapter-react-*/README.md packages/enzyme-adapter-utils*/README.md + +# vim +**/*.swp +*.swp + diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx b/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx index 86a35f0ab..d25598782 100644 --- a/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx +++ b/packages/enzyme-test-suite/test/shared/lifecycles/misc.jsx @@ -491,7 +491,12 @@ export default function describeMisc({ const [name, error, info] = fourth; expect(name).to.equal('componentDidCatch'); expect(error).to.satisfy(properErrorMessage); - expect(info).to.deep.equal(expectedInfo); + if (is('>= 17')) { + expect(info).to.have.property('componentStack'); + expect(info.componentStack).to.match(/at Thrower (.+)\n/); + } else { + expect(info).to.deep.equal(expectedInfo); + } expect(stateSpy.args).to.deep.equal([ [{ From 9625c9fb80ecfff64bb9c8f0254e037b0ffdd6b1 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Tue, 10 Aug 2021 15:09:46 -0400 Subject: [PATCH 10/29] componentWillReceiveProps and UNSAFE_componentWillReceiveProps removed in 17.x --- .../test/shared/methods/setContext.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx index d37775533..5f1c76168 100644 --- a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx @@ -83,7 +83,7 @@ export default function describeSetContext({ }); }); - it('calls componentWillReceiveProps when context is updated', () => { + it('calls componentWillReceiveProps when context is updated up to 17.x', () => { const spy = sinon.spy(); const updatedProps = { foo: 'baz' }; class Foo extends React.Component { @@ -112,7 +112,7 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ['componentWillReceiveProps'], + ...(is('>= 17') && isShallow ? [] : [['componentWillReceiveProps']]), ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); @@ -128,7 +128,7 @@ export default function describeSetContext({ `); }); - itIf(is('>= 16.3'), 'calls componentWillReceiveProps and UNSAFE_componentWillReceiveProps when context is updated', () => { + itIf(is('>= 16.3'), 'calls componentWillReceiveProps and UNSAFE_componentWillReceiveProps when context is updated up to 17.x', () => { const spy = sinon.spy(); const updatedProps = { foo: 'baz' }; class Foo extends React.Component { @@ -161,8 +161,10 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ['componentWillReceiveProps'], - ['UNSAFE_componentWillReceiveProps'], + ...(is('>= 17') && isShallow ? [] : [ + ['componentWillReceiveProps'], + ['UNSAFE_componentWillReceiveProps'], + ]), ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); From 7a54423553136f39301bdb2da88798070fe8a3fc Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Wed, 11 Aug 2021 13:57:08 -0400 Subject: [PATCH 11/29] Fix shallow() so that it calls componentWillReceiveProps() and UNSAFE_componentWillReceiveProps() on setContext() --- .../src/ReactSeventeenAdapter.js | 1 + .../lifecycles/.componentDidCatch.jsx.swp | Bin 20480 -> 0 bytes .../test/shared/methods/setContext.jsx | 12 +++++------- packages/enzyme/src/ShallowWrapper.js | 15 +++++++++++++++ 4 files changed, 21 insertions(+), 7 deletions(-) delete mode 100644 packages/enzyme-test-suite/test/shared/lifecycles/.componentDidCatch.jsx.swp diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index 0e6913181..65fa60e92 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -434,6 +434,7 @@ class ReactSeventeenAdapter extends EnzymeAdapter { calledByRenderer: false, }, getDerivedStateFromError: true, + componentWillReceivePropsOnShallowRerender: true, }, }; } diff --git a/packages/enzyme-test-suite/test/shared/lifecycles/.componentDidCatch.jsx.swp b/packages/enzyme-test-suite/test/shared/lifecycles/.componentDidCatch.jsx.swp deleted file mode 100644 index 306b25f955ee5e617acac96e6f3493e253c61fef..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 20480 zcmeI3ZH!!18OJZBs30hoKnNOhS{mj~n7va#3bs2%*ivnwNT9UEg6^G}Gds6?_ulC} z_wIHbR*ZZ>jZqYB3?>-;0uqVfE1-!GV}uwqC|?AO#y~JAC<)>RL;XMJ<-W}9ba$bM zkUQbmnZ5U%=RD^*&pGEgFElso-oBGv=$vcebFyXaynl`RQsWz|KlW40+RugH^n8iW zPPcVQ7*3B}8HJ7?wp@Qi`cFxL^{rtmnc+b!>Jt%nW4^2F38xj#)F*sTKEB**@+fx2 zwj^kK!Bm|GpPZlJ^`6_BcBi<|e~-mn#A71yVqT}8bdcCuKqqS@cvl+cSCrkC@oN0ptL|~fzkq{1xgE)7AP%HTA;K*X@SxLZ-52dwkq^VTJYoi->mk z1ilTv1rp$ckAvNy0X_h1unHUlo_LpK{SN#RJP1Aqt^%imyHB#Ld*6vW1zeS0Y2CW&IeDS9c5cmvoihR2Yb8~+jf;Twy?R#?e%!%biAN#@9IY39FMAw@MaPp zmoYAlqA;>K{ktoaZ>v=&2xBJ>otP5a)y+eKMQ^@J3A*kqcY09>@$tM}!A%few)GitjQVf%Ai{9 zN}&*@ZKvCj$tDs-lQ9;ZF7t`+;A>ecAWCX)_2+((qTNH4q64&jc}jM6-d zm`V!D+e+nbbJ2=$8OpBc<{7qT=BE*llPF*V-Kg(4vPTM1(^#vM1g+Q$116pK>TMI! zmj(H$rAl5fNg2~cPnf$@o6M7%PAi3&e(SV($4&egcfooBeKeD(Qy06|fHRNR+urP! zG^NsIyuQ<&Z}M%CJ4M&V246EaUKc$#7=BJ~7Lli<_S;@tR*hZ6Dj#u${2f%-Ci&MD zVXPly23Gm#-|-Pr`{RSg(jBtVk7?|bjW8^5d@=RMk5K8s@^#bOR;JPJBVvr| zS!+@XrHg4kmB&~k|5S~&eM_aFfAtgN0jW=5u+zoSpeVB9A|AAPgi$y3gJSy^2VKUD z8k;a?B|NW;QF{|p17%JtRZkvYO;xq?`qJDW$BP>Cf=*cQHd7axOGc?bbb+uSZDggg z`jgSJIt^*QWTmJ^vKNsc^$`iCR~y~hjiyAdMzTIp(uy&Eo43$VWor4Z5URVIo{C8= zM(YT66(*M0$=Wh)s?1Zhg9VB2XLZY7>uRW3R)-B)IjHO zD&owjS)DZ+4LSS9a-=hlbyfri6fBviGO>K3?OJ|3PTkj3x%~qS+lt? znubA?6}0-O9l|7tn401dt{uzLO+!HQu#LV&lO~l{W6)5{d5AP+(h$)mJ;wx`irX%& z%tRt6`Zii91ESdw^Fd`74I>2X2w7cawi@gC+=a3o56YVaP8Rsp>!iCfF&udV81wsaYO+4FvZ`WRACKme`)>%lW8TGr3NAS+JV#>{6i za?+&OMJdRX2~5^B6|L!xkZe-b2x({+

Ga_X|rw?E27V&!o{?FGP0yzd_l5_+?58jWH%xB1(j;HZl~8;J++XKZMKqaakX&W zw=b7nZO&YOJ(d^PjFI~qW(}V!&%Ba_HM!#kcEyb%cfL}^@3uO8@Ody5cR$*(&&d|| zMHw>tpeb?(6$2UP@~0(52X#cc<%E?Lt%239l^g{uDph^7y`cY6Wfu-f%x;_30LGy% zs*g#iJ3`=MCnP2xUXwwG&q&msG%bPku01WYqY&HESdO3zL3VC^WtnQ2u|oa*YR3`N zy$k(paO_F@emO#vBLr1I(P}|{Kvr;z^B2D;KN`W_#4*v z&w=j)x+f5V23QY{1AoF=|2}XVm;T)rDPRrw3(oF;1Y#h-MsPkjjPv_fz&*eP zd%$jRI(Q6c_qTvAfs4TlIIDji+zP$|wt^SY2G4+}0ky|HVEALkWX=rdni85%xLEEC@24-Ka;nBai zusl_>Q^3*M9>vPPn(1Fn?{U(!s{=PB$Uh>kd_mAI`_O#|wdbs6d>H`bTt-zZ+r2EF z`O|Zp9l1fAJ449j)-I6`8IFdtk#`t-FGt=HU9DhkEp4SSTERbM42X+02wJ$U`igv1 zyiJpyIi)UW^2wu9opB&Ql}Q8)EbojA89_@}qLdV>%e+S5qwy(JZ z6voN#Ab%}tWn!B zsh8(BSO)X_e=ehT@|iHbcUV{k7MIuQNKYevaT}z#*`hrn-RBs!)gp&SIs6Td$YxHV zZ<&DQb|ObV%H4qnOBH#=|} zosBpK*ILU7%G_Hq0|x17e!ry$58cem8#YD{8p|3o3Y|pXPbv%yFnM+@S_TH@%5>%o gD;*egq3}p`zl#c3*=A=ZA&UpqeWSrU*)*;G7nz*{djJ3c diff --git a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx index 5f1c76168..d37775533 100644 --- a/packages/enzyme-test-suite/test/shared/methods/setContext.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/setContext.jsx @@ -83,7 +83,7 @@ export default function describeSetContext({ }); }); - it('calls componentWillReceiveProps when context is updated up to 17.x', () => { + it('calls componentWillReceiveProps when context is updated', () => { const spy = sinon.spy(); const updatedProps = { foo: 'baz' }; class Foo extends React.Component { @@ -112,7 +112,7 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ...(is('>= 17') && isShallow ? [] : [['componentWillReceiveProps']]), + ['componentWillReceiveProps'], ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); @@ -128,7 +128,7 @@ export default function describeSetContext({ `); }); - itIf(is('>= 16.3'), 'calls componentWillReceiveProps and UNSAFE_componentWillReceiveProps when context is updated up to 17.x', () => { + itIf(is('>= 16.3'), 'calls componentWillReceiveProps and UNSAFE_componentWillReceiveProps when context is updated', () => { const spy = sinon.spy(); const updatedProps = { foo: 'baz' }; class Foo extends React.Component { @@ -161,10 +161,8 @@ export default function describeSetContext({ expect(spy.args).to.deep.equal([ ['render'], - ...(is('>= 17') && isShallow ? [] : [ - ['componentWillReceiveProps'], - ['UNSAFE_componentWillReceiveProps'], - ]), + ['componentWillReceiveProps'], + ['UNSAFE_componentWillReceiveProps'], ['render'], ]); expect(wrapper.context('foo')).to.equal(updatedProps.foo); diff --git a/packages/enzyme/src/ShallowWrapper.js b/packages/enzyme/src/ShallowWrapper.js index 28f34fbe0..8a3b40ad7 100644 --- a/packages/enzyme/src/ShallowWrapper.js +++ b/packages/enzyme/src/ShallowWrapper.js @@ -635,6 +635,21 @@ class ShallowWrapper { instance.state, ); } + if ( + shouldRender + && !this[OPTIONS].disableLifecycleMethods + && instance + && context + ) { + if (lifecycles.componentWillReceivePropsOnShallowRerender) { + if (typeof instance.componentWillReceiveProps === 'function') { + instance.componentWillReceiveProps(props); + } + if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') { // eslint-disable-line new-cap + instance.UNSAFE_componentWillReceiveProps(props); // eslint-disable-line new-cap + } + } + } if (props) this[UNRENDERED] = cloneElement(adapter, this[UNRENDERED], props); this[RENDERER].render(this[UNRENDERED], nextContext, { providerValues: this[PROVIDER_VALUES], From 938d10a9ddd269c905d000edbc4dad9b7209ed40 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Wed, 11 Aug 2021 14:13:08 -0400 Subject: [PATCH 12/29] Forgot a test case. Call componentWillReceiveProps() even when shallow lifecycle methods disabled according to test. --- packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx | 2 +- packages/enzyme/src/ShallowWrapper.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx index dda00c57a..1c7a08c55 100644 --- a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx @@ -2187,7 +2187,7 @@ describe('shallow', () => { wrapper.setContext({ foo: 'bar' }); expect(spy.args).to.deep.equal([ - ...(is('>= 17') ? [] : [['componentWillReceiveProps']]), + ['componentWillReceiveProps'], ['shouldComponentUpdate'], ['componentWillUpdate'], ['render'], diff --git a/packages/enzyme/src/ShallowWrapper.js b/packages/enzyme/src/ShallowWrapper.js index 8a3b40ad7..6009543d7 100644 --- a/packages/enzyme/src/ShallowWrapper.js +++ b/packages/enzyme/src/ShallowWrapper.js @@ -637,7 +637,6 @@ class ShallowWrapper { } if ( shouldRender - && !this[OPTIONS].disableLifecycleMethods && instance && context ) { From bbab94b5db828b16a278cdac326f33bf749e5614 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Wed, 11 Aug 2021 16:14:26 -0400 Subject: [PATCH 13/29] displayNameOfNode gets a little wonky when used with React.memo and React.forwardRef under 17. --- packages/enzyme-test-suite/test/Utils-spec.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/enzyme-test-suite/test/Utils-spec.jsx b/packages/enzyme-test-suite/test/Utils-spec.jsx index f80991553..569a299ac 100644 --- a/packages/enzyme-test-suite/test/Utils-spec.jsx +++ b/packages/enzyme-test-suite/test/Utils-spec.jsx @@ -600,7 +600,11 @@ describe('Utils', () => { Foo.displayName = 'CustomWrapper'; const MemoForwardFoo = React.memo(React.forwardRef(Foo)); - expect(adapter.displayNameOfNode()).to.equal('Memo(ForwardRef(CustomWrapper))'); + if (is('>= 17')) { + expect(adapter.displayNameOfNode()).to.equal('Memo([object Object])'); + } else { + expect(adapter.displayNameOfNode()).to.equal('Memo(ForwardRef(CustomWrapper))'); + } }); }); }); From 9a432a6bdfabd7ff781e681ebfb0f0f0c4f73000 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Fri, 13 Aug 2021 09:35:20 -0400 Subject: [PATCH 14/29] punt on the simulate failure. I worked on this all day yesterday and didn't come up with a workaround. --- .../test/shared/methods/simulate.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/enzyme-test-suite/test/shared/methods/simulate.jsx b/packages/enzyme-test-suite/test/shared/methods/simulate.jsx index 626dabc95..b3a62e9a8 100644 --- a/packages/enzyme-test-suite/test/shared/methods/simulate.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/simulate.jsx @@ -251,8 +251,19 @@ export default function describeSimulate({ const wrapper = Wrap(); wrapper.simulate('click'); - expect(wrapper.text()).to.equal('1'); - expect(renderCount).to.equal(2); + if (is('>= 17') && isShallow) { + // Something changed in 17 so that calling an event handler (like onClick, above) directly, + // as enzyme's simulate() does under shallow(), does not batch setState calls. Using enzyme's + // simulate() under mount() still batches setState as expected, probably + // because enzyme uses ReactTestUtils.Simulate() to trigger event handlers under mount(). + // See the two simulateEvent() methods in packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js + // for more info + expect(wrapper.text()).to.equal('2'); + expect(renderCount).to.equal(3); + } else { + expect(wrapper.text()).to.equal('1'); + expect(renderCount).to.equal(2); + } }); // FIXME: figure out why this fails on 15.0 and 15.1 From 1f48ca9922f8882ed3f93e9a9592b85bba270914 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Fri, 13 Aug 2021 09:37:57 -0400 Subject: [PATCH 15/29] Make a few changes I saw https://github.com/wojtekmaj requested in the original PR, plus add an act() wrapper on shallow's simulate(), just to show it doesn't help. --- .../enzyme-adapter-react-17/src/ReactSeventeenAdapter.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index 65fa60e92..a99394228 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -299,7 +299,6 @@ function toTree(vnode) { case FiberTags.Lazy: return childrenToTree(node.child); case FiberTags.OffscreenComponent: { - console.log(node.return.memoizedProps.children); return { nodeType: 'function', type: Suspense, @@ -478,7 +477,9 @@ class ReactSeventeenAdapter extends EnzymeAdapter { }); }, unmount() { - ReactDOM.unmountComponentAtNode(domNode); + wrapAct(() => { + ReactDOM.unmountComponentAtNode(domNode); + }); instance = null; }, getNode() { @@ -699,7 +700,9 @@ class ReactSeventeenAdapter extends EnzymeAdapter { // TODO(lmr): create/use synthetic events // TODO(lmr): emulate React's event propagation // ReactDOM.unstable_batchedUpdates(() => { - handler(...args); + wrapAct(() => { + handler(...args); + }); // }); }); } From ae9b14aa4ca611ba5e2dff92ad0d42d757cbdbaf Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Fri, 13 Aug 2021 09:53:39 -0400 Subject: [PATCH 16/29] Add tip from https://github.com/ljharb to CONTRIBUTING --- CONTRIBUTING.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 58a13461f..ec40134b0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -85,6 +85,17 @@ npm run build:watch npm run test:watch ``` +Alternatively, run this in one terminal tab: +```bash +# build Enzyme locally upon save +npm run build:watch +``` + +In another terminal tab execute a specific test file for faster TDD test execution: +```bash +node_modules/.bin/mocha packages/enzyme-test-suite/build/ReactWrapper-spec.js +``` + ### Tests for functionality shared between `shallow` and `mount` Tests for a method "foo" are stored in `packages/enzyme-test-suite/test/shared/methods/foo`. The file default exports a function that receives an injected object argument, containing the following properties: From 935c84a95a480575ebffbe8df55b62c94b8ab4f9 Mon Sep 17 00:00:00 2001 From: Jesse CreateThis Date: Fri, 13 Aug 2021 14:44:00 -0400 Subject: [PATCH 17/29] Restore suspense tests to the best of my ability. --- CONTRIBUTING.md | 2 ++ .../src/ReactSeventeenAdapter.js | 8 +++++- .../test/ReactWrapper-spec.jsx | 27 ++++++++++++------- 3 files changed, 27 insertions(+), 10 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ec40134b0..5b0f41b1e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -96,6 +96,8 @@ In another terminal tab execute a specific test file for faster TDD test executi node_modules/.bin/mocha packages/enzyme-test-suite/build/ReactWrapper-spec.js ``` +NOTE that this alternate strategy may fail to rebuild some code and will bypass lint, so `npm test` will still be necessary periodically. + ### Tests for functionality shared between `shallow` and `mount` Tests for a method "foo" are stored in `packages/enzyme-test-suite/test/shared/methods/foo`. The file default exports a function that receives an injected object argument, containing the following properties: diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index a99394228..ac38578eb 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -299,6 +299,12 @@ function toTree(vnode) { case FiberTags.Lazy: return childrenToTree(node.child); case FiberTags.OffscreenComponent: { + const hostNodes = nodeToHostNode(node.return.memoizedProps.children); + let rendered = null; + if (hostNodes) { + const hostNodesFiltered = hostNodes.filter((item) => item !== null); + rendered = hostNodesFiltered.length > 0 ? childrenToTree(hostNodesFiltered) : null; + } return { nodeType: 'function', type: Suspense, @@ -306,7 +312,7 @@ function toTree(vnode) { key: ensureKeyOrUndefined(node.key), ref: node.ref, instance: null, - rendered: childrenToTree(nodeToHostNode(node.return.memoizedProps.children)), + rendered, }; } default: diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 0cc61320d..3976a8680 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -1167,8 +1167,12 @@ describeWithDOM('mount', () => { const wrapper = mount(); expect(wrapper.is(SuspenseComponent)).to.equal(true); - expect(wrapper.find(Component)).to.have.lengthOf(1); - expect(wrapper.find(Fallback)).to.have.lengthOf(0); + if (is('>= 17')) { + expect(wrapper.find('[mode="visible"]').exists()).to.equal(true); + } else { + expect(wrapper.find(Component)).to.have.lengthOf(1); + expect(wrapper.find(Fallback)).to.have.lengthOf(0); + } }); it('works with Suspense with multiple children', () => { @@ -1183,9 +1187,9 @@ describeWithDOM('mount', () => { const wrapper = mount(); expect(wrapper.debug()).to.equal(` -

+ ${is('>= 17') ? '' : `
-
+
`} `); }); @@ -1232,7 +1236,8 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - + ${is('>= 17') ? ` + ` : ''}
Fallback
@@ -1253,8 +1258,12 @@ describeWithDOM('mount', () => { expect(wrapper.is(SuspenseComponent)).to.equal(true); expect(wrapper.find(LazyComponent)).to.have.lengthOf(0); - expect(wrapper.find(DynamicComponent)).to.have.lengthOf(1); - expect(wrapper.find(Fallback)).to.have.lengthOf(0); + if (is('>= 17')) { + expect(wrapper.find('[mode="visible"]').exists()).to.equal(true); + } else { + expect(wrapper.find(DynamicComponent)).to.have.lengthOf(1); + expect(wrapper.find(Fallback)).to.have.lengthOf(0); + } }); it('return wrapped component string when given loaded lazy component in initial mount and call .debug()', () => { @@ -1269,11 +1278,11 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - + ${is('>= 17') ? '' : `
Dynamic Component
- + `} `); }); From 18d536f44ae6d4bb999b50e418e9fa1c0802d2cc Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 2 Aug 2022 21:27:15 +0200 Subject: [PATCH 18/29] createReactClass and React.Component pass the same check --- .../enzyme-adapter-react-17/src/ReactSeventeenAdapter.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index ac38578eb..e3cd669be 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -409,10 +409,7 @@ function makeFakeElement(type) { } function isStateful(Component) { - return Component.prototype && ( - Component.prototype.isReactComponent - || Array.isArray(Component.__reactAutoBindPairs) // fallback for createClass components - ); + return Component.prototype && Component.prototype.isReactComponent; } class ReactSeventeenAdapter extends EnzymeAdapter { From 69f2846c70014eb2e8e79749efb552ced79a5a34 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 2 Aug 2022 21:29:40 +0200 Subject: [PATCH 19/29] Remove unused TODO_17 --- packages/enzyme-test-suite/test/_helpers/version.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/enzyme-test-suite/test/_helpers/version.js b/packages/enzyme-test-suite/test/_helpers/version.js index 97d46813e..946288a88 100644 --- a/packages/enzyme-test-suite/test/_helpers/version.js +++ b/packages/enzyme-test-suite/test/_helpers/version.js @@ -16,7 +16,3 @@ export const REACT17 = is('17'); // The shallow renderer in react 16 does not yet support batched updates. When it does, // we should be able to go un-skip all of the tests that are skipped with this flag. export const BATCHING = !REACT16 && !REACT17; - -export const TODO_17 = function (condition) { - return REACT17 && condition; -}; From 5f2f0b17c045c498e9d902dfd06d909adb00a5c2 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 2 Aug 2022 22:12:01 +0200 Subject: [PATCH 20/29] Adjust displayname test to be invariant across React versions --- .../test/ShallowWrapper-spec.jsx | 14 +++++++-- .../test/shared/methods/debug.jsx | 30 +++++++++++++++---- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx index 1c7a08c55..74b6bc8fb 100644 --- a/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ShallowWrapper-spec.jsx @@ -1709,14 +1709,24 @@ describe('shallow', () => { describeIf(is('>= 16.6'), 'memo', () => { const App = () =>
Guest
; - const AppMemoized = memo && Object.assign(memo(App), { displayName: 'AppMemoized' }); + const AppMemoized = memo + && Object.assign( + // `React.memo` in 17 and onwards copies `memo(Component).displayName` to `Component` + // i.e. `React.memo(Component)` has a side-effect on `Component` + // So we create a new function to not pollute `SFC` since we don't want to test React behavior but Enzyme behavior + // eslint-disable-next-line prefer-arrow-callback, no-shadow + memo(function App() { + return
Guest
; + }), + { displayName: 'AppMemoized' }, + ); const RendersApp = () => ; const RendersAppMemoized = () => ; it('works without memoizing', () => { const wrapper = shallow(); - expect(wrapper.debug()).to.equal(is('>= 17') ? '' : ''); + expect(wrapper.debug()).to.equal(''); expect(wrapper.dive().debug()).to.equal(`
Guest
`); diff --git a/packages/enzyme-test-suite/test/shared/methods/debug.jsx b/packages/enzyme-test-suite/test/shared/methods/debug.jsx index 6b89edf6b..7d3594c9e 100644 --- a/packages/enzyme-test-suite/test/shared/methods/debug.jsx +++ b/packages/enzyme-test-suite/test/shared/methods/debug.jsx @@ -81,12 +81,29 @@ export default function describeDebug({ const SFCMemo = memo && memo(SFC); const SFCwithDisplayNameMemo = memo && memo(SFCwithDisplayName); - const SFCMemoWithDisplayName = memo && Object.assign(memo(SFC), { + // `React.memo` in 17 and onwards copies `memo(Component).displayName` to `Component` + // i.e. `React.memo(Component)` has a side-effect on `Component` + // So we create a new function to not pollute `SFC` since we don't want to test React behavior but Enzyme behavior + // eslint-disable-next-line prefer-arrow-callback, no-shadow + const SFCMemoWithDisplayName = memo && Object.assign(memo(function SFC() { return null; }), { displayName: 'SFCMemoWithDisplayName!', }); - const SFCMemoWitDoubleDisplayName = memo && Object.assign(memo(SFCwithDisplayName), { - displayName: 'SFCMemoWitDoubleDisplayName!', - }); + const SFCMemoWitDoubleDisplayName = memo + && Object.assign( + memo( + Object.assign( + // `React.memo` in 17 and onwards copies `memo(Component).displayName` to `Component` + // i.e. `React.memo(Component)` has a side-effect on `Component` + // So we create a new function to not pollute `SFC` since we don't want to test React behavior but Enzyme behavior + // eslint-disable-next-line prefer-arrow-callback, no-shadow + function SFCwithDisplayName() { return null; }, + { displayName: 'SFC!' }, + ), + ), + { + displayName: 'SFCMemoWitDoubleDisplayName!', + }, + ); it('displays the expected display names', () => { expect(SFCMemoWithDisplayName).to.have.property('displayName'); @@ -100,10 +117,11 @@ export default function describeDebug({
)); + expect(wrapper.debug()).to.equal(`
- ${is('>= 17') ? '' : ''} + - ${is('>= 17') ? '' : ''} + From 9dfd35fbd2efc5512d0a28260ecad22b6734c23a Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 2 Aug 2022 22:36:31 +0200 Subject: [PATCH 21/29] Fix displayNameOfNode for Memo components --- .../src/ReactSeventeenAdapter.js | 12 ++++++++---- packages/enzyme-test-suite/test/Utils-spec.jsx | 6 +----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index e3cd669be..705707864 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -514,7 +514,7 @@ class ReactSeventeenAdapter extends EnzymeAdapter { rootNode, nodeHierarchy, nodeTypeFromType, - adapter.displayNameOfNode, + adapter.displayNameOfNode.bind(adapter), catchingType, ); }, @@ -692,7 +692,7 @@ class ReactSeventeenAdapter extends EnzymeAdapter { cachedNode, nodeHierarchy.concat(cachedNode), nodeTypeFromType, - adapter.displayNameOfNode, + adapter.displayNameOfNode.bind(adapter), cachedNode.type, ); }, @@ -818,8 +818,12 @@ class ReactSeventeenAdapter extends EnzymeAdapter { case ContextConsumer || NaN: return 'ContextConsumer'; case ContextProvider || NaN: return 'ContextProvider'; case Memo || NaN: { - const nodeName = displayNameOfNode(node); - return typeof nodeName === 'string' ? nodeName : `Memo(${displayNameOfNode(type)})`; + if (type.displayName) { + return type.displayName; + } + const name = this.displayNameOfNode({ type: type.type }); + // "works on a memoized functional component" test desires `Memo()` instead of `Memo` + return `Memo(${name})`; } case ForwardRef || NaN: { if (type.displayName) { diff --git a/packages/enzyme-test-suite/test/Utils-spec.jsx b/packages/enzyme-test-suite/test/Utils-spec.jsx index 569a299ac..f80991553 100644 --- a/packages/enzyme-test-suite/test/Utils-spec.jsx +++ b/packages/enzyme-test-suite/test/Utils-spec.jsx @@ -600,11 +600,7 @@ describe('Utils', () => { Foo.displayName = 'CustomWrapper'; const MemoForwardFoo = React.memo(React.forwardRef(Foo)); - if (is('>= 17')) { - expect(adapter.displayNameOfNode()).to.equal('Memo([object Object])'); - } else { - expect(adapter.displayNameOfNode()).to.equal('Memo(ForwardRef(CustomWrapper))'); - } + expect(adapter.displayNameOfNode()).to.equal('Memo(ForwardRef(CustomWrapper))'); }); }); }); From cc64090a16a8739c3b17ff88856a85508684013c Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 3 Aug 2022 18:17:01 +0200 Subject: [PATCH 22/29] Fix isEmptyRender for SimpleMemoComponent --- packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index 705707864..f7bb347d9 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -238,7 +238,9 @@ function toTree(vnode) { }; case FiberTags.MemoSFC: { let renderedNodes = flatten(nodeAndSiblingsArray(node.child).map(toTree)); - if (renderedNodes.length === 0) { + if (node.child === null) { + renderedNodes = [null]; + } else if (renderedNodes.length === 0) { renderedNodes = [node.memoizedProps.children]; } return { From 762ac8ca28a189df61140273cc280d5cb11e788b Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 3 Aug 2022 20:34:10 +0200 Subject: [PATCH 23/29] Ensure Suspense tests are the same in 16 and 17 --- .../src/ReactSeventeenAdapter.js | 28 ++++++++----------- .../test/ReactWrapper-spec.jsx | 27 ++++++------------ 2 files changed, 21 insertions(+), 34 deletions(-) diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index f7bb347d9..e298b492b 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -288,6 +288,16 @@ function toTree(vnode) { }; } case FiberTags.Suspense: { + // }> creates the following Fiber tree: + // suspended: + // + // unsuspended: + // + const rendered = node.stateNode === null + ? childrenToTree(node.child.child) + // Tests explicitly want both the Suspense children and fallback if a component suspended. + // It's conceivable that testers only want to assert on the component that's rendered i.e. only fallback or only component but never both. + : [childrenToTree(node.child.child), childrenToTree(node.child.sibling)]; return { nodeType: 'function', type: Suspense, @@ -295,27 +305,13 @@ function toTree(vnode) { key: ensureKeyOrUndefined(node.key), ref: node.ref, instance: null, - rendered: childrenToTree(node.child), + rendered, }; } case FiberTags.Lazy: return childrenToTree(node.child); case FiberTags.OffscreenComponent: { - const hostNodes = nodeToHostNode(node.return.memoizedProps.children); - let rendered = null; - if (hostNodes) { - const hostNodesFiltered = hostNodes.filter((item) => item !== null); - rendered = hostNodesFiltered.length > 0 ? childrenToTree(hostNodesFiltered) : null; - } - return { - nodeType: 'function', - type: Suspense, - props: { ...node.memoizedProps }, - key: ensureKeyOrUndefined(node.key), - ref: node.ref, - instance: null, - rendered, - }; + throw new Error('Enzyme Internal Error. Encountered a Offscreen Fiber'); } default: throw new Error(`Enzyme Internal Error: unknown node with tag ${node.tag}`); diff --git a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx index 3976a8680..0cc61320d 100644 --- a/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx +++ b/packages/enzyme-test-suite/test/ReactWrapper-spec.jsx @@ -1167,12 +1167,8 @@ describeWithDOM('mount', () => { const wrapper = mount(); expect(wrapper.is(SuspenseComponent)).to.equal(true); - if (is('>= 17')) { - expect(wrapper.find('[mode="visible"]').exists()).to.equal(true); - } else { - expect(wrapper.find(Component)).to.have.lengthOf(1); - expect(wrapper.find(Fallback)).to.have.lengthOf(0); - } + expect(wrapper.find(Component)).to.have.lengthOf(1); + expect(wrapper.find(Fallback)).to.have.lengthOf(0); }); it('works with Suspense with multiple children', () => { @@ -1187,9 +1183,9 @@ describeWithDOM('mount', () => { const wrapper = mount(); expect(wrapper.debug()).to.equal(` - ${is('>= 17') ? '' : `
+
-
`} +
`); }); @@ -1236,8 +1232,7 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - ${is('>= 17') ? ` - ` : ''} +
Fallback
@@ -1258,12 +1253,8 @@ describeWithDOM('mount', () => { expect(wrapper.is(SuspenseComponent)).to.equal(true); expect(wrapper.find(LazyComponent)).to.have.lengthOf(0); - if (is('>= 17')) { - expect(wrapper.find('[mode="visible"]').exists()).to.equal(true); - } else { - expect(wrapper.find(DynamicComponent)).to.have.lengthOf(1); - expect(wrapper.find(Fallback)).to.have.lengthOf(0); - } + expect(wrapper.find(DynamicComponent)).to.have.lengthOf(1); + expect(wrapper.find(Fallback)).to.have.lengthOf(0); }); it('return wrapped component string when given loaded lazy component in initial mount and call .debug()', () => { @@ -1278,11 +1269,11 @@ describeWithDOM('mount', () => { expect(wrapper.debug()).to.equal(` - ${is('>= 17') ? '' : ` +
Dynamic Component
- `} + `); }); From cffae58de798ba80d01cc6ff91beede0bcfc5041 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 3 Aug 2022 21:00:02 +0200 Subject: [PATCH 24/29] Remove React 16 logic that is no longer covered by tests --- .../enzyme-adapter-react-17/src/ReactSeventeenAdapter.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index e298b492b..8b76e4e04 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -392,10 +392,6 @@ function wrapAct(fn) { } function getProviderDefaultValue(Provider) { - // React stores references to the Provider's defaultValue differently across versions. - if ('_defaultValue' in Provider._context) { - return Provider._context._defaultValue; - } if ('_currentValue' in Provider._context) { return Provider._context._currentValue; } @@ -875,10 +871,8 @@ class ReactSeventeenAdapter extends EnzymeAdapter { // React stores references to the Provider on a Consumer differently across versions. if (Consumer) { let Provider; - if (Consumer._context) { // check this first, to avoid a deprecation warning + if (Consumer._context) { ({ Provider } = Consumer._context); - } else if (Consumer.Provider) { - ({ Provider } = Consumer); } if (Provider) { return Provider; From 7f309a1f6cc1bf771c1f14e88788bb17bc11c202 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Wed, 3 Aug 2022 21:04:48 +0200 Subject: [PATCH 25/29] Remove no obsolete "supports*" checks when detecting Fiber tags --- .../src/detectFiberTags.js | 63 +++++-------------- 1 file changed, 14 insertions(+), 49 deletions(-) diff --git a/packages/enzyme-adapter-react-17/src/detectFiberTags.js b/packages/enzyme-adapter-react-17/src/detectFiberTags.js index 54747b5a5..d378cf951 100644 --- a/packages/enzyme-adapter-react-17/src/detectFiberTags.js +++ b/packages/enzyme-adapter-react-17/src/detectFiberTags.js @@ -40,14 +40,6 @@ function getLazyFiber(LazyComponent) { } module.exports = function detectFiberTags() { - const supportsMode = typeof React.StrictMode !== 'undefined'; - const supportsContext = typeof React.createContext !== 'undefined'; - const supportsForwardRef = typeof React.forwardRef !== 'undefined'; - const supportsMemo = typeof React.memo !== 'undefined'; - const supportsProfiler = typeof React.unstable_Profiler !== 'undefined' || typeof React.Profiler !== 'undefined'; - const supportsSuspense = typeof React.Suspense !== 'undefined'; - const supportsLazy = typeof React.lazy !== 'undefined'; - function Fn() { return null; } @@ -57,56 +49,29 @@ module.exports = function detectFiberTags() { return null; } } - let Ctx = null; - let FwdRef = null; - let LazyComponent = null; - if (supportsContext) { - Ctx = React.createContext(); - } - if (supportsForwardRef) { - // React will warn if we don't have both arguments. - // eslint-disable-next-line no-unused-vars - FwdRef = React.forwardRef((props, ref) => null); - } - if (supportsLazy) { - LazyComponent = React.lazy(() => fakeDynamicImport(() => null)); - } + const Ctx = React.createContext(); + // React will warn if we don't have both arguments. + // eslint-disable-next-line no-unused-vars + const FwdRef = React.forwardRef((props, ref) => null); + const LazyComponent = React.lazy(() => fakeDynamicImport(() => null)); return { HostRoot: getFiber('test').return.return.tag, // Go two levels above to find the root ClassComponent: getFiber(React.createElement(Cls)).tag, Fragment: getFiber([['nested']]).tag, FunctionalComponent: getFiber(React.createElement(Fn)).tag, - MemoSFC: supportsMemo - ? getFiber(React.createElement(React.memo(Fn))).tag - : -1, - MemoClass: supportsMemo - ? getFiber(React.createElement(React.memo(Cls))).tag - : -1, + MemoSFC: getFiber(React.createElement(React.memo(Fn))).tag, + MemoClass: getFiber(React.createElement(React.memo(Cls))).tag, HostPortal: getFiber(ReactDOM.createPortal(null, global.document.createElement('div'))).tag, HostComponent: getFiber(React.createElement('span')).tag, HostText: getFiber('text').tag, - Mode: supportsMode - ? getFiber(React.createElement(React.StrictMode)).tag - : -1, - ContextConsumer: supportsContext - ? getFiber(React.createElement(Ctx.Consumer, null, () => null)).tag - : -1, - ContextProvider: supportsContext - ? getFiber(React.createElement(Ctx.Provider, { value: null }, null)).tag - : -1, - ForwardRef: supportsForwardRef - ? getFiber(React.createElement(FwdRef)).tag - : -1, - Profiler: supportsProfiler - ? getFiber(React.createElement((React.Profiler || React.unstable_Profiler), { id: 'mock', onRender() {} })).tag - : -1, - Suspense: supportsSuspense - ? getFiber(React.createElement(React.Suspense, { fallback: false })).tag - : -1, - Lazy: supportsLazy - ? getLazyFiber(LazyComponent).tag - : -1, + Mode: getFiber(React.createElement(React.StrictMode)).tag, + ContextConsumer: getFiber(React.createElement(Ctx.Consumer, null, () => null)).tag, + ContextProvider: getFiber(React.createElement(Ctx.Provider, { value: null }, null)).tag, + ForwardRef: getFiber(React.createElement(FwdRef)).tag, + Profiler: getFiber(React.createElement(React.Profiler, { id: 'mock', onRender() {} })).tag, + Suspense: getFiber(React.createElement(React.Suspense, { fallback: false })).tag, + Lazy: getLazyFiber(LazyComponent).tag, OffscreenComponent: getLazyFiber('div').return.return.tag, }; }; From 3b9b1e3848831df398cef4d3881bcbf7ceace00e Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 9 Aug 2022 17:04:42 +0200 Subject: [PATCH 26/29] node_modules/.bin -> npx --- CONTRIBUTING.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5b0f41b1e..60ec7aab6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -93,7 +93,7 @@ npm run build:watch In another terminal tab execute a specific test file for faster TDD test execution: ```bash -node_modules/.bin/mocha packages/enzyme-test-suite/build/ReactWrapper-spec.js +npx mocha packages/enzyme-test-suite/build/ReactWrapper-spec.js ``` NOTE that this alternate strategy may fail to rebuild some code and will bypass lint, so `npm test` will still be necessary periodically. From 103174d03650492fec0605632e5a86c7b8ffa977 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 9 Aug 2022 17:18:14 +0200 Subject: [PATCH 27/29] Revert .gitignore changes from base branch --- .gitignore | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.gitignore b/.gitignore index 9bf861cc5..50838623a 100644 --- a/.gitignore +++ b/.gitignore @@ -48,8 +48,3 @@ packages/*/LICENSE.md packages/enzyme/README.md packages/enzyme-adapter-react-*/README.md packages/enzyme-adapter-utils*/README.md - -# vim -**/*.swp -*.swp - From 5418b9d489225451a7ecc03d09f8e38f235474af Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 9 Aug 2022 17:25:40 +0200 Subject: [PATCH 28/29] Remove outdated comment --- packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js index 8b76e4e04..27d287140 100644 --- a/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js +++ b/packages/enzyme-adapter-react-17/src/ReactSeventeenAdapter.js @@ -868,7 +868,6 @@ class ReactSeventeenAdapter extends EnzymeAdapter { } getProviderFromConsumer(Consumer) { - // React stores references to the Provider on a Consumer differently across versions. if (Consumer) { let Provider; if (Consumer._context) { From 8649c0cc0d26c930cfe1e54d14a8f41e91721de4 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Tue, 9 Aug 2022 17:34:33 +0200 Subject: [PATCH 29/29] Simplify semver matcher for create-react-class --- packages/enzyme-test-suite/test/_helpers/react-compat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/enzyme-test-suite/test/_helpers/react-compat.js b/packages/enzyme-test-suite/test/_helpers/react-compat.js index 08d9fc42c..d3788ce7d 100644 --- a/packages/enzyme-test-suite/test/_helpers/react-compat.js +++ b/packages/enzyme-test-suite/test/_helpers/react-compat.js @@ -36,7 +36,7 @@ let useRef; let useState; let act; -if (is('>=15.5 || ^16.0.0-alpha || ^16.3.0-alpha || ^17.0.0')) { +if (is('>=15.5 || ^16.0.0-alpha || ^16.3.0-alpha')) { // eslint-disable-next-line import/no-extraneous-dependencies createClass = require('create-react-class'); } else {