Cypress config to run at wsl2

Question

Firstly, I tried config the cypress to test the Vite + vue3 app.

When I use npx cypress open I got the error :

[26403:0310/094751.006561:ERROR:udev_watcher.cc(63)] Failed to enable receiving udev events. [26560:0310/094751.074840:ERROR:gpu_memory_buffer_support_x11.cc(44)] dri3 extension not supported.

I try to install

apt-get install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

and xlaunch but it still does not work.

Now I try to run cypress with npx cypress run instead but i got the message :

Timed out waiting for the browser to connect. Retrying...

Timed out waiting for the browser to connect. Retrying again...

The browser never connected. Something is wrong. The tests cannot run. Aborting...

The browser never connected. Something is wrong. The tests cannot run. Aborting...

here is my cypress.config.ts :

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3100',
    specPattern: 'tests/e2e/specs/*.e2e.ts',
    supportFile: false
  },
  component: {
    devServer(cypressConfig) {
      return {
        port: 8081,
        close: () => {}
      };
    },
    specPattern: 'tests/e2e/specs/*.e2e.ts',
    viewportWidth: 1000,
    viewportHeight: 900
  },
  env: {
    apiUrl: 'http://localhost:3100',
    dbUrl:
      'postgresql://user:password@localhost:5432/db_test?connect_timeout=300'
  },
  video: false,
  screenshotOnRunFailure: false
});

and here is demo.e2e.ts:

describe('Demo', () => {
  it('increments counter when button is clicked', () => {
    cy.visit('/');
    cy.contains('Click me! (0)').click();
    cy.contains('Click me! (1)');
  });
});