windygex / preact-compat-enzyme

Implement React internal properties

PreactCompatEnzyme

Implement react internal property for enzyme test. Now it support mount mode.

Usage

If you using webpack and karma for testing, Only add alias for react, react-dom and react-addons-test-utils

webpack.resolve.alias = {
      'react-dom/server': 'preact-render-to-string',
      'react-addons-test-utils': 'preact-test-utils',
      'react-addons-transition-group': 'preact-transition-group',
      'react': 'preact-compat-enzyme',
      'react-dom': 'preact-compat-enzyme'
    }

Example Project

Here is an example project for enzyme test.

Demo

let dataSource = [{ id: '1', name: 'test' }, { id: '2', name: 'test2' }],
    table,
    wrapper;

    beforeEach(() => {
        table = <Table dataSource={dataSource}>
            <Table.Column dataIndex='id' />
            <Table.Column dataIndex='name' />
        </Table>
        wrapper = mount(table);
    })

    afterEach(() => {
        table = null;
    })

    it('should render checkboxMode', (done) => {
        wrapper.setProps({
             rowSelection: {
                getProps: (record) => {
                    if (record.id === '1') {
                        return {
                            disabled: true
                        }
                    }
                }
            }
        });

        setTimeout(() => {
            expect(wrapper.find('.checkbox').length).to.be.equal(3);
            expect(wrapper.find('.checkbox.disabled').length).to.be.equal(1);
            done();
        }, 10);
    });

preact-compat-enzyme's Issues

Any advice for Jest?

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 😞

What is the license for preact-compat-enzyme?

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!

Library breaks already-working tests

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

Cannot set property error

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?

When is wrapper.setProps + setTimeout needed?

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?