Does not work with @web/test-runner-commands

[Pajn]

@web/test-runner-commands enables more advanced plugins like @web/test-runner-visual-regression and it integrates with test-runner by importing a file served by the test-runner server and thus must not be handled by Vite. In snowpack this was easily solved by marking it as an externalPackage but I'm not seeing a similar config property for Vite. https://github.com/snowpackjs/snowpack/pull/1737/files

The logs when trying to use visual regression plugin:

Running tests...

11:19:46 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@web/test-runner-commands/browser/commands.mjs:2:43: error: Could not resolve "/__web-dev-server__web-socket.js"
    at failureErrorWithLog (/project/node_modules/esbuild/lib/main.js:1466:15)
    at /project/node_modules/esbuild/lib/main.js:1148:28
    at runOnEndCallbacks (/project/node_modules/esbuild/lib/main.js:938:63)
    at buildResponseToResult (/project/node_modules/esbuild/lib/main.js:1146:7)
    at /project/node_modules/esbuild/lib/main.js:1253:14
    at /project/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/project/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/project/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:376:20)
    at addChunk (internal/streams/readable.js:309:12)
11:19:47 AM [vite] Internal server error: Failed to resolve import "/__web-dev-server__web-socket.js" from "node_modules/@web/test-runner-commands/browser/commands.mjs". Does the file exist?
  Plugin: vite:import-analysis
  File: /project/node_modules/@web/test-runner-commands/browser/commands.mjs
  1  |  /* eslint-env browser, es2020 */
  2  |  import { sendMessageWaitForResponse } from '/__web-dev-server__web-socket.js';
     |                                              ^
  3  |  
  4  |  const PARAM_SESSION_ID = 'wtr-session-id';
      at formatError (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:44553:46)
      at TransformContext.error (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:44549:19)
      at normalizeUrl (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:69541:26)
      at async TransformContext.transform (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:69674:57)
      at async Object.transform (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:44751:30)
      at async transformRequest (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:59118:29)
      at async viteTransformMiddleware (/project/node_modules/vite/dist/node/chunks/dep-cb562f8f.js:59256:32)

[betaboon]

could you provide a repro ?

[Pajn]

Sure, here https://github.com/Pajn/vite-web-test-runner-commands

I created a vanilla project with yarn create @vitejs/app and added the bare minimum to set up tests. You'll see the above error when you try to run yarn test.

This isn't specific to @web/test-runner-visual-reqression but happens to everything using @web/test-runner-commands however that requires more code to use directly and I thought the repro is probably better with as little custom code as possible.

[Pajn]

When rereading I can see that my inital post was a bit messy. Just trying to say the same thing here but hopefully more clearly :)

@web/test-runner-commands imports a file named /__web-dev-server__web-socket.js. This file does not exist on disk, it is generated on the fly by @web/dev-server so we must somehow find a way to make Vite not care about this import and ship it as-is to the browser, so that it can fetch it from @web/dev-server.

[IanVS]

I've hit this as well. It occurs as soon as I add @web/test-runner-commands to my optimizeDeps.include list. I haven't found a way to exclude it via optimizeDeps.exclude so far...

Edit: exclude: ['/__web-dev-server__web-socket.js'] lets the pre-bundling execute successfully, but then the test itself blows up with:

[plugin:vite:import-analysis] Failed to resolve import "/__web-dev-server__web-socket.js" from "node_modules/.cache/vite/@web_test-runner-commands.js?v=68191bf7". Does the file exist?

It looks like a few other plugins have been updated to ignore these imports (https://github.com/modernweb-dev/web/issues/725, https://github.com/modernweb-dev/web/pull/1079), but I'm not sure where/how this plugin could do the same.