Test Lit-element Webcomponent With Karma

I am trying to create a blank project, like a template, using lit-html. I wanted to also add some testing capabilities, so i have been trying to get it to work with Karma. I can ru

Solution 1:

The error message is due to a module referenced by /test/example.test.js - the error message is a little deceptive...

Failed to fetch dynamically imported module

The clue is that you didn't dynamically import (that's when you use const module = await import('path') and you'd get an exception on that line if it failed) - you statically imported. That error message is not because it couldn't find http://localhost:9876/base/test/example.test.js, it's that it couldn't find a nested reference in that file.

At a guess example.test.js contains an import with a relative path that isn't served:

import * as testFramework from './testFramework';

export default class MyComponent...

That works in TypeScript and linting tools because it can resolve ./testFramework to ./testFramework.d.ts, ./node_modules/@types/testFramework.d.ts or whatever type lookup you're using.

However, in the browser it doesn't know you actually want ./testFramework.js or ./testFramework/index.js, it requests ./testFramework directly, gets a 404, and then gives you that error for the calling component.

In short:

• If you statically import (i.e. with import * from ...)
• But you get

Failed to fetch dynamically imported module: filename.js

• The error is actually with another static import in filename.js, not getting filename.js itself.

The network tab will point you at which dependency is the problem, as it will be a 404, and the fix is either resolve these imports with your build tools, or put the full relative path to the .js file in your source.