Using Proxyquire to stub sub-components in unit tests results in test failure.

[cmelion]

Warning: Failed Context Types: Required context dragDropManager was not specified in DragSource(ProductComponent).

see https://github.com/cmelion/react-hot-boilerplate/tree/Invariant-Violation-DND

Error: Invariant Violation: Could not find the drag and drop manager in the context of ProductComponent. Make sure to wrap the top-level component of your app with DragDropContext. Read more: http://gaearon.github.io/react-dnd/docs-troubleshooting.html#could-not-find-the-drag-and-drop-manager-in-the-context

When subcomponents are commented out, the test runs as expected.

      Component = proxyquire('../src/components/product/',
            {
                '../../stores/AppStore': storeStub,
                //'./product-summary/': this.Stub,
                //'./ranking-and-reviews/': this.Stub,
                //'./rank-info/': this.Stub

            }
        );

       DNDContext = this.wrapInTestDNDContext(Component, React, defaultProps);

[cmelion]

The associated template:

import React from 'react';
import ProductSummary from './product-summary/';
import ProductRankingAndReviews from './ranking-and-reviews/';
import RankInfo from './rank-info/';
import classnames from 'classnames';

const render = function() {

    // These two props are injected by React DnD,
    const { isDragging, connectDragSource, connectDropTarget, showCopyIcon } = this.props;
    const opacity = isDragging ? 0.1 : 1;
    const cursor = 'move';
    const dropEffect = showCopyIcon ? 'copy' : 'move';

    const { isExpanded } = this.state;
    const { product, isRankInfo } = this.props;

    return connectDragSource(connectDropTarget(
        <div className={classnames('product-component', {expanded: isExpanded})}
             style={{cursor, opacity}}>
            <RankInfo
                includeInLayout={isRankInfo}
                product={product}
                rankings={this.getCategoryRankings()} />
            <div className={classnames('product-container', {expanded: isExpanded})} >
                <ProductSummary product={product} />
                <ProductRankingAndReviews product={product} />
            </div>
        </div>
    ), {dropEffect});
};

export default render;

[cmelion]

Added a link to a repo with a contrived test case within a working sample application.
https://github.com/cmelion/react-hot-boilerplate/tree/Invariant-Violation-DND

[gaearon]

I don't understand how proxyquire works so maybe this won't help you but I found that commenting out

stub['@global'] = true;

in this method:

    this.stubComponent = function(className) {
        // mock react component
        var stub = React.createClass({
            render() {
                return <div className={className || 'stub'}/>;
            }
        });

        //stub['@global'] = true; // this might not be needed in your case, refer to proxyquire docs
        return  stub;
    };

in test/helpers/index.js made the error go away for me.

As I said, I didn't understand what it did, or why it helped, so maybe that's not what you wanted.
I'm closing because we use Github to track issues, but there is nothing actionable for React DnD here.

[cmelion]

Thanks Dan, that doesn't completely solve my issue but it points me in the right direction. I'll update this issue once it's resolved, in case anyone else runs across it.

[cmelion]

Just to follow up, as you noted, the invariant violation goes away when "@global': true is ommited.

Removing @global has the side-effect of breaking

TestUtils.findRenderedDOMComponentWithClass/Tag

which is not a show-stopper.

[cmelion]

Issue resolved using:
const subComponent = React.findDOMNode(comp).querySelectorAll('.simple-subcomponent');
should(subComponent.length).equal(1);