You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Maybe each component could have a property nodeRef or similar that holds the DOM element? Then Portal could check to see if its ref is a ReactComponent or a ReactElement? The main downside is that custom components would need to add a nodeRef, which would be Semver Major.
Aside from actually solving the problem, my current workaround to keep Jest tests working is to add this to the top of the test:
It might be useful to document this for people that do want to use Jest snapshot tests.
Steps
Add any Semantic UI component that uses Portal and try to use Jest snapshot testing.
Expected Result
Snapshot should be created and tests work as planned.
Actual Result
FAIL tests/app.jsx (6.945s)
● should check default app structure
Invariant Violation: getNodeFromInstance: Invalid argument.
at invariant (node_modules/fbjs/lib/invariant.js:44:15)
at Object.getNodeFromInstance (node_modules/react-dom/lib/ReactDOMComponentTree.js:162:77)
at Object.findDOMNode (node_modules/react-dom/lib/findDOMNode.js:49:41)
at Portal._this.handleRef (node_modules/semantic-ui-react/dist/commonjs/addons/Portal/Portal.js:276:52)
at attachRef (node_modules/react-test-renderer/lib/ReactRef.js:20:5)
at Object.<anonymous>.ReactRef.attachRefs (node_modules/react-test-renderer/lib/ReactRef.js:42:5)
at ReactCompositeComponentWrapper.attachRefs (node_modules/react-test-renderer/lib/ReactReconciler.js:23:12)
at CallbackQueue.notifyAll (node_modules/react-test-renderer/lib/CallbackQueue.js:76:22)
at ReactTestReconcileTransaction.close (node_modules/react-test-renderer/lib/ReactTestReconcileTransaction.js:36:26)
at ReactTestReconcileTransaction.closeAll (node_modules/react-test-renderer/lib/Transaction.js:206:25)
at ReactTestReconcileTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:153:16)
at batchedMountComponentIntoNode (node_modules/react-test-renderer/lib/ReactTestMount.js:69:27)
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-test-renderer/lib/Transaction.js:140:20)
at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules/react-test-renderer/lib/ReactUpdates.js:97:27)
at Object.render (node_modules/react-test-renderer/lib/ReactTestMount.js:125:18)
at Object.<anonymous> (tests/app.jsx:15:41)
at Promise.resolve.then.el (node_modules/p-map/index.js:42:16)
at process._tickCallback (internal/process/next_tick.js:109:7)
Version
v0.68.3
The text was updated successfully, but these errors were encountered:
layershifter
changed the title
addons: Portal: Rework #handleRef to avoid using ReactDOM.findDOMNode. (Prevents Jest Snapshot testing)
Portal: rework #handleRef to avoid using ReactDOM.findDOMNode
May 25, 2017
Relevant line: https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/addons/Portal/Portal.js#L417
ReactDOM.findDOMNode breaks ReactTestRenderer, and it will never be supported.
Additionally, even React documentation warns against using #findDOMNode.
Maybe each component could have a property
nodeRef
or similar that holds the DOM element? Then Portal could check to see if its ref is aReactComponent
or aReactElement
? The main downside is that custom components would need to add anodeRef
, which would be Semver Major.Aside from actually solving the problem, my current workaround to keep Jest tests working is to add this to the top of the test:
It might be useful to document this for people that do want to use Jest snapshot tests.
Steps
Add any Semantic UI component that uses Portal and try to use Jest snapshot testing.
Expected Result
Snapshot should be created and tests work as planned.
Actual Result
Version
v0.68.3
The text was updated successfully, but these errors were encountered: