Cannot locate source files in spec - Error during loading: Uncaught Error: An error occurred while loading /__spec__/...

[LeeGDavis]

When running a spec I receive the following error:

GET http://localhost:8888/__spec__/browser.mjs net::ERR_ABORTED 404 (Not Found)
GET http://localhost:8888/__spec__/background.mjs net::ERR_ABORTED 404 (Not Found)
caught Error: An error occurred while loading /__spec__/browser_spec.mjs. Check the browser console for details.
    at HTMLScriptElement.<anonymous> (loadEsModule.js:15:11)

This appears due to its inability to find the two source files in the spec:

browser_spec.mjs

import { Browser } from './browser.mjs';
import { Background } from './background.mjs';

describe('Browser', function() {
...

jasmine-browser.json

{
  "srcDir": "source",
  "srcFiles": [],
  "specDir": "spec/unit/browser",
  "specFiles": [
    "**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "stopOnSpecFailure": false,
    "random": false
  },
  "browser": {
    "name": "chrome"
  }
}

Node: v16.19.1 "jasmine-browser-runner": "^1.3.1" "jasmine-core": "^4.6.0"

I've not used jasmine-browser-runner previously, so this is likely something really idiotic on my part.

[LeeGDavis]

I got a little further inverting the spec and src dirs, however running into a new problem with source file deps not resolving. I likely need to test with my distributed file, as this won't know how to load deps like this.

caught TypeError: Failed to resolve module specifier "eventemitter2". Relative references must start with either "/", "./", or "../".

jasmine-browser.json

{
  "srcDir": "source",
  "srcFiles": [],
  "specDir": ".",
  "specFiles": [
    "spec/unit/browser/**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "spec/unit/helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "stopOnSpecFailure": false,
    "random": false
  },
  "browser": {
    "name": "chrome"
  }
}

[LeeGDavis]

Looks like I'm running into the scenario outlined in https://github.com/jasmine/jasmine-browser-runner/issues/28.

[wraiford]

Looks like I'm running into the scenario outlined in #28.

I wondered if that might be it but I didn't understand your second update. I have a PR here for basic import map support. In the meantime you can check if it will resolve your issue by editing your ejs template mentioned in that issue's workaround section.

[wraiford]

Also perhaps you could clone that PRs branch and see if it works for your project. Now would be a great time to test the code and you would be a big help by doing so imo!

[LeeGDavis]

Thanks @wraiford. I did add the import map and it resolved my issue (with the addition of making an esm version of eventemitter2 😄).

I should be able to take your PR for a spin tomorrow and provide some feedback.

[sgravrock]

This is great. We don't often get this kind of real-world validation of a feature before it ships.

[LeeGDavis]

@wraiford @sgravrock that new feature works really well. I even tried a bit of a janky setup with a locally modified "eventemitter2" piggy backing on the local server. Please let me know if there is anything else I can test on this. I really look forward to it getting merged and released!

jasmine-browser.json - Both examples work fine.

{
  "srcDir": "source",
  "srcFiles": [],
  "specDir": ".",
  "specFiles": [
    "spec/unit/browser/**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "spec/unit/helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "stopOnSpecFailure": false,
    "random": false
  },
  "browser": {
    "name": "headlessChrome"
  },
  "importMap": {
    "imports": {
      "eventemitter2": "./spec/unit/browser/eventemitter2.esm.js",
      "underscore": "https://unpkg.com/underscore@1.13.6/underscore-esm.js"
    }
  }
}

{
  "srcDir": "source",
  "srcFiles": [],
  "specDir": ".",
  "specFiles": [
    "spec/unit/browser/**/*[sS]pec.?(m)js"
  ],
  "helpers": [
    "spec/unit/helpers/**/*.?(m)js"
  ],
  "env": {
    "stopSpecOnExpectationFailure": false,
    "stopOnSpecFailure": false,
    "random": false
  },
  "browser": {
    "name": "headlessChrome"
  },
  "port": 61325,
  "importMap": {
    "imports": {
      "eventemitter2": "http://localhost:61325/__spec__/spec/unit/browser/eventemitter2.esm.js",
      "underscore": "https://unpkg.com/underscore@1.13.6/underscore-esm.js"
    }
  }
}

[sgravrock]

@LeeGDavis can you share what your import statements that import src files from spec files looked like in both cases? I'm trying to get a sense of which of those two configurations would be the best one to recommend.

[LeeGDavis]

Source File:

import EventEmitter2 from "eventemitter2";
import { zip } from 'underscore';

export class EventBridge extends EventEmitter2 {
...

Spec File: browser_spec.mjs --imports--> background.mjs --imports--> eventbridge.mjs

import { Browser } from '../../../source/browser.mjs';
import { Background } from '../../../source/background.mjs';

describe('Browser', function() {
...

EventEmitter2 is a bit of a weird case as rollup.js takes care of the bundling of the distributable file even though it is not technically ESM supported out of the gate. That is why I had to do that weird case with a paired back eventemitter2 locally that supports ESM. The imports in both cases were the same, it was just a curiosity if I could use the local server to present the file in the import map.

[sgravrock]

Thanks @wraiford and @LeeGDavis . I'll release this Real Soon Now™.

[sgravrock]

This is released in 1.4.0 and 2.0.0-beta.1.

[LeeGDavis]

We are using 1.4.0 successfully right now! Thanks again @sgravrock and @wraiford !

[JLGuerratr]

Thank's, I've been on this problem and this fixed @LeeGDavis