Error when executing test "Failed to fetch dynamically imported module"

[PRK0001]

We are trying to replace karma by web-test-runner but I have the following errors when I am launching tests:

after running the browser in debug mode ,following errors had been displayed:

Versions: "@esm-bundle/chai": "4.3.4", "@web/test-runner": "^0.18.0", "@web/test-runner-chrome": "^0.5.9",

Web test runner config:

import { esbuildPlugin } from '@web/dev-server-esbuild'; import { jasmineTestRunnerConfig } from 'web-test-runner-jasmine'; export default ({ ...jasmineTestRunnerConfig(),

nodeResolve: true, files: ['./test/*.spec.ts'], browsers: ["Chrome_headless"], customLaunchers: { 'Chrome_headless': { base: 'Chrome', flags: [ '--no-sandbox', ] }, }, plugins: [esbuildPlugin({ ts: true, json: true, target: 'auto', sourceMap: true })] });

Webpack config:

const path = require('path'); module.exports = { mode: 'development', entry: { PowerBIEmbedTest: path.resolve('test/PowerBIEmbed.spec.tsx'), utilsTest: path.resolve('test/utils.spec.ts'), }, output: { path: path.resolve('compiledTests'), filename: '[name].spec.js' }, devtool: 'source-map', module: { rules: [ { test: /.ts(x)?$/, loader: 'ts-loader', options: { configFile: path.resolve('config/test/tsconfig.json') }, exclude: /node_modules/ }, ] }, resolve: { extensions: [ '.tsx', '.ts', '.js' ] }, };

[gethari]

did you solve this @PRK0001 ? if so please share your solution ?

[PRK0001]

no

[electrovir]

This happens to me randomly and makes my tests quite flaky.

[skullpsg]

It is happening for me consistently. Does it Fixed?

[enkelmedia]

Struggled for many hours to get this to work with my Vite project, gave this a try https://github.com/remcovaes/web-test-runner-vite-plugin and things magically worked in less than 1 minute.

This also means that my import maps from tsconfig is reused so that I don't have to duplicate them.

[bashmish]

Vite can do a lot of non-standard code transformations automatically WDS does not do that by default, which is a conscious choice to keep things close to browsers standards I'm not sure everyone in this thread is having the same issue, even though the logs show the same, it can be just some dependency what WDS can't not process because it's not standard ESM, or not even a JS file (CSS imports and such) ideal we need more input, like a repository where this can be reproduced, to investigate each particular case and check if it's a bug on our side or just a non-standard dependency for which we can recommend smth on an individual basis

[electrovir]

I am now getting this error consistently with @web/dev-server-rollup version 0.6.2. Version 0.6.1 does not have this problem. For some reason, 0.6.2 is trying to resolve some package imports (like import {whatever} from 'package-name';) from way outside of my repository (the path does not even include a node_modules path).

[RobbyRabbitman]

In my case, the setup is lit, vite and wtr with the https://github.com/remcovaes/web-test-runner-vite-plugin.

I think the problem in my case is that the url is not percent-encoded.

// hdi-form-field.ts
import styles from './hdi-form-field.scss?inline';

@customElement('hdi-form-field')
export class HdiFormField extends FormField {
  static override styles = unsafeCSS(styles);
}

relevant output line

// hdi-form-field.js
import styles from "./hdi-form-field.scss?inl.js";

🚧 404 network requests:

• dist/test-out-wtr/hdi/web/components/form-field/hdi-form-field.scss?inl.js

Network Tab while debugging: http://localhost:8000/dist/test-out-wtr/hdi/web/components/form-field/hdi-form-field.scss?inl.js => 404

When GET requesting "http://localhost:8000/dist/test-out-wtr/hdi/web/components/form-field/hdi-form-field.scss%3finl.js", the file is returned.

Changing the file name in the output also works