vitest-dev / vitest

Next generation testing framework powered by Vite.
https://vitest.dev
MIT License
12.95k stars 1.16k forks source link

Bug: browser.testerScripts does not support external script URLs properly #6768

Open valentinpalkovic opened 1 day ago

valentinpalkovic commented 1 day ago

Describe the bug

I am trying to follow the example provided on the Vitest homepage for browser.testerScripts:

browser: {
  testerScripts: [
    {
      src: 'https://code.jquery.com/jquery-3.3.1.min.js',
    },
  ],
},

According to the documentation, browser.testerScripts is a custom script injection feature for the browser environment. The script source and content should be processed by Vite plugins, and this feature seems ideal for injecting polyfills or external libraries required for certain browser tests.

However, when I attempt to inject an external script (in this case, jQuery), the URL is transformed to:

http://localhost:5173/@fs//https://code.jquery.com/jquery-3.3.1.min.js

This results in a failed request with a 404 error, as the transformation to the local server address is incorrect for external URLs.

Expected behaviour: External URLs provided in browser.testerScripts should not be transformed by Vite or should be handled correctly so that the script can be loaded and injected into the browser test environment.

Reproduction

  1. Configure browser.testerScripts with an external script URL, e.g., jQuery:
    browser: {
    testerScripts: [
    {
      src: 'https://code.jquery.com/jquery-3.3.1.min.js',
    },
    ],
    },
  2. Run Vitest in the browser.
  3. Check the network tab for the failed script request with the transformed URL.

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 3.51 GB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.3 - ~/.nvm/versions/node/v18.20.3/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.3/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.3/bin/npm
    pnpm: 9.5.0 - ~/Library/pnpm/pnpm
    bun: 1.1.27 - ~/.bun/bin/bun
  Browsers:
    Chrome: 129.0.6668.101
    Edge: 130.0.2849.46
    Safari: 17.4.1
  npmPackages:
    @vitejs/plugin-vue: ^5.0.3 => 5.0.3 
    @vitest/browser: ^2.1.3 => 2.1.3 
    vite: ^5.0.12 => 5.0.12 
    vitest: ^2.1.3 => 2.1.3

Used Package Manager

pnpm

Validations

sheremet-va commented 1 day ago

True, it was added specifically for that. In the next patch, the option will be deprecated and instead, Vitest will use transformIndexHtml (see https://github.com/vitest-dev/vitest/pull/6725), so the fix for the future is to inject it in the plugin.