TypeError: Failed to fetch dynamically imported module: http://localhost:8000/...

Open andyjessop opened this issue 2 years ago • 0 comments

I'm trying to set this up in the simplest way, but I can't get past this error. Now, as this is inside an Nx repo, I suppose there could be resolving issues, however, the error message is not being any help really. It says to start in debug mode, which I am. And there are no logs to check. How should I go about debugging it from here?

Error:

> nx run browser:test --debug

> [email protected] test
> web-test-runner --debug
Chromium: |██████████████████████████████| 0/2 test files | 0 passed, 0 failed
Running tests...
Running 2 test files...
../../packages/browser/second.test.ts:
 🚧 Browser logs:
      TypeError: Failed to fetch dynamically imported module: http://localhost:8000/packages/browser/second.test.ts?wtr-session-id=8YZDG49FdEvozhkRjlihu
 🚧 404 network requests:
    - packages/browser/second.test.ts?wtr-session-id=8YZDG49FdEvozhkRjlihu
../../packages/browser/first.test.ts:
 🚧 Browser logs:
      TypeError: Failed to fetch dynamically imported module: http://localhost:8000/packages/browser/first.test.ts?wtr-session-id=P-xiZ0Jkhezr6Qdf4Qd-8
 🚧 404 network requests:
    - packages/browser/first.test.ts?wtr-session-id=P-xiZ0Jkhezr6Qdf4Qd-8
 ❌ Could not import your test module. Check the browser logs or open the browser in debug mode for more information.
Chromium: |██████████████████████████████| 2/2 test files | 0 passed, 0 failed
Error while running tests.
npm ERR! Lifecycle script `test` failed with error:
npm ERR! Error: command failed
npm ERR!   in workspace: [email protected]
npm ERR!   at location: /Users/andy/dev/apps/browser

web-test-runner.config.mjs (I've confirmed that the tsconfig path is correct here):

import { esbuildPlugin } from '@web/dev-server-esbuild';
import { playwrightLauncher } from '@web/test-runner-playwright';

import { fileURLToPath } from 'url';

const tests = [
  '../../packages/browser/first.test.ts',
  '../../packages/browser/second.test.ts',
];

export default {
  browsers: [
    playwrightLauncher({ product: 'chromium' }),
  ],
  concurrentBrowsers: 3,
  files: tests,
  nodeResolve: true,
  plugins: [
    esbuildPlugin({
      ts: true,
      tsconfig: fileURLToPath(new URL('../../tsconfig.json', import.meta.url)),
    }),
  ],
  rootDir: '.',
  testFramework: {
    config: {
      retries: 1,
      timeout: 3000,
    },
  },
  testRunnerHtml: (testFramework) => `
    <html lang="en-US">
      <head></head>
      <body>
        <script type="module" src="${testFramework}"></script>
      </body>
    </html>
  `,
};

Test files are both the same:

// packages/browser/first.test.ts
import chai from '@esm-bundle/chai';

function add(a: number, b: number): number {
  return a + b;
}

describe('myFunction', () => {
  it('adds two numbers together', () => {
    debugger;
    chai.expect(add(1, 2)).to.equal(3);
  });
});

Jan 08 '24 20:01 andyjessop