support config component test verify host

[godlanbo]

What would you like?

Cypress has some issues running component tests in an ipv6 container. I'm using the vite bundler and cypress can't verify localhost:port because the vite server starts on an ipv4 port, but cypress always verifies localhost. This doesn't work on ipv6 hosts machines.

If I could specify the server host that Cypress validates against when in component test mode, for example I could specify that it validate 127.0.0.1:port, it might work. But right now, there's no configuration that allows me to do that.

Why is this needed?

Because my project pipeline runs in an ipv6 container, and I don't have a way to modify the container's hosts file. I want cypress to be able to run component tests on this container.

Other

No response

[godlanbo]

Let me give you an example：

my container's hosts

127.0.0.1 localhost
::1 localhost ip6-localhost ip6-loopback

so when cypress try verify localhost, it always hits ::1

but cypress not support ipv6，so ::1 can't verify, and vite server start on 127.0.0.1. They're obviously not the same thing.

So I want to have such a configuration:

// ...
component: {
  devServer: {
    framework: 'react',
    bundler: 'vite',
  },
  verifyHost: '127.0.0.1'
},
// ...

then , i can run cypress component test on ipv6 container.

[MikeMcC399]

@godlanbo

In some situations, starting vite like this has helped:

npx vite --host

[godlanbo]

@godlanbo

In some situations, starting vite like this has helped:

npx vite --host

Thanks, but Cypress component testing starts vite internally, which I cannot control. Cypress will automatically select 127.0.0.1 as the host when starting vite, which is not controlled externally.

[godlanbo]

It is always good to be controllable. Obviously, the verification address and vite startup address of the Cypress component test are not well controlled now, which will cause some problems.

[MikeMcC399]

@godlanbo

Sorry that my suggestion did not help!

You have submitted a feature request rather than an issue report so the details of versions, etc. are missing.

If you want to go into more detail, then please add the information about your current setup:

Operating system and version:
Cypress version:
Node.js version:
Vite version:

Several frameworks, including Vite, started having problems with localhost IPv4 / IPv6 when Node.js 17 was released, due to a change in the default DNS priority . In the meantime, for most configurations, there are workarounds available. Possibly we can find a workaround for you too.

[godlanbo]

@MikeMcC399
Thanks for your suggestion, here are my configurations:
Operating system and version: ubuntu20.04-x64
Cypress version: 13.13.0
Node.js version: 16.20.1
Vite version: ^5.3.3

I tried many methods, including reading the Cypress source code and consulting network-related people, but the conclusion I came to was that in addition to adjusting the verification address of Cypress, the only way to do it was to rewrite the container hosts. That is not easy, as you know, the underlying container in a company is usually not modifiable.

[MikeMcC399]

@godlanbo

If you are still using Node.js 16 then it is probably a different problem to the one I thought it was.

Node.js 16 entered end-of-life on Sep 11, 2023, so it is no longer supported.

You can read the official Cypress statement about this in https://docs.cypress.io/guides/references/changelog#13-0-0

Node 14 support has been removed and Node 16 support has been deprecated. Node 16 may continue to work with Cypress v13, but will not be supported moving forward to closer coincide with Node 16's end-of-life schedule. It is recommended that users update to at least Node 18.

Have you tried with the current Node.js LTS version 20.x?

Edit: https://vitejs.dev/guide/migration.html#node-js-support says:

Vite no longer supports Node.js 14 / 16 / 17 / 19, which reached its EOL. Node.js 18 / 20+ is now required.

[godlanbo]

@MikeMcC399
Does the node version help this? I temporarily modified the hosts with the help of the network staff, and it made Cypress work properly, which confirmed my guess. I think upgrading the node version cannot solve this problem.

My project is in a large warehouse in the company, and upgrading the node version rashly may cause impacts that I cannot evaluate.

[MikeMcC399]

@godlanbo

Does the node version help this?

I don't expect that updating Node.js will solve the issue, no.

[MikeMcC399]

@godlanbo

You were pointing to Cypress code, which has hardcoded localhost as 127.0.0.1. Sorry I didn't pick up on that!

cypress/npm/vite-dev-server/src/resolveConfig.ts

Lines 128 to 134 in d8884e0

	port: vitePort,
	host: '127.0.0.1',
	// Disable file watching and HMR when executing tests in `run` mode
	...(isTextTerminal
	? { watch: { ignored: '**/*' }, hmr: false }
	: {}),
	},

[godlanbo]

@MikeMcC399
Maybe my description is not clear, sorry.

My problem is that the verification host address in the Cypress source code is localhost, but vite is fixedly started on the 127.0.0.1 host. This will cause Cypress in the ipv6 container to be unable to verify the vite server started on 127.0.0.1 on localhost due to the setting of /etc/hosts.

e.g.

127.0.0.1 localhost
::1 localhost ip6-localhost ip6-loopback

localhost will be mapped to ::1, which is an ipv6 host address and Cypress cannot handle it. At this time, the vite server is started on 127.0.0.1.

[godlanbo]

@godlanbo

You were pointing to Cypress code, which has hardcoded localhost as 127.0.0.1. Sorry I didn't pick up on that!

cypress/npm/vite-dev-server/src/resolveConfig.ts

Lines 128 to 134 in d8884e0

	port: vitePort,
	host: '127.0.0.1',
	// Disable file watching and HMR when executing tests in `run` mode
	...(isTextTerminal
	? { watch: { ignored: '**/*' }, hmr: false }
	: {}),
	},

yes, my screenshots are from Cypress source code, so I can't control Cypress to modify its validation behavior because it is hard-coded in the code.

[godlanbo]

@MikeMcC399
The vite server will always be started on the host address 127.0.0.1, but Cypress will always authenticate to localhost. In most containers I guess this works, but on some ipv6 machines it doesn't work and that's giving me headaches.

[MikeMcC399]

@godlanbo

I'm able to reproduce this issue with supported versions. I tested on Debian 12 and I commented out the IPv4 loopback 127.0.0.1 in /etc/hosts leaving ::1 localhost ip6-localhost ip6-loopback intact.

> example-component-tests@2.0.0 test
> cypress run --component


DevTools listening on ws://127.0.0.1:35415/devtools/browser/7c6c72c6-323d-49dc-b29e-0f9f7f43dcbb
The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
Cypress could not verify that this server is running:

  > http://localhost:5173

We are verifying this server because it has been configured as your baseUrl.

Cypress automatically waits until your server is accessible before running tests.

We will try connecting to it 3 more times...
We will try connecting to it 2 more times...
We will try connecting to it 1 more time...

Cypress failed to verify that your server is running.

Please start this server and then run Cypress again.

The error refers to baseUrl, however that is only configurable for E2E testing, not for Component Testing. See https://docs.cypress.io/guides/references/configuration

[godlanbo]

@MikeMcC399

Yes, I'm glad that this problem can be successfully reproduced in your place. Whether it's baseURL or something else, being able to configure the address verified by Cypress, or controlling the vite server startup parameters can solve this problem.

So I hope to add a new configuration, or support vite server startup parameter configuration.

[MikeMcC399]

@godlanbo

I ran a test, changing host: '127.0.0.1', to host: '::1' in the code section you identified and rebuilding Cypress. It was able to run component testing with a missing IPv4 loopback address in /etc/hosts.

cypress/npm/vite-dev-server/src/resolveConfig.ts

Lines 128 to 129 in d8884e0

	port: vitePort,
	host: '127.0.0.1',

@cypress/vite-dev-server, where this code resides, is bundled with the Cypress binary. I will have to leave any further work to the experts of this module, but at least the problem is now clearer.

Do you have the flexibility to replace your IPv6 container with a Cypress Docker image run as a Docker container or are you tied to the IPv6 container?

[godlanbo]

@MikeMcC399

If I could, I would have replaced my image a long time ago. As I said above, my project runs on the company's infrastructure and I cannot replace and change the configuration of the container.

[godlanbo]

@MikeMcC399

I think the problem has always been clear. I did a long investigation and verification before asking the question. The problem is that Cypress binds the verification address and the address of the vite server and cannot be modified. However, in the ipv6 container, localhost and 127.0.0.1 may not point to the same place.

So I hope to add a feature to solve this problem.

[MikeMcC399]

I found it also worked if host: '127.0.0.1' is replaced by host: 'localhost'

host: '0.0.0.0' did not work
host: 'true' gets past the verify, however it fails later

[godlanbo]

@MikeMcC399

The premise of your verification should be that the host of the vite server can be controlled from outside, but this is not currently possible within Cypress.

Is there anything wrong with what I said?

[MikeMcC399]

@godlanbo

The premise of your verification should be that the host of the vite server can be controlled from outside, but this is not currently possible within Cypress.

Is there anything wrong with what I said?

The vite server startup for Cypress Component Testing can't be controlled from outside. I was just trying out the effect of source code changes in Cypress itself. I don't think I can make any further progress on researching this issue now.

Your original request is fine!

[godlanbo]

So, is there any hope of exposing the relevant configuration to users in the future to fix this problem?