search

zillow / react-slider

Accessible, CSS agnostic, slider component for React.
https://zillow.github.io/react-slider
MIT License
892 stars 231 forks source link

- 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). #87

Closed michaelsync closed 5 years ago

michaelsync commented 8 years ago

Hello,

I am getting this error below when I load my react component that uses react-sider in my JEST beforeEach() method. (I am using React 15.3.0, react-slider 0.7.0, JEST 13.2.3)

  • 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).

I am sure I didn't create my component out side of the render() and I don't have multiple copies of React (I verified with this command npm ls | grep react )..

Does anyone here has the same issue?

michaelsync commented 8 years ago

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

jamesbrauman commented 8 years ago

@michaelsync

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

michaelsync commented 8 years ago

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

Here is some repo.

Here is the list of files that I have.

image

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

michaelsync commented 8 years ago

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.

jamesbrauman commented 8 years ago

@michaelsync

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

michaelsync commented 8 years ago

Hi @jamesbrauman Did you manage to replicate the issue?

jamesbrauman commented 8 years ago

@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.

axelg12 commented 7 years ago

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

stale[bot] commented 5 years ago

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.