在 Angular 中模拟静态导入的类

Question

I am using facebook SDK in my Angular application for which I am importing the FB SDK class like below

import MiniAppSDKClient from 'src/clients/MiniAppSDKClient';

After this I am using below method of that class to get some information

  ngOnInit(): void {
    // Get data from Facebook SDK
    const entryPointData = MiniAppSDKClient.getEntryPointData();
  }

During testing I want to mock the getEntryPointData method of that class. Can't find any way to mock above class or that particular method of that class. Any help is appreciated.

Thank you!

Answer 1

The right way is to update the code so MiniAppSDKClient should be injected.

However, if you cannot change the code, you can use beforeEach and afterEach like that:

describe('suite', () => {
  let getEntryPointDataBackup;

  beforeEach(() => getEntryPointDataBackup = MiniAppSDKClient.getEntryPointData);
  afterEach(() => MiniAppSDKClient.getEntryPointData = getEntryPointDataBackup);

  // your normal beforeEach here.

  it('test', () => {
    MiniAppSDKClient.getEntryPointData = () => myMockEntryPointData;

    // the rest of your code.
  });
});

The right way

create a root token which provides MiniAppSDKClient and simply mock it in TestBed:

export const MINI_APP_SDK_CLIENT = new InjectionToken('MINI_APP_SDK_CLIENT', {
  factory: () => MiniAppSDKClient,
  providedIn: 'root',
});

Your component / directive / service should use DI:

class TargetComponent implements OnInit {
  constructor(@Inject(MINI_APP_SDK_CLIENT) client: typeof MiniAppSDKClient) {}

  ngOnInit(): void {
    // Get data from Facebook SDK
    const entryPointData = this.client.getEntryPointData();
  }
}

its test:

describe('suite', () => {
  beforeEach(() => TestBed.configureTestingModule({
    declarations: [TargetComponent],
    providers: [{
      provide: MINI_APP_SDK_CLIENT,
      useValue: {
        getEntryPointData: () => {
          return myFakeEntryPointData;
        },
      },
    }],
  }).compileComponents());
});

Profit!