Wie spottet man eine Instanz, die in der React JS-Komponente erstellt wurde?

Question

Ich versuche, eine Instanz zu verspotten, die in einer React JS-Komponente erstellt wird. Die Instanz ist eine allgemeine ECMAScript 2016-Klasse und keine React-Komponente. Ich benutze Jasmine, reagiere JS TestUtils und babel-rewire zum Testen.

Mein Komponentencode Reaktion sieht wie folgt aus:

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 <div>...</div>; 
    } 
} 

Meine Klasse sieht wie folgt aus:

export default class MyHandler { 

    someMethod() { 
     // ... 
    } 
} 

Mein Test und was ich versuchte, so weit:

// 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(<MyComponent />); 

Für spöttischen andere React-Komponenten verwende ich babel-rewire, die gut funktioniert. Aber ich kann die Instanz nicht durch einen Spion oder Spion ersetzen.

Ich weiß, ich könnte die Instanz in die Komponente als eine Eigenschaft übergeben (und damit in einem Test), aber ich frage mich, ob dies eine gute Übung ist und ich fürchte, ich werde das Problem in der nächsten Komponente haben .

Jede Hilfe wird geschätzt!

Answer 1

Sie den Injektor loader etwas in dieser Richtung verwenden könnte

const MyComponentInjector = require('inject!'MyComponent'); 
MyComponent = MyComponentInjector({ 
    '../../js/MyHandler': YourMockedClass 
}).default 

, die eine MyComponent mit YourMockedClass als Mock für Ihren Handler

Answer 2

Für diejenigen bieten würde, die daran interessiert sind, hier ist der vollständige Code:

import TestUtils from 'react-addons-test-utils'; 
import React from 'react'; 
import inject from 'inject!../js/MyComponent'; 

it("mocks the call",() => { 

     class mockClass { 
      constructor() { 
       console.log("some constructor fake"); 
      } 

      someMethod() { 
       console.log("some method fake"); 
      } 
     } 

     let mock = new mockClass(); 


     let MyComponent = inject({ 
      '../../js/MyHandler': mockClass 
     }).default; 


     let component = TestUtils.renderIntoDocument(<MyComponent />); 
     component.someComponentMethod(); 
    });