Unable to run tests with Vite dev server

[sonicoder86]

I have a Vite dev server running on port 3000 with a functioning application. Running the e2e tests in a separate thread works fine. But together run by start-server-and-test it stucks after starting the Vite server.

• version 1.11.7
• platform MacOS
• expected behavior: Runs the tests after the dev server started.
• actual behavior: start-server-and-test hangs when Vite start the webserver. The server is up and running and the tests can be run in a separate terminal.

My package json setup:

  "scripts": {
    "start": "vite",
    "test:e2e:javascript": "start-server-and-test start http://localhost:3000 e2e:javascript",
    "e2e:javascript": "jest --config=jest.e2e.config.js e2e/javascript"
  }

Reproduction: In my https://github.com/blacksonic/vue-3-playground repository run: npm run test:e2e:javascript

[sonicoder86]

The error seems to be coming from the fact that Vite responds with 404 for HEAD requests

DEBUG=start-server-and-test gives these error logs

making HTTP(S) head request to url:http://localhost:3000/ ... HTTP(S) error for http://localhost:3000/ Error: Request failed with status code 404

I've switched to GET probing, but doesn't solve the issue. (http-get://localhost:3000)

I've narrowed it down to axios unable to send a successful request to the url...in a separate file axios.get('http://localhost:3000') fails with 404

[sonicoder86]

It turns out the problem is with the default Accept headers for Axios...Vite only accepts text/html, application/json and not text/plain.

vitejs/vite#1817

[github-actions]

🎉 This issue has been resolved in version 1.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[LeBenLeBen]

Is it correct that this still needs to use http-get to work? It doesn’t seem to work otherwise for me using Vite 2.0.5 and start-server-and-test 1.12.0.

I would gladly add a mention in addition to webpack-dev-server in the README if that’s the case.

[vertic4l]

We have Vite 3.2.2 and start-server-and-test 1.14 and the exact same issue. Tests start too early. Any tips how to solve this?

[vertic4l]

As a workaround we use to build it first, and then start-server-and-test preview http-get://localhost:4200/ testcafe-pipeline. Would be faster with the dev server but works for now.

[bahmutov]

I would suggest opening a new issue with reproduction and trying to see what the tool does via DEBUG=start-server-and-test

[vertic4l]

@bahmutov isn't it obvious?

When using vite dev server the following happens:

1. Dev Server starts and takes a moment to build
2. Test Starts immediately due to 200 Response from Server
3. Tests fails because Dev Server wasn't ready to serve the environment immediately

[bahmutov]

Well if this is so simple then it looks to be the Vue / Vite problem, no? They serve pages before they are ready I guess.

[gottfired]

It's not a vite problem but a problem with wait-onor rather Node (see jeffbski/wait-on#109). I fixed it for now in my project using this in my package.json

"resolutions": {
    "wait-on": "npm:@metcoder95/wait-on@^1.0.0"
  },

See also jeffbski/wait-on#109 (comment)

[MikeMcC399]

@gottfired

Did you try starting vite with vite --host?

See https://vitejs.dev/config/server-options.html#server-host

[gottfired]

@MikeMcC399 No, just vite. But I do use dns.setDefaultResultOrder("verbatim"); My vite config looks like this

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";
import dns from "dns";

dns.setDefaultResultOrder("verbatim");

// https://vitejs.dev/config/
export default defineConfig({
    build: {
        outDir: "build",
    },

    plugins: [react(), viteTsconfigPaths(), svgrPlugin()],

    // https://stackoverflow.com/a/76074915/677910
    // change local server behaviour to be like CRA (otherwise API calls fail because of wrong CORS)
    server: {
        host: "localhost",
        port: 3000,
        open: true,
    },
});

Could well be that my setup is buggy, since I'm new to vite and in the process of changing over from Create-React-App

[apdrsn]

Hi @gottfired.
Would you mind sharing how you did get it to work with preview?
I am struggling with a pipeline after converting our app from CRA to Vite. Have the same issues with the tests not waiting for the build to be completely ready.

[johnnytortorici]

@gottfired

Did you try starting vite with vite --host?

See https://vitejs.dev/config/server-options.html#server-host

I'm not exactly sure why but @MikeMcC399's suggestion of using vite --host worked for me and I had the exact same problem. In case it helps anyone:

"scripts": {
  "dev:host": "vite --host",
  "test:e2e": "start-server-and-test dev:host 5173 'cypress open --e2e'",
},

[edant92]

I just had a similar issue after upgrading to vite 5.0.0 (it previously worked fine with v4.5.0).

My fix (after a lot of trial and error was to add --expect 404 to the start-server-and-test command

This is now my scripts:

  "scripts": {
    "start": "chmod +x ./build-env.sh && ./build-env.sh && vite",
    "build": "vite build",
    "serve": "vite preview",
    "cypress:open": "cypress open",
    "cypress:run": "cypress run --browser chrome",
    "ci": "CI=true start-server-and-test --expect 404 start http://localhost:3000 cypress:run"
  },

[sucy6330133]

After upgrading to vite 5.0.0, I have got the same problem. (it worked fine with v4.5.0). @edant92's suggestion work for me.

[virtuoushub]

edit: fwiw this seems to be fixed in 5.0.2 (see vitejs/vite#15059 and vitejs/vite#15025 for fixes, and related issues vitejs/vite#9520 and vitejs/vite#15022 for why --expect 404 was necessary in v5 before these fixes)

---

After upgrading to vite 5.0.0, I have got the same problem. (it worked fine with v4.5.0). @edant92's suggestion work for me.

same here.

huge thanks to @edant92 for their --expect 404 workaround 🙌🏻 .

[edant92]

I can also confirm this is fixed in 5.0.2 and the --expect 404 workaround is no longer needed :)

[AlexJDG]

I'm on Vite 5.0.8 and I'm still seeing this issue without --expect 404

Edit: Make sure you have an index.html!

[virtuoushub]

I'm on Vite 5.0.8 and I'm still seeing this issue without --expect 404

I'm on 5.0.8 and I don't see the issue ( and haven't since the fix from 5.0.2 )

depending on your build tool, what is the output of ls/why?

npm ls vite
yarn why vite
pnpm why vite

• https://docs.npmjs.com/cli/v7/commands/npm-ls
• https://classic.yarnpkg.com/lang/en/docs/cli/why/
• https://pnpm.io/cli/why

[AlexJDG]

My mistake, I had deleted my index.html since typically, our entry point is a .tsx file.

🤦

I'll edit my previous comment!