How to unit test a function that uses the new Angular 14's "inject" function?

Question

I've created a function that utilizes that new Angular 'inject' function. Since the inject function can be used only when initializing a class (or factory) that is part of the dependency injection tree, this function is meant to be used in the constructor of a component / service.

I want to unit test this function with mock dependencies. The problem is I can't just call it in unit tests, because it will be called in an incorrect context. I can create a component / service just for the unit test purposes but it feels like too much boilerplate to test a simple function.

Is there a recommended way of doing this?

@E.Maggini I guess the only options are probably create a component, create a service, or create a factory provider. — Shachar Har-Shuv, Mar 17 '23 at 20:57

score 1 · Answer 1 · answered Mar 17 '23 at 17:41

You could use it as a factory in TestBed provider, and assert against the provided value.


// this is the function we will be testing
function getPlatformName() {
  const platformId = inject(PLATFORM_ID); // uses inject()
  return isPlatformBrowser(platformId) ? "BROWSER" : "SERVER";
}

describe("getPlatformName", () => {
  it("supports browser", () => {
    TestBed.configureTestingModule({
      // provide an arbitrary token, with our fn as a factory
      providers: [{ provide: "platformName", useFactory: getPlatformName }],
    });

    expect(TestBed.inject("platformName" as any)).toEqual("BROWSER");
  });

  it("supports server", () => {
    TestBed.configureTestingModule({
      providers: [
        { provide: PLATFORM_ID, useValue: "server" },
        { provide: "platformName", useFactory: getPlatformName },
      ],
    });

    expect(TestBed.inject("platformName" as any)).toEqual("SERVER");
  });
});

If you're verify side effects and not a return value, you still do the same (use as a factory, then TestBed.inject()). After that you can assert on mocks or whatever side effects it was supposed to perform.

Yeah I thought about it... but it still feels like a work around. I guess there isn't really an API for this. — Shachar Har-Shuv, Mar 17 '23 at 20:58

score 1 · Accepted Answer · edited Jun 01 '23 at 01:31

I know it's been a while, but I finally thought of a solution that is elegant enough to be the standard way of doing it.

Let's assume the function you want to test is myInjectionFunction:

// This is a utility function you can put in a shared place and use it whenever you want
function useInjectionFunction<GArgs extends any[], GReturn>(injectionFunction: (...args: GArgs) => GReturn, injector: Injector) {
  const token = new InjectionToken<GReturn>(injectionFunction.name);
  return (...args: GArgs) => Injector.create({
    parent: injector,
    providers: [
      {
        provide: token,
        useFactory: () => {
          return injectionFunction(...args);
        },
      },
    ],
  }).get(token)
}

describe('My Test suite', () => {
  let myFunction: typeof myInjectionFunction;

  beforeEach(() => {
    TestBed.configureTestingModule({
      // configure your providers here
    });

    myFunction = useInjectionFunction(hasFeatureFlag, TestBed.get(Injector));
  });

  it('should work', () => {
    // call "myFunction" regularly to test it
  });
});

Leaving it here if anyone wants to use it.

How to unit test a function that uses the new Angular 14's "inject" function?

2 Answers2