TS on cypress.config: devServer throws type error when defining framework as any

[BirgitPohl]

I just have a fresh installment if Cypress and Cypress-lit and followed the instructions on the Readme.

the line framework: 'cypress-ct-lit' as any, in

component: {
    devServer: {
      framework: 'cypress-ct-lit' as any,
      // more config here
    }
  }

causes the Typescript error on the devServer property.

Type '{ framework: any; }' is not assignable to type 'DevServerConfigOptions | DevServerFn<any>'.
  Type '{ framework: any; }' is not assignable to type '{ bundler: "webpack"; framework: "react" | "vue" | "vue-cli" | "nuxt" | "create-react-app" | "next" | "svelte"; webpackConfig?: any; } | { bundler: "vite"; framework: "react" | "vue" | "svelte"; viteConfig?: ConfigHandler<...> | undefined; } | { ...; }'.
    Property 'bundler' is missing in type '{ framework: any; }' but required in type '{ bundler: "webpack"; framework: "angular"; webpackConfig?: any; options?: { projectConfig: AngularDevServerProjectConfig; } | undefined; }'.ts(2322)
cypress.d.ts(3533, 5): 'bundler' is declared here.

Is there a way to circumvent that?

[redfox-mx]

hi @BirgitPohl nice to meet you.

Can you provide which version of cypress are u installing?

[redfox-mx]

Ps: maybe your problem is because you need to specify your bundler vite or webpack

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer: {
      framework: 'cypress-ct-lit' as any,
      bundler: 'vite', // or 'webpack'
    }
  }
})

I will try to add into docs n.n

[BirgitPohl]

Can you provide which version of cypress are u installing? The very new v13.13.3

The settings look like this now

devServer: {
      framework: "cypress-ct-lit" as any,
      bundler: "webpack",
    },

What I noticed: I read about this repository in Cypress documentation and thought "Oh, cool!", and installed it. I followed the instructions with it resulting in the error above.

But Cypress also offers an instalment guide. Installing it and configuring it, it would look what bundler you have installed. I assume based on what framework you use for frontend, it would set up a configuration for you as well. So I got Web Components for some reason. :D

On your computer it's visual interface lets you configure e2e or components if you don't have that. Testing a browser extension, I of course went to the component testing, because in general browser extensions are not supported.

It has set it up, I did tiny changes and it has worked.

components look like this

// ***********************************************************
// This example support/component.ts is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import './commands'

// Alternatively you can use CommonJS syntax:
// require('./commands')

import { mount } from 'cypress-ct-lit'

// Augment the Cypress namespace to include type definitions for
// your custom command.
// Alternatively, can be defined in cypress/support/component.d.ts
// with a <reference path="./component" /> at the top of your spec.
declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount)

// Example use:
// cy.mount(MyComponent)

The entire cypress.config like this

import { defineConfig } from "cypress";
import webpack from '@cypress/webpack-preprocessor';

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:1234",
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
  includeShadowDom: true,
  component: {
    setupNodeEvents(on, config) {
      const options = {
        webpackOptions: require('./webpack.config'),
        watchOptions: {},
      };
      on('file:preprocessor', webpack(options));
      return config;
    },
    devServer: {
      framework: "cypress-ct-lit" as any,
      bundler: "webpack",
    },
  },
});

And a component test like this

import { html } from 'lit';
import { ButtonType } from '../../../src/components/atoms/button';
import '../../../src/components/atoms/button';

it('should display primary button', () => {

  const text = 'I will show up in the test';
  const type = ButtonType.primary;
  const isActive = true;

  cy.mount(html`<my-button
                  id='content'
                  .buttonType=${type}
                  .isActive=${isActive}
                  .text="${text}"></my-button>`);

  const button = cy.get('button');
  button.should('contain.text', text);
  button.should('have.class', 'primary');
  button.should('not.have.class', 'inactive');
});

Also mind the tsconfig

// root
"rootDir": "./src",

//and under cypress/ with some settings for chrome extensions/cypress testing
{
  "extends": ["../tsconfig.json"],
  "include": ["./**/*.ts", "../cypress.d.ts", "../src/**/*.ts"],
  "exclude": [],
  "compilerOptions": {
    "rootDir": "../",
    "types": ["cypress", "chrome"],
    "lib": ["es2015", "dom"],
    "isolatedModules": false,
    "composite": true,
  },
}