sinon spy is not called in a stub with async function

Question

Using sinon and enzyme I wanna test the following component:

// Apple.js
class Apple extends Component {

  componentDidMount = () => {

    this.props.start();
    Api.get()
      .then(data => {
        console.log(data); // THIS IS ALWAYS CALLED
        this.props.end();
      });
  }

  render () {
    return (<div></div>);
  }
}

If I just check endApy.called, it's always false. But wrapping it in a setTimeout will make it pass. Why console.log() is always called but not the props.end? Why setTimeout fixes it? Is there a better way of doing this?

// Apple.test.js
import sinon from 'sinon';
import { mount } from 'enzyme';
import Api from './Api';
import Apple from './Apple';


test('should call "end" if Api.get is successfull', t => {
  t.plan(2);
    sinon
        .stub(Api, 'get')
        .returns(Promise.resolve());

    const startSpy = sinon.spy();
    const endApy = sinon.spy();

    mount(<Apple start={ startSpy } end={ endApy } />);

    t.equal(startSpy.called, true);                    // ALWAYS PASSES 
    t.equal(endSpy.called, true);                      // ALWAYS FAILS
    setTimeout(() => t.equal(endApy.called, true));    // ALWAYS PASSES

    Api.get.restore();
});

score 15 · Accepted Answer · answered Sep 14 '17 at 19:56

15

Api.get is async function and it returns a promise, so to emulate async call in test you need to call resolves function not returns:

Causes the stub to return a Promise which resolves to the provided value. When constructing the Promise, sinon uses the Promise.resolve method. You are responsible for providing a polyfill in environments which do not provide Promise.

sinon
  .stub(Api, 'get')
  .resolves('ok');

answered Sep 14 '17 at 19:56

alexmac

19,087
7
58
69

Excuse my ignorance, I fixed the error but I get the same result. – Sam R. Sep 14 '17 at 22:21
@norbertpy I've updated the demo, it works there. I understand why it doesn't work in yours, it's because you're testing async function (even when stubbed, it's still async), but don't wait when it will be finished, and checking `spy.called`. You must add `then` callback and assert `spy.called` there. [The fixed demo](https://repl.it/LHde/4) – alexmac Sep 15 '17 at 19:01
1

Thanks. The problem is the `componentDidMount` does not return the promise. So I cannot `then` it. to do the assertion. But thanks for the answer. – Sam R. Sep 15 '17 at 19:55

score 3 · Answer 2 · answered Sep 14 '17 at 19:59

your console.log(data) always happens because your Promise does resolve, it just does so after the test has finished, which is why the assertion fails.

By wrapping it in a setTimeout you create another event in the loop, which allows your Promise to resolve before the test finishes, meaning that your assertion will now pass.

This is a fairly common problem when unit testing asynchronous code. Often resolved in wrapping the assertions in setImmediate and calling done from the callback of setImmediate.

https://stackoverflow.com/a/43855794/6024903

score 1 · Answer 3 · answered May 08 '20 at 19:58

1

I ran into a similar problem with a spy and using await Promise.all(spy.returnValues)worked fine for me. This resolves all the promises and afterwards I can check spy.called.

answered May 08 '20 at 19:58

Elias

515
5
10

sinon spy is not called in a stub with async function

3 Answers3

Linked