Component element is invalid when using nodejs pal

[Richard Simpson]

I'm submitting a bug report

• Library Version:

    "aurelia-loader-nodejs": "^1.0.0",
    "aurelia-pal-nodejs": "^1.0.0-beta.1.0.0",
    "aurelia-testing": "^1.0.0-beta.2.0.1",
    "jest": "^19.0.2",

Please tell us about your environment:

• Operating System:
  Windows 10

• Node Version:
  v7.2.1

• Language:
  Typescript 2.2

Current behavior:

describe("ExampleThingCustomElement", () => {

  let component: ComponentTester;

  beforeEach(async () => {
    component = stage
      .withResources("../../src/example-thing")
      .inView('<example-thing route="test">Test</example-thing>');

    await component.create(<any> bootstrap);
  });

  it("should create element", async () => {
    expect(document.querySelector("example-example")).toBeDefined(); // passes
    //expect(component.element.tagName).toBe("NAV-LINK");  <-- Throws Error
   // component.element == null
  });
});

The custom element in question also has the following lines: this.element.classList.remove("class"), where element is getting @autoinject'd in. The issue is that the element that is getting injected is {}.

Expected behavior:
Both component.element and this.element where this.element is injected should be a valid element.

Jest setup file (basically c+p from aurelia/skeleton-navigation#714):

import "aurelia-polyfills";
import {Options} from "aurelia-loader-nodejs";
import {globalize} from "aurelia-pal-nodejs";
import * as path from "path";
Options.relativeToDir = path.join(__dirname, "unit");
globalize();

Package.json jest portion:

  "jest": {
    "modulePaths": [
      "<rootDir>/src",
      "<rootDir>/node_modules"
    ],
    "resetModules": false,
    "transform": {
      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/unit/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "setupFiles": [
      "<rootDir>/tests/unit-setup.ts"
    ],
    "testEnvironment": "node",
    "moduleNameMapper": {
      "aurelia-(.*)": "<rootDir>/node_modules/$1"
    },
    "globals": {
      "__TS_CONFIG__": "tests/test.tsconfig.json",
      "__TESTING__": true
    }
  },

[Rob Eisenberg]

I believe this is a problem with TypeScript. For some reason TS defines Element as an interface, which means that it doesn't correctly encode the Type metadata. As a result, the autoinject attribute and DI can't properly inject the right type. I'm not sure I fully understand why TS doesn't recognize the Element class instead. As a solution to this, I think you can use inject and list out the types.

[Richard Simpson]

The only problem with this is it works perfectly when actually running the application. And the component.element created by StageComponent is null.