title: How to mock an instance created in React JS component?
body: <p>I'm trying to mock an instance which is created in a React JS component.
  The instance is a common ECMAScript 2016 class, not a React component. I use Jasmine, React JS TestUtils and babel-rewire for testing.</p>
  
  <p>My React component code looks like this:</p>
  
  <pre><code>import MyHandler from '../../js/MyHandler';
  export default class MyComponent extends React.Component {
  
      constructor(props) {
        super(props);
        this.myHandler = new MyHandler();
      }
  
      someComponentMethod() {
        this.myHandler.someMethod();
      }
  
      render() {
        return &lt;div&gt;...&lt;/div&gt;;
      }
  }
  </code></pre>
  
  <p>My class looks like this:</p>
  
  <pre><code>export default class MyHandler {
  
     someMethod() {
         // ...
     }
  }
  </code></pre>
  
  <p>My test and what I tried so far:</p>
  
  <pre><code>// gives exception
  let myHandler = new MyHandler();
  let spy = spyOn(myHandler, "someMethod").and.returnValue(null);
  MyComponent.__Rewire__ ("MyHandler", spy);
  // also gives exeption
  MyComponent.__set__ ("MyHandler", spy);
  
  let component = TestUtils.renderIntoDocument(&lt;MyComponent /&gt;);
  </code></pre>
  
  <p>For mocking other React components I use <code>babel-rewire</code> which works great. But I can't replace the instance by a mock or spy.</p>
  
  <p>I know I could pass the instace into the component as a property (and thus mock it in a test), but I wonder if this is good practise and I'm afraid I'll have the problem in the next coomponent .</p>
  
  <p>Any help appreciated!</p>