windygex / preact-compat-enzyme Goto Github PK
View Code? Open in Web Editor NEWImplement React internal properties
License: MIT License
Implement React internal properties
License: MIT License
I installed preact-compat-enzyme
in an attempt to get some of my tests that involve (p)react-redux
working. Unfortunately, now my tests that were previously working are no longer working.
Versions:
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
For tests which were previously working, after having configured my module aliases as described in the preact-compat-enzyme
readme, I now receive the following:
TypeError: Cannot set property _reactInternalInstance of #<Component$1> which has only a getter
at Object.set (node_modules/react-dom/lib/ReactInstanceMap.js:42:32)
at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:229:22)
at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
at ReactCompositeComponentWrapper.performInitialMount (node_modules/react-dom/lib/ReactCompositeComponent.js:371:34)
at ReactCompositeComponentWrapper.mountComponent (node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)
at Object.mountComponent (node_modules/react-dom/lib/ReactReconciler.js:46:35)
at mountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:104:32)
at ReactReconcileTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
at batchedMountComponentIntoNode (node_modules/react-dom/lib/ReactMount.js:126:15)
at ReactDefaultBatchingStrategyTransaction.perform (node_modules/react-dom/lib/Transaction.js:140:20)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62:26)
at Object.batchedUpdates (node_modules/react-dom/lib/ReactUpdates.js:97:27)
at Object._renderNewRootComponent (node_modules/react-dom/lib/ReactMount.js:320:18)
at Object._renderSubtreeIntoContainer (node_modules/react-dom/lib/ReactMount.js:401:32)
at Object.render (node_modules/react-dom/lib/ReactMount.js:422:23)
at Object.renderIntoDocument (node_modules/react-dom/lib/ReactTestUtils.js:91:21)
at renderWithOptions (node_modules/enzyme/build/react-compat.js:209:26)
at new ReactWrapper (node_modules/enzyme/build/ReactWrapper.js:94:59)
at mount (node_modules/enzyme/build/mount.js:19:10)
at table (test/unit/client/components/common/tables/Table.js:14:21)
at Context.<anonymous> (test/unit/client/components/common/tables/Table.js:98:35)
This seemed a simple enough problem to solve by merely adding a corresponding noop set
at https://github.com/windyGex/preact-compat-enzyme/blob/master/src/index.js#L19. Unfortunately, this didn't work either, resulting in the following:
TypeError: Cannot read property 'nodeType' of undefined
at createReactDOMComponent (node_modules/preact-compat-enzyme/lib/index.js:71:23)
at updateReactComponent (node_modules/preact-compat-enzyme/lib/index.js:53:28)
at createReactCompositeComponent (node_modules/preact-compat-enzyme/lib/index.js:46:9)
at patch (node_modules/preact-compat-enzyme/lib/index.js:34:9)
at Table.get (node_modules/preact-compat-enzyme/lib/index.js:28:10)
at internalInstanceOrComponent (node_modules/enzyme/build/MountedTraversal.js:175:18)
at treeFilter (node_modules/enzyme/build/MountedTraversal.js:221:40)
at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:62:12)
at node_modules/enzyme/build/ReactWrapper.js:1270:21
at Array.map (native)
at ReactWrapper.flatMap (node_modules/enzyme/build/ReactWrapper.js:1269:37)
at ComplexSelector.findWhereUnwrapped (node_modules/enzyme/build/ReactWrapper.js:61:18)
at recurseSelector (node_modules/enzyme/build/ComplexSelector.js:51:37)
at ComplexSelector.handleSelectors (node_modules/enzyme/build/ComplexSelector.js:113:22)
at ComplexSelector.find (node_modules/enzyme/build/ComplexSelector.js:129:23)
at ReactWrapper.find (node_modules/enzyme/build/ReactWrapper.js:577:37)
at Context.<anonymous> (test/unit/client/components/common/tables/Table.js:98:35)
I did some mucking about to see if I could come up with a sscce and successfully reproduced the issue with the following test case:
it.only('Break preact-compat-enzyme', () => {
class Test extends React.Component {
render() {
return (<div />);
}
}
const test = mount(<Test />);
const result = test.find('div');
});
The issue arises when we call test.find(...)
. If I remove that line, the issue goes away. If I alter the find in any way, the issue remains.
Unfortunately, I'm not up on (p)react internals and how all that works, so I'm not much help beyond that point, other than being able to do as instructed and try new things!
Thanks in advance for any insight
Do you have any advice for testing with Jest? I've got two projects that are using Jest as test runner. One uses webpack and one doesn't use webpack. Both are written in TypeScript and both use preact.
I don't get it working ๐
I'm using this with Jest and have babel-jest set up to alias the modules as below
{
plugins: [
['module-resolver', {
alias: {
'react-dom/server': 'preact-render-to-string',
'react-addons-test-utils': 'preact-test-utils',
react: 'preact-compat-enzyme',
'react-dom': 'preact-compat-enzyme',
},
}],
],
}
but I still get Cannot set property _reactInternalInstance of #<Component$1> which has only a getter
I looked at #4 but I already have aliases set up
Am I missing something?
Hello, I cannot seem to find the license under which this package is published. Could you please add one (preferable a permissive one like MIT or similar)? We could then also update package.json
to make it visible for tooling. Thanks!
Hi,
Thanks for this package!
I don't understand when I need to use setProps
(and therefore make assertions wrapped in setTimeout
).
The following code does not work, children is always empty:
const wrapper = mount(<Render if={false}><span>Hello</span></Render>)
This is needed:
const wrapper = mount(<Render />)
wrapper.setProps({if: false, children: <span>Hello</span>})
Could you help me understand why?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.