javascript - 在 ES7 中 stub 类字段函数

Question

在我的测试套件中，我如何 stub 一个类的属性，它是一个函数*？使用普通方法很容易使用 Object.getOwnPropertyNames(component.prototype) 和猴子修补每个找到的方法，但经过长时间的努力，我还没有找到任何方法来提取通过分配给类字段创建的函数。

我的测试堆栈由 Jest 与 Jasmine2 和 babel 组成。

转译的问题在于，arrow-function-properties(当然，正如预期的那样)分配给输出转译“类”的实例(当然，实际上是函数)。因此，除了实例化该对象之外，我看不到任何对它们进行 stub 的方法，对吗？ Here is the example of input es7 code and the babel's output.但是我不是特别喜欢这个解决方案，看起来很老套。此解决方案的另一个缺点是我无法直接实例化组件的类。

---

(*) 这个问题的背景是单元测试用类似 es7 的类编写的 React 组件，并为自动绑定(bind)目的将箭头函数分配给类的属性。

Answer 1

我在为我正在工作的项目编写单元测试时遇到了同样的问题，我认为我找到了一个很好的模式来解决它。希望对您有所帮助:

上下文

这是一个 React 组件的示例，该组件具有使用粗箭头表示法定义的方法 handleClick。

import React, { Component } from 'react';

class Foo extends Component {
  componentWillMount() {
    this.handleClick();
  }

  handleClick = (evt) => {
    // code to handle click event...
  }

  render() {
    return (
      <a href="#" onClick={this.handleClick}>some foo link</a>
    );
  }
}

问题

如本 link 中所述Babel 将转换代码，以便 handleClick 方法仅在实例化后可用(检查生成的构造函数的第 31 到 33 行)

这里的问题是有时您需要在实例化类之前访问使用粗箭头表示法定义的方法。

例如，假设您正在为 componentWillMount 类方法编写单元测试，并且您想要对 handleClick 进行 stub ，以便您只测试所需的单元。但是现在你遇到了一个问题，因为你只能在实例化后访问 handleClick 并且 componentWillMount 方法将被 React 自动调用作为它的实例化生命周期。

解决方案

下面是我如何应用一个简单的模式来解决这样的问题:

import React from 'react';
import { mount } from 'enzyme';
import { expect } from 'chai';
import sinon from 'sinon';

import Foo from './foo';

describe('Foo', () => {
  describe('componentWillMount method', () => {
    const handleClickStub = sinon.stub();
    class FooWrapper extends Foo {
      constructor(props) {
        super(props);
        this.handleClick = handleClickStub;
      }
    }

    it('should register a click event listener to the externalElement property', () => {
      handleClickStub.reset();
      mount(<FooWrapper />);
      expect(handleClickStub.calledOnce).to.be.true;
    });
  });
});

说明

我已经将原始的 Foo 组件包装到 FooWrapper 中，在初始化原始组件后，我在其构造函数中替换了原始的 handleClick 方法使用 stub 版本允许我对我的 componentWillMount 类进行属性测试。