Support running karma-esm from a subdir

Hi again 👋

I’ve dived into the karma-esm world and found the actual issue why Stryker isn’t working with the this plugin.

It seems that it isn’t possible to run karma-esm from within in a sub dir. I’ve created an example repo here.

Repro

git clone [e-mail]:nicojs/karma-esm-from-a-subdir.git
cd karma-esm-from-a-subdir
npm i
cd foo/bar
npx karma start

This error is logged:

Uncaught TypeError: Failed to resolve module specifier "@open-wc/testing-helpers/index.js". Relative references must start with either "/", "./", or "../".
  at http://localhost:9876/context.html:0:0

Explanation

My dir structure is:

root
├── foo
│   └── bar
│       ├── node_modules (symlink -> ../../node_modules)
│       ├── karma.conf.js
│       ├── src
│       │   └── wc-test.js
│       ├── test
│       │   └── wc-test.test.js
│       └── karma.conf.js
└── node_modules

I figured out that a babel plugin is used to transform import statements to their true server path here:

https://github.com/open-wc/open-wc/blob/01445cfbde3d720f61e0d354fa35f32abbb91dcb/packages/karma-esm/src/forked-babel-plugin-bare-import-rewrite.js#L92-L119

This piece of code transforms import { html, fixture, expect } from '@open-wc/testing' to import { html, fixture, expect } from '../../../node_modules/@open-wc/testing'. This path is correct relative to the test file on the server. The problem is that the browser cannot make sense of it. The file that loads it has this URL: base/test/wc-test.test.js, so the url would be base/test/../../../node_modules/@open-wc/testing which is not supported.

Proposed solution

I’ve been able to fix this issue by allowing for symlinked node modules. I did this by changing two lines of code:

https://github.com/open-wc/open-wc/blob/01445cfbde3d720f61e0d354fa35f32abbb91dcb/packages/karma-esm/src/forked-babel-plugin-bare-import-rewrite.js#L79

Change to result (remove require.resolve)

https://github.com/open-wc/open-wc/blob/01445cfbde3d720f61e0d354fa35f32abbb91dcb/packages/karma-esm/src/forked-babel-plugin-bare-import-rewrite.js#L71

Change to preserveSymlinks: true

Having those 2 changes in place, '@open-wc/testing' is now transformed to '../node_modules/@open-wc/testing', which works (because the node_modules are symlinked there). This is because of change 1. Subsequent imports from inside the symlinked node_modules also work because of the preserveSymlinks flag.

The question is, would it be OK to change these 2 things? I’ve seen in the history there is some back-and-forth in this file and the karma-esm package doens’t seem to have any tests associated with it.

[LarsDenBakker]

This is still something we want to support

[ciskavs]

Hi,

I am trying to use Stryker for mutation testing our webcomponents, but run into the same issue: it fails on a dynamic import with the error “TypeError: Failed to resolve module specifier ‘my-component/elements/my-code.js’”. From this issue it is not clear to me what the solution was. Do you have any suggestions on how to fix it?