How to configure a proxy for Vitest

[mistercoffee66]

Hi,

My vite.config.js is

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react-swc';
import sass from 'sass';

export default defineConfig({
    server: {
        proxy:{'/api': 'http://localhost:3000'}
    },
    build: {
        outDir: './public/build',
    },
    plugins: [react()],
    css: {
        preprocessorOptions: {
            scss: {
                implementation: sass,
            },
        },
    },
    test: {
        environment: 'jsdom',
        globals: true,
        setupFiles: './tests/setup.js',
    },
});

When running vite, this works:

// somefile.jsx
await fetch('/api') // fetches from http://localhost:3000/api

When running vitest to test the component above, it's trying to req '/api' and of course failing.

I've tried adding the same server config object to the test object like so:

    test: {
        environment: 'jsdom',
        globals: true,
        setupFiles: './tests/setup.js',
        server: {
            proxy:{'/api': 'http://localhost:3000'}
        },
    },

with no luck.

Any help appreciated, thanks!

EDIT: The error I'm getting in vitest is TypeError: Failed to parse URL from /api.

[hi-ogawa]

fetch("/api") is meant to run on browser where url origin is automatically inferred, so it's not possible on NodeJS and server.proxy is not meant to work on Vitest.
You probably need to go with mocking fetch during tests.

[mistercoffee66]

Thanks, yes, I know that won't work on node, that's why I'm using a proxy.

When you say proxies are "not meant" to work in Vitest, do you mean that's by design? Or is it just something that was never implemented?

[sheremet-va]

Node.js doesn't have the concept of baseURL, so when you call fetch, it doesn't know that the origin is localhost. The browser just automatically resolves it as new URL('/api', location)

[mistercoffee66]

Yeah, I think you're misreading my question. I'm not trying to use a baseURL in Node. I'm trying to replace /api with http://localhost:3000 when running tests, identical to how proxy let's me do this in Vite dev mode.

I am testing a jsx file that looks like my sample above. In Vite dev mode, the proxy effectively replaces the url. Since I am testing this file, I want to test under the same conditions, like any other test runner.

Now, if Vitest is trying to simulate a browser in Nodejs, the same proxy won't work, that's true. But there should be a way to at least do a string substitution so I can actually test the code that works in dev mode.

[sheremet-va]

What I am trying to tell you is that you cannot do fetch('/api') in Node.js in any way for the reasons I explained unless you global fetch yourself.

In browser what your fetch('/api') does is call http://localhost/api which triggers a proxy - but in Node.js there is no base URL that exists in the browser, and since /api is invalid URL, it fails.

Vitest doesn't simulate browser, environments provide their own APIs that mimic browser.

[mistercoffee66]

What I am trying to tell you is that you cannot do fetch('/api') in Node.js in any way

I'm not arguing that point, as I explained above. That is not what I am trying to do. In any case, I'll do a string substitution of some sort to point fetch to the correct endpoint during testing. Cheers.

[dennemark]

Hi, I came here because of the new browser mode.
The answer should not hold true for browser mode right?
I use fastify/vite and have a setup where backend and frontend share same code.
Now i would like to do frontend tests by also use the backend for this for e2e tests.
Vitest runs the frontend on port 63315, my app runs on 3000. If i do this:

server: {
        proxy:{'/api': 'http://localhost:3000'}
    },

or

...
'/api': {
               target: 'http://localhost:3000',
               changeOrigin: true,
               secure: false,
             },

my requests still do not seem to go through.