Description
Summary
It looks like files served via the virtual path /__web-test-runner__/test-framework
always have the response header Content-Type: application/javascript; charset=utf-8
, which frustrates fetching resources of a different type.
Background
I'm trying to write my own test framework that uses Jasmine. I want my framework script to load Jasmine standalone assets from a location relative to the framework script, so I'm doing that via import.meta.url
. Because the framework script is loaded with a special virtual path, so are the Jasmine assets. The problem is that all these assets are assigned a Content-Type
of application/javascript
but not all of them are scripts.
Test Case
To reproduce the issue:
- Clone this project: https://github.com/rhashimoto/framework-mime
npm install
npx web-test-runner --manual
- Open a browser on the manual testing URL.
- Open the browser Dev Tools.
- Click on the test file link.
- Look at the Dev Tools Network tab to see the details of the loaded files.
Expected
The custom framework dynamically adds HTML elements to the document, two link
elements and two script
elements at the bottom of the document head
.
The Network tab should show the four files successfully loaded by the framework:
- jasmine_favicon.png - image/png
- jasmine.css - text/css
- jasmine.js - application/javascript
- jasmine-html - application/javascript
Actual
The PNG file doesn't load at all, with the server returning a 500 status, but if you look at the server response headers it contains Content-Type: application/javascript; charset=utf-8
, which isn't correct either for an image or an error message.
The CSS file is returned but it also has the wrong Content-Type
, which apparently prevents it from being used in Chrome and Firefox (Safari doesn't seem to care).
Other Notes
If I change the framework code not to use import.meta.url
like this:
--- a/custom-framework.js
+++ b/custom-framework.js
@@ -4,7 +4,7 @@ import {
sessionFailed,
} from '@web/test-runner-core/browser/session.js';
-const STANDALONE_PATH = new URL('./jasmine-standalone/lib/jasmine-3.7.1', import.meta.url).href;
+const STANDALONE_PATH = './jasmine-standalone/lib/jasmine-3.7.1';
This works so both the PNG and CSS are loaded properly without the virtual path, but this makes it harder to put the custom framework in its own module to share across projects.