Question

背景：

我的测试框架是Jest和Enzyme。我有一个名为Lazyload的组件，它使用LazyloadProvider耦合到React.ContextAPI。我想编写一个测试，以确保在componentDidMount组件内部prop方法Lazyload的{{1}}上已被调用。使用Jest间谍，我希望this.props.lazyload.add()是有效的

我开玩笑的是能够监视Lazyload的hasBeenCalledWith(this.lazyRef)方法；但是，我无法弄清楚如何监视内部道具方法register。

问题：

如何在this.props.lazyload.add上写一个笑话间谍，并确保它被this.props.lazyload.add调用？

this.lazyRef

测试：

class Lazyload extends Component<LazyloadProps, LazyloadState> {
  lazyRef: ReactRef;

  constructor(props) {
    super(props);
    this.lazyRef = createRef();
  }

  componentDidMount() {
   this.register()
  }

  register() { // not spy on this.
    this.props.lazyload.add(this.lazyRef); // spyOn this
  }
}

Answer 1

您可以在add道具中通过stubbed lazyload，并与toHaveBeenCalledWith匹配器检查是否接受instance()的lazyref： / p>

describe('lazyload', () => {

  it('should add ref', () => {
    const lazyloadStub = {
        add: jest.fn();
    };

    const wrapper = shallow(
      <Lazyload lazyload={lazyloadStub}>
        <p>doge</p>
      </Lazyload>
    );

    expect(lazyloadStub.add).toHaveBeenCalledWith(wrapper.instance().lazyRef); 
  });
})

如何使用Jest将prop内部的spyOn方法传递给组件？

1 个答案: