Question

我正在尝试模拟在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 />);

为了模拟其他React组件，我使用babel-rewire，效果很好。但我无法通过模拟或间谍来替换实例。

我知道我可以将实例作为属性传递给组件（因此在测试中模拟它），但我想知道这是不是很好的做法，我担心我会在下一个组件中遇到问题。

任何帮助表示赞赏！

Answer 1

你可以沿着这些线使用注入器加载器

<video autoplay  poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>Polina</h1>
<p>filmed by Alexander Wagner 2011
<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>

将为MyComponent提供YourMockedClass作为处理程序的模拟

Answer 2

对于有兴趣的人，这里是完整的代码：

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 JS组件中创建的实例？

2 个答案: