Skip to content

Commit 6e80359

Browse files
authored
fix: update scaffold template to use correct path (#20047)
* fix: update scaffold template to use correct path * Remove support for dynamic import on devServer * Update scaffold template * Update config files * Update with feedback * Rename cypressConfig to cypressDevServerConfig * Update devserver link * Update comment
1 parent 83ffb07 commit 6e80359

File tree

41 files changed

+139
-99
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+139
-99
lines changed

cli/types/cypress.d.ts

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
/// <reference path="./cypress-npm-api.d.ts" />
22
/// <reference path="./cypress-eventemitter.d.ts" />
33

4-
// The new Awaited type added in 4.5 would work here, but we seem to need to
5-
// support older versions of Typescript
6-
type AwaitedLike<T> = T extends PromiseLike<infer U>
7-
? { 0: AwaitedLike<U>; 1: U }[U extends PromiseLike<any> ? 0 : 1]
8-
: T
9-
104
declare namespace Cypress {
115
type FileContents = string | any[] | object
126
type HistoryDirection = 'back' | 'forward'
@@ -2991,10 +2985,10 @@ declare namespace Cypress {
29912985
*/
29922986
type CoreConfigOptions = Partial<Omit<ResolvedConfigOptions, TestingType>>
29932987

2994-
type DevServerFn<ComponentDevServerOpts = any> = (cypressConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
2988+
type DevServerFn<ComponentDevServerOpts = any> = (cypressDevServerConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
29952989
interface ComponentConfigOptions<ComponentDevServerOpts = any> extends CoreConfigOptions {
2996-
devServer: Promise<{ devServer: DevServerFn<ComponentDevServerOpts>}> | { devServer: DevServerFn<ComponentDevServerOpts> } | DevServerFn<ComponentDevServerOpts>
2997-
devServerConfig?: ComponentDevServerOpts | AwaitedLike<Promise<ComponentDevServerOpts>>
2990+
devServer: DevServerFn<ComponentDevServerOpts>
2991+
devServerConfig?: ComponentDevServerOpts
29982992
}
29992993

30002994
/**

npm/angular/cypress.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@ export default defineConfig({
1010
setupNodeEvents (on, config) {
1111
return require('./cypress/plugins')(on, config)
1212
},
13-
devServer (cypressConfig) {
13+
devServer (cypressDevServerConfig) {
1414
const { startDevServer } = require('@cypress/webpack-dev-server')
1515
const webpackConfig = require('./cypress/plugins/webpack.config')
1616

1717
return startDevServer({
18-
options: cypressConfig,
18+
options: cypressDevServerConfig,
1919
webpackConfig,
2020
})
2121
},

npm/design-system/cypress.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ module.exports = {
1212
'**/__snapshots__/*',
1313
'**/__image_snapshots__/*',
1414
],
15-
devServer (cypressConfig) {
15+
devServer (cypressDevServerConfig) {
1616
const { startDevServer } = require('@cypress/vite-dev-server')
1717

18-
return startDevServer({ options: cypressConfig })
18+
return startDevServer({ options: cypressDevServerConfig })
1919
},
2020
},
2121
}

npm/react/cypress.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ module.exports = {
1515
'**/__image_snapshots__/*',
1616
'examples/**/*',
1717
],
18-
devServer (cypressConfig, devServerConfig) {
18+
devServer (cypressDevServerConfig, devServerConfig) {
1919
const { startDevServer } = require('@cypress/webpack-dev-server')
2020
const path = require('path')
2121
const babelConfig = require('./babel.config.js')
@@ -73,7 +73,7 @@ module.exports = {
7373
},
7474
}
7575

76-
return startDevServer({ options: cypressConfig, disableLazyCompilation: false, webpackConfig })
76+
return startDevServer({ options: cypressDevServerConfig, disableLazyCompilation: false, webpackConfig })
7777
},
7878
},
7979
}

npm/react/examples/find-webpack/cypress.config.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ export default defineConfig({
44
'video': true,
55
'projectId': 'jq5xpp',
66
'component': {
7-
devServer (cypressConfig) {
7+
devServer (cypressDevServerConfig) {
88
const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')
99
const { startDevServer } = require('@cypress/webpack-dev-server')
1010
const _ = require('lodash')
1111

1212
const map = _.map([4, 8], (n) => n * 2)
1313

1414
console.log(map)
15-
const webpackConfig = findReactScriptsWebpackConfig(cypressConfig.config)
15+
const webpackConfig = findReactScriptsWebpackConfig(cypressDevServerConfig.config)
1616

1717
const rules = webpackConfig.module.rules.find((rule) => !!rule.oneOf).oneOf
1818
const babelRule = rules.find((rule) => typeof rule.loader === 'string' && /babel-loader/.test(rule.loader))
1919

2020
typeof babelRule.options !== 'string' && babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'))
2121

22-
return startDevServer({ options: cypressConfig, webpackConfig })
22+
return startDevServer({ options: cypressDevServerConfig, webpackConfig })
2323
},
2424
setupNodeEvents (on, config) {
2525
require('@cypress/code-coverage/task')(on, config)
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1+
const { devServer } = require('@cypress/react/plugins/next')
2+
13
module.exports = {
24
'video': false,
35
'viewportWidth': 500,
46
'viewportHeight': 800,
57
'pluginsFile': 'cypress/plugins.js',
68
'component': {
7-
setupNodeEvents (on, config) {
8-
const devServer = require('@cypress/react/plugins/next')
9-
10-
devServer(on, config)
11-
12-
return config
13-
},
9+
devServer,
1410
},
1511
}

npm/react/examples/nextjs/cypress.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const { devServer } = require('@cypress/react/plugins/next')
2+
13
module.exports = {
24
'video': false,
35
'viewportWidth': 500,
@@ -7,6 +9,6 @@ module.exports = {
79
'coverage': true,
810
},
911
'component': {
10-
devServer: require('@cypress/react/plugins/next'),
12+
devServer,
1113
},
1214
}
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const { devServer } = require('@cypress/react/plugins/react-scripts')
2+
13
module.exports = {
24
'video': false,
35
'fixturesFolder': false,
@@ -6,6 +8,6 @@ module.exports = {
68
'component': {
79
// load file devServer that comes with this plugin
810
// https://github.com/bahmutov/cypress-react-unit-test#install
9-
devServer: require('@cypress/react/plugins/react-scripts'),
11+
devServer,
1012
},
1113
}
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
const { defineConfig } = require('cypress')
2+
const { devServer } = require('@cypress/react/plugins/react-scripts')
23

34
module.exports = defineConfig({
45
'video': false,
56
'viewportWidth': 500,
67
'viewportHeight': 800,
78
'component': {
8-
devServer: require('@cypress/react/plugins/react-scripts'),
9+
devServer,
910
},
1011
})
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
const { defineConfig } = require('cypress')
2+
const { devServer } = require('@cypress/react/plugins/react-scripts')
23

34
module.exports = defineConfig({
45
'video': false,
56
'viewportWidth': 500,
67
'viewportHeight': 800,
78
'experimentalFetchPolyfill': true,
89
'component': {
9-
devServer: require('@cypress/react/plugins/react-scripts'),
10+
devServer,
1011
},
1112
})

npm/react/examples/tailwind/cypress.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const { devServer } = require('@cypress/react/plugins/react-scripts')
2+
13
module.exports = {
24
'video': false,
35
'fixturesFolder': false,
@@ -9,6 +11,6 @@ module.exports = {
911
component: {
1012
// load file devServer that comes with this plugin
1113
// https://github.com/bahmutov/cypress-react-unit-test#install
12-
devServer: require('@cypress/react/plugins/react-scripts'),
14+
devServer,
1315
},
1416
}

npm/react/examples/using-babel-typescript/cypress.config.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const { devServer } = require('@cypress/react/plugins/babel')
2+
13
module.exports = {
24
'video': false,
35
'fixturesFolder': false,
@@ -7,6 +9,6 @@ module.exports = {
79
// let's bundle spec files and the components they include using
810
// the same bundling settings as the project by loading .babelrc
911
// https://github.com/bahmutov/cypress-react-unit-test#install
10-
devServer: require('@cypress/react/plugins/babel'),
12+
devServer,
1113
},
1214
}

npm/react/examples/webpack-file/cypress.config.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
const { defineConfig } = require('cypress')
2+
const { devServer } = require('@cypress/react/plugins/load-webpack')
23

34
module.exports = defineConfig({
45
'video': false,
56
'fixturesFolder': false,
67
'viewportWidth': 500,
78
'viewportHeight': 500,
89
'component': {
9-
devServer: require('@cypress/react/plugins/load-webpack'),
10+
devServer,
1011
devServerConfig: {
1112
// from the root of the project (folder with cypress.config.{ts|js} file)
1213
webpackFilename: 'webpack.config.js',

npm/react/examples/webpack-options/cypress.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ module.exports = {
44
'viewportWidth': 500,
55
'viewportHeight': 500,
66
'component': {
7-
devServer (cypressConfig) {
7+
devServer (cypressDevServerConfig) {
88
const path = require('path')
99
const { startDevServer } = require('@cypress/webpack-dev-server')
1010
const babelConfig = require('./babel.config')
@@ -34,7 +34,7 @@ module.exports = {
3434

3535
process.env.BABEL_ENV = 'test' // this is required to load commonjs babel plugin
3636

37-
return startDevServer({ options: cypressConfig, webpackConfig })
37+
return startDevServer({ options: cypressDevServerConfig, webpackConfig })
3838
},
3939
},
4040
}

npm/vite-dev-server/cypress.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ export default defineConfig({
66
'fixturesFolder': false,
77
'component': {
88
'supportFile': 'cypress/support.js',
9-
devServer (cypressConfig) {
9+
devServer (cypressDevServerConfig) {
1010
const path = require('path')
1111
const { startDevServer } = require('./dist')
1212

1313
return startDevServer({
14-
options: cypressConfig,
14+
options: cypressDevServerConfig,
1515
viteConfig: {
1616
configFile: path.resolve(__dirname, 'vite.config.ts'),
1717
},

npm/vue/cypress.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default defineConfig({
1212
},
1313
'component': {
1414
excludeSpecPattern: 'examples/**/*',
15-
devServer (cypressConfig) {
15+
devServer (cypressDevServerConfig) {
1616
const { startDevServer } = require('@cypress/webpack-dev-server')
1717
const webpackConfig = require('./webpack.config')
1818

@@ -25,7 +25,7 @@ export default defineConfig({
2525
'@vue/compiler-core$': '@vue/compiler-core/dist/compiler-core.cjs.js',
2626
}
2727

28-
return startDevServer({ options: cypressConfig, webpackConfig })
28+
return startDevServer({ options: cypressDevServerConfig, webpackConfig })
2929
},
3030
setupNodeEvents (on, config) {
3131
require('@cypress/code-coverage/task')(on, config)

npm/vue/examples/code-coverage/cypress.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ module.exports = {
22
'fixturesFolder': false,
33
'video': false,
44
'component': {
5-
devServer (cypressConfig) {
5+
devServer (cypressDevServerConfig) {
66
const { startDevServer } = require('@cypress/webpack-dev-server')
77
const webpackConfig = require('./webpack.config')
88

99
return startDevServer({
10-
options: cypressConfig,
10+
options: cypressDevServerConfig,
1111
webpackConfig,
1212
})
1313
},

npm/vue/examples/vue-cli/cypress.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module.exports = {
22
'video': false,
33
'fixturesFolder': false,
44
'component': {
5-
devServer (cypressConfig) {
5+
devServer (cypressDevServerConfig) {
66
const { startDevServer } = require('@cypress/webpack-dev-server')
77
const webpackConfig = require('@vue/cli-service/webpack.config')
88

@@ -19,7 +19,7 @@ module.exports = {
1919
}
2020

2121
return startDevServer({
22-
options: cypressConfig,
22+
options: cypressDevServerConfig,
2323
webpackConfig: modifiedWebpackConfig,
2424
})
2525
},

packages/data-context/src/actions/WizardActions.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -226,14 +226,16 @@ export class WizardActions {
226226
const codeBlocks: string[] = []
227227
const { chosenBundler, chosenFramework, chosenLanguage } = opts
228228

229+
const requirePath = chosenFramework.defaultPackagePath ?? chosenBundler.package
230+
229231
codeBlocks.push(chosenLanguage.type === 'ts' ? `import { defineConfig } from 'cypress'` : `const { defineConfig } = require('cypress')`)
232+
codeBlocks.push(chosenLanguage.type === 'ts' ? `import { devServer } from '${requirePath}'` : `const { devServer } = require('${requirePath}')`)
230233
codeBlocks.push('')
231234
codeBlocks.push(chosenLanguage.type === 'ts' ? `export default defineConfig({` : `module.exports = defineConfig({`)
232235
codeBlocks.push(` // Component testing, ${chosenLanguage.name}, ${chosenFramework.name}, ${chosenBundler.name}`)
233236

234237
codeBlocks.push(` ${COMPONENT_SCAFFOLD_BODY({
235238
lang: chosenLanguage.type,
236-
requirePath: chosenBundler.package,
237239
configOptionsString: '{}',
238240
}).replace(/\n/g, '\n ')}`)
239241

@@ -346,15 +348,14 @@ const E2E_SCAFFOLD_BODY = dedent`
346348

347349
interface ComponentScaffoldOpts {
348350
lang: CodeLanguageEnum
349-
requirePath: string
350351
configOptionsString: string
351352
specPattern?: string
352353
}
353354

354355
const COMPONENT_SCAFFOLD_BODY = (opts: ComponentScaffoldOpts) => {
355356
return dedent`
356357
component: {
357-
devServer: import('${opts.requirePath}'),
358+
devServer,
358359
devServerConfig: ${opts.configOptionsString}
359360
},
360361
`

packages/frontend-shared/cypress.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@ export default defineConfig({
1616
'configFile': '../../mocha-reporter-config.json',
1717
},
1818
'component': {
19-
devServer (cypressConfig, devServerConfig) {
19+
devServer (cypressDevServerConfig, devServerConfig) {
2020
const { startDevServer } = require('@cypress/vite-dev-server')
2121

2222
return startDevServer({
23-
options: cypressConfig,
23+
options: cypressDevServerConfig,
2424
...devServerConfig,
2525
})
2626
},

packages/frontend-shared/cypress/e2e/support/e2eProjectDirs.ts

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const e2eProjectDirs = [
1515
'cookies',
1616
'cypress-in-cypress',
1717
'default-layout',
18+
'devServer-dynamic-import',
1819
'downloads',
1920
'e2e',
2021
'empty-folders',

packages/launchpad/cypress.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ export default defineConfig({
1717
},
1818
'component': {
1919
'supportFile': 'cypress/component/support/index.ts',
20-
devServer (cypressConfig, devServerConfig) {
20+
devServer (cypressDevServerConfig, devServerConfig) {
2121
const { startDevServer } = require('@cypress/vite-dev-server')
2222

2323
return startDevServer({
24-
options: cypressConfig,
24+
options: cypressDevServerConfig,
2525
...devServerConfig,
2626
})
2727
},

packages/runner-ct/cypress.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default defineConfig({
1010
configFile: '../../mocha-reporter-config.json',
1111
},
1212
component: {
13-
devServer (cypressConfig) {
13+
devServer (cypressDevServerConfig) {
1414
const { startDevServer } = require('@cypress/webpack-dev-server')
1515

1616
function injectStylesInlineForPercyInPlace (webpackConfig) {
@@ -34,7 +34,7 @@ export default defineConfig({
3434

3535
return startDevServer({
3636
webpackConfig,
37-
options: cypressConfig,
37+
options: cypressDevServerConfig,
3838
})
3939
},
4040
},

0 commit comments

Comments
 (0)