Karma, Qunit, Typescript, UI5 does not work when using "import" statement

Question

Iam trying to set up my tests to run with Qunit, Karma UI5, and Typescript but I seem to have some probable's with module resolution.

This is my tsconfig

{
"compilerOptions": {
    "target": "es2015",
    "module": "CommonJS",
    "skipLibCheck": true,
    "preserveConstEnums": true,
    "sourceMap": false,
    "allowJs": true,
    "strict": true,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "rootDir": "./webapp",
    "outDir": "./dist",
    "baseUrl": "./",
    "moduleResolution": "node",
    "typeRoots": ["./node_modules/@types", "./node_modules/@sapui5/ts-types-esm", "**/*.d.ts"],
    "paths": {
        "myproject/*": ["./webapp/*", "./*"]
    }
},
"include": ["./webapp/**/*"]

}

this is my karma.conf

module.exports = function (config) {
    config.set({
        frameworks: ["ui5", "karma-typescript"],
        ui5: {
            testpage: "webapp/test/unit/unitTests.qunit.html",
            configPath: "ui5-local-commons-ci.yaml"
        },
        karmaTypescriptConfig: {
            compilerOptions: {
                module: "commonjs"
            },
            tsconfig: "./tsconfig.json"
        },
        preprocessors: {
            "**/*.ts": "karma-typescript",
            "**/**/*.ts": "karma-typescript"
        },
        browsers: ["Chrome"],
        browserConsoleLogOptions: {
            level: "error"
        }
    });
};

And this is the error I'am getting

Error: Cannot find module 'sap/ui/Device' from '/myproject/webapp/Component.js'

I do however have these modules and the code will compile and work, this issue appears only when trying to run it in karma

Answer 1

After more investigation it was found that the issue lies in the fact ui5 and typescript compilation had a mismatch. The final fix was removing the karma-typescript package and instead running the unit tests on built dist folder. Its not ideal but works for now, I will update this if I find a better solution