cypress-documentation

cypress-documentation copied to clipboard

Description

In component testing documentation about custom dev servers, it says:

A custom function can be passed into the devServer option, which allows the use of other dev servers not provided by Cypress out of the box. These can be from the Cypress community, preview builds not included with the app, or a custom one you create. The function's signature takes in a Cypress Configuration object as its only parameter and returns either an instance of a devServer or a promise that resolves to a devServer instance.

Based on this info I'm not able to setup and understand how this custom dev server is supposed to look like. The example returns an object with a port option and close method, rather than a Node Server instance or paths to extend the current configuration from our stack. What the requirements are for setting up this devServer instance?

Would love to hear from you all the suggestions and properly definition about how setting up this config for component tests. Please don't hesitate to let me know if you need more details. Thanks!

URL of Issue(s)

https://docs.cypress.io/guides/component-testing/component-framework-configuration#Custom-Dev-Server

Steps to replicate

• Setting up a custom dev server into cypress.config.ts

import { defineConfig } from 'cypress'

export default defineConfig({
  component: {
    devServer(cypressConfig: CypressConfiguration) {
      // return devServer instance or a promise that resolves to
      // a dev server here
      return {
        port: 1234,
        close: () => {},
      }
    },
  },
})

• package.json

` "source": "src/index.ts", 
"exports": {     
"require": "./dist/index.cjs",     
"default": "./dist/index.modern.js"   
},   
"main": "./dist/index.cjs",   
"module": "./dist/index.module.js",   
"unpkg": "./dist/index.umd.js",   
"typings": "dist/index",   
"scripts": {     
"build": "microbundle",     
"dev": "microbundle watch",     
"pretty": "prettier --config .prettierrc 'src/**/*.(ts|tsx)' --write",     
"test": "jest",     
"ci:start-example": 
"cd example; npm start",     
"cy:open": "npx cypress open"   
},   
"dependencies": {     
"react-style-object-to-css": "^1.1.2"   
},   
"peerDependencies": {     
"react": "16 - 18",     
"react-dom": "16 - 18"   
},   
"devDependencies": {     
"@testing-library/cypress": "^8.0.3",     
"@types/jest": "^28.1.6",     
"@types/react": "^18.0.15",    
 "@types/react-dom": "^18.0.6",     
"@typescript-eslint/eslint-plugin": "^5.31.0",     
"@typescript-eslint/parser": "^5.31.0",     
"cypress": "^10.3.1",     
"eslint": "^8.20.0",     
"eslint-config-prettier": "^8.5.0",     
"eslint-plugin-prettier": "^4.2.1",     
"jest": "^28.1.3",     
"microbundle": "^0.15.0",     
"prettier": "^2.7.1",     
"ts-jest": "^28.0.7",     
"typescript": "^4.7.4"  
 },   
"files": [     "dist"   ] }  ``

Device

• [X] PC
• [X] Mac