JS Testing: Sinon faking API response from other file?

125 Views Asked by At

My MainCreator file is running Sinon tests and I'm having an issue faking some calls when makeIndents is run. It's loading in an external class, HeaderCreator, and calling the function getHeaderCreds from it which is making a real API call.
Is there a way in my beforeEach of MainCreator that I can resolve/fake that external file's function api call?

MainCreator

import { HeaderCreator } from './Headers.js';


export class MainCreator {
     
    ///

    makeIndents() {
         const foo = new HeaderCreator();
         
         foo.getHeaderCreds();
    }
}

HeaderCreator

export class HeaderCreator {

    getHeaderCreds() {
      // config values; 

      const response = await fetch(`${baseURL}/v1/check`, config);
      const { results } = await response.json();
     
      return results;
}
1

There are 1 best solutions below

0
Lin Du On

If you test the makeIndents method of the MainCreator class, since the getHeaderCreds of the HeaderCreator class is the direct dependency, you'd better stub it instead of the fetch function.

I will treat the makeIndents method as a unit for testing, not makeIndents and getHeaderCreds. This means I will only care about and test the code logic inside makeIndents. I don't care about the code logic inside getHeaderCreds. Since getHeaderCreds has a side effect(network I/O), so I stub it and its return value.

According to the above strategy, if you test the getHeaderCreds method, you should stub the fetch function and its return value.

E.g.

Headers.ts:

const baseURL = 'http://localhost:3000';
const config = {};
export class HeaderCreator {
  async getHeaderCreds() {
    const response = await fetch(`${baseURL}/v1/check`, config);
    const { results } = await response.json();
    return results;
  }
}

MainCreator.ts:

import { HeaderCreator } from './Headers';

export class MainCreator {
  makeIndents() {
    const foo = new HeaderCreator();
    return foo.getHeaderCreds();
  }
}

MainCreator.test.ts:

import sinon from 'sinon';
import { MainCreator } from './MainCreator';
import { HeaderCreator } from './Headers';

describe('72710555', () => {
  it('should pass', async () => {
    sinon.stub(HeaderCreator.prototype, 'getHeaderCreds').resolves(['a', 'b']);
    const mainCreator = new MainCreator();
    const actual = await mainCreator.makeIndents();
    sinon.assert.match(actual, ['a', 'b']);
  });
});

Test result:

  72710555
    ✓ should pass


  1 passing (6ms)

----------------|---------|----------|---------|---------|-------------------
File            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------------|---------|----------|---------|---------|-------------------
All files       |      70 |      100 |      50 |      70 |                   
 Headers.ts     |      50 |      100 |       0 |      50 | 5-7               
 MainCreator.ts |     100 |      100 |     100 |     100 |                   
----------------|---------|----------|---------|---------|-------------------