Aurelia testing components with transient dependencies never uses a mock

Question

We are using the aurelia component testing as defined here (with jest): https://aurelia.io/docs/testing/components#testing-a-custom-element

The component we are testing has a transient dependency. We are creating a mock for this dependency but when we run the tests using au jest, the real one always gets injected by the DI container and never the mock.

Here is the Transient service:

import { transient } from "aurelia-framework";

@transient()
export class ItemService {
  constructor() {
  }

  getItems(): void {
    console.log('real item service');
  }
}

Here is the 'Mock' service (we have also tried using jest mocks but we get the same result):

import { transient } from "aurelia-dependency-injection";

@transient()
export class MockItemService{
  getItems():void {
    console.log('mock item service');
  }
}

Here is the component under test:

import {ItemService} from "../services/item-service";
import { autoinject } from "aurelia-dependency-injection";

@autoinject()
export class TestElement {
  constructor(private _itemService: ItemService) {

  }

  attached(): void {
    this._itemService.getItems();
  }
}

Here is the spec file:

import {TestElement} from "../../src/resources/elements/test-element";
import {ComponentTester, StageComponent} from "aurelia-testing";
import {ItemService} from "../../src/resources/services/item-service";
import {MockItemService} from "./mock-item-service";
import {bootstrap} from "aurelia-bootstrapper";

describe('test element', () => {
  let testElement;
  const path: string = '../../src/resources/elements/test-element';

  beforeEach(() => {
    testElement = StageComponent.withResources(path).inView(`<test-element></test-element>`);

    testElement.bootstrap(aurelia => {
      aurelia.use.standardConfiguration();
      aurelia.container.registerTransient(ItemService, MockItemService);
    });
  });

  afterEach(() => {
    testElement.dispose();
  });

  it('should call mock item service', async() => {
    await testElement.create(bootstrap);
    expect(testElement).toBeTruthy();
  })
});

But every-time the test is run, the console logs out the real service and not the mock. I have traced this to the aurelia-dependency-injection.js in the Container.prototype.get function. The issue seems to be around this section of code:

var registration = aureliaMetadata.metadata.get(aureliaMetadata.metadata.registration, key);
if (registration === undefined) {
    return this.parent._get(key);
} 

The registration object seems to be a bit odd, if it was undefined, the code would work as the correct dependency is registered on the parent and it would get the mock dependency. However, it is not undefined therefore it registers the real service in the DI container on this line:

return registration.registerResolver(this, key, key).get(this, key);

The registration object looks like this:

registration = TransientRegistration {_key = undefined}

Is this a bug in aurelia or is there something wrong with what I am doing?

Many Thanks

p.s. GitHub repo here to replicate the issue: https://github.com/Magrangs/aurelia-transient-dependency-issue

p.p.s Forked the DI container repo and added a quick fix which would fix my particular issue but not sure what the knock on effects would be. If a member of the aurelia team could check, that would be good:

https://github.com/Magrangs/dependency-injection/commit/56c7d96a496e76f330a1fc3f9c4d62700b9ed596

Answer 1

After talking to Rob Eisenberg on the issue there is a workaround for this problem. Firstly remove the @transient decorator on the class and then in your app start (usually main.ts) register the class there as a transient.

See the thread here: https://github.com/Magrangs/dependency-injection/commit/56c7d96a496e76f330a1fc3f9c4d62700b9ed596

I have also updated the repo posted above: https://github.com/Magrangs/aurelia-transient-dependency-issue

to include the fix.

Hopefully this will help any other devs facing the same issue.