javascript - How to spyOn method inside prop passed down to a component using Jest? - Stack Overflow

admin管理员组

文章数量:1302329

Background:

My test Framework is Jest and Enzyme. I have a Component called Lazyload that is coupled to a LazyloadProvider using React.ContextAPI. I would like to write a test that guarantees that on ponentDidMount of the Lazyload Component inner prop method this.props.lazyload.add() has been called. Using Jest spy I would like to expect that hasBeenCalledWith(this.lazyRef) is valid

I've gotten jest to be able to spy on Lazyload's register method; however, I'm unable to figure out how to spy on the inner props method this.props.lazyload.add.

Question:

How do I write a jest spy on this.props.lazyload.add and assure that it's is called with this.lazyRef?

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

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

  ponentDidMount() {
   this.register()
  }

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

Test:

describe('lazyload', () => {
  let provider;
  beforeEach(() => {
    provider = shallow(
      <LazyloadProvider>
        <p>Wow</p>
      </LazyloadProvider>
    ).instance();
  });

  it('should register a lazyloader with add', () => {
    const spy = jest.spyOn(Lazyload.prototype, 'register');

    const wrapper = shallow(
      <Lazyload lazyload={provider.engine}>
        <p>doge</p>
      </Lazyload>
    ).instance();

    expect(spy).toHaveBeenCalled(); // this works however it's a better test to spy on the this.prop.lazyload.add method.. but how?
  });
})

Background:

My test Framework is Jest and Enzyme. I have a Component called Lazyload that is coupled to a LazyloadProvider using React.ContextAPI. I would like to write a test that guarantees that on ponentDidMount of the Lazyload Component inner prop method this.props.lazyload.add() has been called. Using Jest spy I would like to expect that hasBeenCalledWith(this.lazyRef) is valid

I've gotten jest to be able to spy on Lazyload's register method; however, I'm unable to figure out how to spy on the inner props method this.props.lazyload.add.

Question:

How do I write a jest spy on this.props.lazyload.add and assure that it's is called with this.lazyRef?

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

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

  ponentDidMount() {
   this.register()
  }

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

Test:

describe('lazyload', () => {
  let provider;
  beforeEach(() => {
    provider = shallow(
      <LazyloadProvider>
        <p>Wow</p>
      </LazyloadProvider>
    ).instance();
  });

  it('should register a lazyloader with add', () => {
    const spy = jest.spyOn(Lazyload.prototype, 'register');

    const wrapper = shallow(
      <Lazyload lazyload={provider.engine}>
        <p>doge</p>
      </Lazyload>
    ).instance();

    expect(spy).toHaveBeenCalled(); // this works however it's a better test to spy on the this.prop.lazyload.add method.. but how?
  });
})

• javascript
• reactjs
• jestjs
• enzyme
• spy

Share Improve this question Follow edited Nov 1, 2018 at 23:18 skyboyer 23.8k77 gold badges6262 silver badges7171 bronze badges asked Oct 11, 2018 at 17:54 John AbrahamJohn Abraham 18.8k3636 gold badges132132 silver badges240240 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can pass stubbed add in lazyload prop, and check with toHaveBeenCalledWith matcher if it accepts instance()'s lazyref :

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

本文标签： javascriptHow to spyOn method inside prop passed down to a component using JestStack Overflow