Javascript 如何模拟在React JS组件中创建的实例？

我试图模拟在React JS组件中创建的实例。 该实例是一个常见的ECMAScript 2016类，而不是React组件。我使用Jasmine、React JS TestUtils和babel rewire进行测试

我的React组件代码如下所示：

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>;
    }
}

export default class MyHandler {

   someMethod() {
       // ...
   }
}

我的测试和我迄今为止的尝试：

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

//给出异常
让myHandler=新的myHandler（）；
让spy=spyOn（myHandler，“someMethod”）.和.returnValue（null）；
MyComponent.重新布线（“MyHandler”，间谍）；
//也给出了解释
MyComponent.\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu；
让component=TestUtils.renderIntoDocument（）；

为了模仿其他React组件，我使用了

babel rewire

，效果非常好。但我不能用模拟或间谍来代替这个实例

我知道我可以将Instance作为一个属性传递到组件中（并在测试中模拟它），但我想知道这是否是一个好的实践，我担心我会在下一个组件中遇到这个问题

---

感谢您的帮助

您可以使用喷油器加载器沿这些路线进行操作

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

---

这将为您的处理程序提供一个MyComponent和您的mockedClass作为Mock。您可以使用注入器加载程序

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

---

这将为您的处理程序提供一个MyComponent和您的MockedClass作为Mock。对于感兴趣的人，以下是完整的代码：

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();
    });

从“react addons test utils”导入TestUtils；
从“React”导入React；
从“注入！”导入注入/js/MyComponent'；
它（“模拟呼叫”，（）=>{
类模拟类{
构造函数（）{
log（“一些构造函数伪造”）；
}
someMethod（）{
log（“某些方法伪造”）；
}
}
让mock=newmockclass（）；
让MyComponent=注射({
“../../js/MyHandler”：mockClass
}).违约；
让component=TestUtils.renderIntoDocument（）；
someComponentMethod（）；
});

对于感兴趣的人，以下是完整的代码：

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();
    });

从“react addons test utils”导入TestUtils；
从“React”导入React；
从“注入！”导入注入/js/MyComponent'；
它（“模拟呼叫”，（）=>{
类模拟类{
构造函数（）{
log（“一些构造函数伪造”）；
}
someMethod（）{
log（“某些方法伪造”）；
}
}
让mock=newmockclass（）；
让MyComponent=注射({
“../../js/MyHandler”：mockClass
}).违约；
让component=TestUtils.renderIntoDocument（）；
someComponentMethod（）；
});

正在导入您的实例，对吗？是的，它在代码段中遗漏了这一点。它是通过“../../js/MyHandler”导入的

import MyHandlerHandler导入的看看这个我一直在用它来测试我的组件Hanks很多，你有没有一个小的例子来说明InjectLoader的导入是什么样子的？它与babel一起工作吗？您的实例正在导入，对吗？是的，它在代码段中遗漏了这一点。它是通过“../../js/MyHandler”导入的
import MyHandlerHandler导入的看看这个我一直在用它来测试我的组件Hanks很多，你有没有一个小的例子来说明InjectLoader的导入是什么样子的？这对巴贝尔有用吗？很抱歉我回复晚了。我将您的示例从“inject！”更改为
import inject/js/MyComponent'
，它可以正常工作。非常感谢你的帮助！啊，忘了添加。默认代码。使用必需时，默认情况下导出的任何内容都位于.default属性下。你能粘贴完整的代码，看看你是如何使用system.js导入起诉它的吗？很抱歉我的回复太晚了。我将您的示例从“inject！”更改为
import inject/js/MyComponent'
，它可以正常工作。非常感谢你的帮助！啊，忘了添加。默认代码。使用必需时，默认情况下导出的任何内容都位于.default属性下。你能粘贴完整的代码，看看你是如何使用system.js导入来起诉它的吗？