Question

我有一个类，该类在初始化时会调用另一个方法，该方法又调用另一个称为 pan 的方法。我正在尝试测试pan方法是否被调用。该类比这更复杂，但是我要测试的只是调用了 pan 。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.pan = this.pan.bind(this);
  }

  componentDidMount() {
    initExternals();
  }

  initExternals() {
    .. bla bla
   this.pan();
  }

  pan() {
   console.log('Function was called');
  }

}

这是我的测试班

test('component should call initMap', () => {
  const spy = jest.spyOn(WhereWeAreMap.prototype, 'pan');
  const component = mount(<WhereWeAreMap />);
  expect(spy).toHaveBeenCalled();
});

I have also tried.
test('component should call initMap', () => {
  const component = mount(<WhereWeAreMap />);
  const spy = jest.spyOn(component.instance(), 'pan');
  wrapper.instance().forceUpdate();
  expect(spy).toHaveBeenCalled();
});

我的测试出了什么问题，因为它无法测试组件方法 pan 被称为 expect（spy）.toHaveBeenCalled（）。日志显示它被调用了，但是我的测试显示了不同的结果。

预期已调用模拟函数，但未调用。

Answer 1

第一种测试方法肯定对我有用，将其快速添加到我正在运行ATM的测试中就可以了：

  it('adds the correct scroll blocking class to document.body', () => {
    const spy = jest.spyOn(BlockUI.prototype, 'foo');
    const instance = mount(<BlockUI />).instance();
    // some suggest you need to do this but works without it.
    // instance.forceUpdate();

    const body = instance.document.body;
    expect(body.className).toMatchSnapshot();
    expect(spy).toHaveBeenCalled();
  });

BlockUI.prototype.foo向实例添加了对document.body的引用，并向其添加了一个在卸载时需要删除的类。

以上设置适用于：

"enzyme": "3.7.0",
"enzyme-adapter-react-16": "1.7.1",
"enzyme-to-json": "3.3.4",
"jest": "23.6.0",

我以前很难在不使用酶或使用旧版本的情况下使用此工具，但现在很好。

异步内容中有一些异常可能会导致问题-我建议不要使用间谍，而要检查要确保被调用的方法的结果，无论是什么。当不在酶中使用浅渲染器时，可以保证调用生命周期方法

通过在原型中保存实例的本地绑定副本，您正在构造函数中的实例上更改pan方法-但它仍应调用原型，并且间谍应捕获它。我希望您使用的是旧版本。

Answer 2

   class MyComponent extends React.Component {

      constructor(props) {
        super(props);
        this.pan = this.pan.bind(this);

      }

      componentDidMount() {
        this.initExternals();
      }

      initExternals() {
       this.pan();
      }

      pan() {
       console.log('Function was called');
      }
    }

在componentDidMount方法中应用MyComponent的范围

initExternals应该是this.initExternals

我对window对象的意图是说其他作用域可以绑定到该功能

例如，如果使用窗口范围（例如window.initExternals）调用该函数，则此关键字将引用window

然后是window.pan

如何测试其他组件调用的反应组件方法

2 个答案: