- Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). about react-slider HOT 9 CLOSED

I am experiencing the same error, @michaelsync did you ever figure it out? CC: @jamesbrauman

from react-slider.

I think I got this error because of "ref". If I temporarily removed the code related to refs (e.g. ref: 'slider', ref: 'bar' + i, ref: 'handle' + i, var slider = this.refs.slider; ), I no longer get this error anymore.

I am very new to React so feel free to let me know if I am missing something here.. If it's an known issue, I would like to know when we can get the fix.

Cc @mpowaga @jamesbrauman

from react-slider.

@michaelsync

Thank for the report. Could you please post some minimal amount of code that reproduces the issue?

from react-slider.

@jamesbrauman Sorry. I didn't get the notification.

Here is some repo.

Here is the list of files that I have.

Package.json

{
"name": "ms-jest-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"author": "ms",
"license": "ISC",
"dependencies": {
"react": "15.3.0",
"react-addons-test-utils": "^15.3.0",
"react-dom": "15.3.0",
"react-slider": "^0.7.0"
},
"devDependencies": {
"babel-jest": "^14.1.0",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "",
"babel-preset-react": "",
"jest-cli": "^14.1.0",
"react-addons-test-utils": "~15.3.0"
},
"jest": {
"unmockedModulePathPatterns": [
"/node_modules/react/",
"/node_modules/react-dom/",
"/node_modules/react-addons-test-utils/"
]
}
}

MyCoolComponent.react

var React = require('react');
var ReactSlider = require('react-slider');

var MyCoolComponent = React.createClass({
    render: function() {
      return(
          <div>
            <ReactSlider defaultValue={50} />
          </div>
      );
    }
});

module.exports = MyCoolComponent;

MyCoolComponent-Spec.js

jest.unmock('../MyCoolComponent.react')
    .unmock('react-slider'); // unmock to use the actual implementation of sum

describe('when the page is loaded', () => {

  var React = require('react'),
      ReactDOM = require('react-dom');
  var TestUtils = require('react-addons-test-utils');
  var page;
  beforeEach(function () {
    var myComponent = require('../MyCoolComponent.react');
    page = TestUtils.renderIntoDocument(React.createElement(myComponent));
    var a = 1;
  });

  it('some HTML elements should be there.', () => {
    expect(1).toBe(1);
  });

  it('some CSS elements should be there.', () => {
    expect(1).toBe(1);
  });
});

Error

No results

DEBUG CONSOLE

• Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
  at invariant (node_modules\fbjs\lib\invariant.js:38:15)
  at Object..ReactOwner.addComponentAsRefTo (node_modules\react\lib\ReactOwner.js:69:79)
  at attachRef (node_modules\react\lib\ReactRef.js:23:16)
  at Object..ReactRef.attachRefs (node_modules\react\lib\ReactRef.js:42:5)
  at ReactDOMComponent.attachRefs (node_modules\react\lib\ReactReconciler.js:24:12)
  at CallbackQueue.Object.._assign.notifyAll (node_modules\react\lib\CallbackQueue.js:67:22)
  at ReactReconcileTransaction.Object..ON_DOM_READY_QUEUEING.close (node_modules\react\lib\ReactReconcileTransaction.js:81:26)
  at ReactReconcileTransaction.Object..Mixin.closeAll (node_modules\react\lib\Transaction.js:204:25)
  at ReactReconcileTransaction.Object..Mixin.perform (node_modules\react\lib\Transaction.js:151:16)
  at batchedMountComponentIntoNode (node_modules\react\lib\ReactMount.js:126:15)
  at ReactDefaultBatchingStrategyTransaction.Object..Mixin.perform (node_modules\react\lib\Transaction.js:138:20)
  at Object..ReactDefaultBatchingStrategy.batchedUpdates (node_modules\react\lib\ReactDefaultBatchingStrategy.js:63:19)
  at Object.batchedUpdates (node_modules\react\lib\ReactUpdates.js:98:20)
  at Object..ReactMount._renderNewRootComponent (node_modules\react\lib\ReactMount.js:285:18)
  at Object..ReactMount._renderSubtreeIntoContainer (node_modules\react\lib\ReactMount.js:371:32)
  at Object..ReactMount.render (node_modules\react\lib\ReactMount.js:392:23)
  at Object..ReactTestUtils.renderIntoDocument (node_modules\react\lib\ReactTestUtils.js:85:21)
  at Object. (tests\MyCoolComponent-Spec.js:12:22)
  ● when the page is loaded › it some CSS elements should be there.
• Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
  at invariant (node_modules\fbjs\lib\invariant.js:38:15)
  at Object..ReactOwner.addComponentAsRefTo (node_modules\react\lib\ReactOwner.js:69:79)
  at attachRef (node_modules\react\lib\ReactRef.js:23:16)
  at Object..ReactRef.attachRefs (node_modules\react\lib\ReactRef.js:42:5)
  at ReactDOMComponent.attachRefs (node_modules\react\lib\ReactReconciler.js:24:12)
  at CallbackQueue.Object.._assign.notifyAll (node_modules\react\lib\CallbackQueue.js:67:22)
  at ReactReconcileTransaction.Object..ON_DOM_READY_QUEUEING.close (node_modules\react\lib\ReactReconcileTransaction.js:81:26)
  at ReactReconcileTransaction.Object..Mixin.closeAll (node_modules\react\lib\Transaction.js:204:25)
  at ReactReconcileTransaction.Object..Mixin.perform (node_modules\react\lib\Transaction.js:151:16)
  at batchedMountComponentIntoNode (node_modules\react\lib\ReactMount.js:126:15)
  at ReactDefaultBatchingStrategyTransaction.Object..Mixin.perform (node_modules\react\lib\Transaction.js:138:20)
  at Object..ReactDefaultBatchingStrategy.batchedUpdates (node_modules\react\lib\ReactDefaultBatchingStrategy.js:63:19)
  at Object.batchedUpdates (node_modules\react\lib\ReactUpdates.js:98:20)
  at Object..ReactMount._renderNewRootComponent (node_modules\react\lib\ReactMount.js:285:18)
  at Object..ReactMount._renderSubtreeIntoContainer (node_modules\react\lib\ReactMount.js:371:32)
  at Object..ReactMount.render (node_modules\react\lib\ReactMount.js:392:23)
  at Object..ReactTestUtils.renderIntoDocument (node_modules\react\lib\ReactTestUtils.js:85:21)
  at Object. (tests\MyCoolComponent-Spec.js:12:22)
  2 tests failed, 0 tests passed (2 total in 1 test suite, run time 3.295s)

from react-slider.

If I remove ".unmock('react-slider')" to automock the slider then it works. But I don't want to auto-mock the slider and I want to test the DOM.

from react-slider.

@michaelsync

Thanks for providing that example - I'll take a look into this.

from react-slider.

Hi @jamesbrauman Did you manage to replicate the issue?

from react-slider.

@michaelsync Sorry I have not yet had a chance to investigate the issue. If you would like to and create a pull request that fixes the bug, it would be appreciated, otherwise I'll get to it when I have a chance.

from react-slider.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from react-slider.