Skip to content

Commit 8a6768f

Browse files
feat: use devServer instad of startDevServer (#20092)
* feat: use devServer instad of startDevServer * Fix tests * Update with feedback Co-authored-by: Zachary Williams <ZachJW34@gmail.com>
1 parent 857f306 commit 8a6768f

File tree

19 files changed

+79
-133
lines changed

19 files changed

+79
-133
lines changed

npm/angular/cypress.config.ts

+4-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { defineConfig } from 'cypress'
2+
import { devServer } from '@cypress/webpack-dev-server'
3+
import * as webpackConfig from './cypress/plugins/webpack.config'
24

35
export default defineConfig({
46
'experimentalFetchPolyfill': true,
@@ -10,14 +12,7 @@ export default defineConfig({
1012
setupNodeEvents (on, config) {
1113
return require('./cypress/plugins')(on, config)
1214
},
13-
devServer (cypressDevServerConfig) {
14-
const { startDevServer } = require('@cypress/webpack-dev-server')
15-
const webpackConfig = require('./cypress/plugins/webpack.config')
16-
17-
return startDevServer({
18-
options: cypressDevServerConfig,
19-
webpackConfig,
20-
})
21-
},
15+
devServer,
16+
devServerConfig: { webpackConfig },
2217
},
2318
})

npm/design-system/cypress.config.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const { devServer } = require('@cypress/vite-dev-server')
2+
13
module.exports = {
24
viewportWidth: 1024,
35
viewportHeight: 800,
@@ -12,10 +14,6 @@ module.exports = {
1214
'**/__snapshots__/*',
1315
'**/__image_snapshots__/*',
1416
],
15-
devServer (cypressDevServerConfig) {
16-
const { startDevServer } = require('@cypress/vite-dev-server')
17-
18-
return startDevServer({ options: cypressDevServerConfig })
19-
},
17+
devServer,
2018
},
2119
}

npm/react/cypress.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// @ts-check
2+
const { devServer } = require('@cypress/webpack-dev-server')
23

34
module.exports = {
45
'viewportWidth': 400,
@@ -16,7 +17,6 @@ module.exports = {
1617
'examples/**/*',
1718
],
1819
devServer (cypressDevServerConfig, devServerConfig) {
19-
const { startDevServer } = require('@cypress/webpack-dev-server')
2020
const path = require('path')
2121
const babelConfig = require('./babel.config.js')
2222

@@ -73,7 +73,7 @@ module.exports = {
7373
},
7474
}
7575

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

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { defineConfig } from 'cypress'
2+
import { devServer } from '@cypress/webpack-dev-server'
23

34
export default defineConfig({
45
'video': true,
56
'projectId': 'jq5xpp',
67
'component': {
78
devServer (cypressDevServerConfig) {
89
const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')
9-
const { startDevServer } = require('@cypress/webpack-dev-server')
1010
const _ = require('lodash')
1111

1212
const map = _.map([4, 8], (n) => n * 2)
@@ -19,7 +19,7 @@ export default defineConfig({
1919

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

22-
return startDevServer({ options: cypressDevServerConfig, webpackConfig })
22+
return devServer(cypressDevServerConfig, { webpackConfig })
2323
},
2424
setupNodeEvents (on, config) {
2525
require('@cypress/code-coverage/task')(on, config)

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

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const { devServer } = require('@cypress/webpack-dev-server')
2+
13
module.exports = {
24
'video': false,
35
'fixturesFolder': false,
@@ -6,7 +8,6 @@ module.exports = {
68
'component': {
79
devServer (cypressDevServerConfig) {
810
const path = require('path')
9-
const { startDevServer } = require('@cypress/webpack-dev-server')
1011
const babelConfig = require('./babel.config')
1112

1213
/** @type import("webpack").Configuration */
@@ -34,7 +35,7 @@ module.exports = {
3435

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

37-
return startDevServer({ options: cypressDevServerConfig, webpackConfig })
38+
return devServer(cypressDevServerConfig, { webpackConfig })
3839
},
3940
},
4041
}

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

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineConfig } from 'cypress'
2+
import { devServer } from './dist'
23

34
export default defineConfig({
45
'pluginsFile': 'cypress/plugins.js',
@@ -8,13 +9,9 @@ export default defineConfig({
89
'supportFile': 'cypress/support.js',
910
devServer (cypressDevServerConfig) {
1011
const path = require('path')
11-
const { startDevServer } = require('./dist')
1212

13-
return startDevServer({
14-
options: cypressDevServerConfig,
15-
viteConfig: {
16-
configFile: path.resolve(__dirname, 'vite.config.ts'),
17-
},
13+
return devServer(cypressDevServerConfig, {
14+
configFile: path.resolve(__dirname, 'vite.config.ts'),
1815
})
1916
},
2017
},

npm/vue/cypress.config.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineConfig } from 'cypress'
2+
import { devServer } from '@cypress/webpack-dev-server'
23

34
export default defineConfig({
45
'viewportWidth': 500,
@@ -13,7 +14,6 @@ export default defineConfig({
1314
'component': {
1415
excludeSpecPattern: 'examples/**/*',
1516
devServer (cypressDevServerConfig) {
16-
const { startDevServer } = require('@cypress/webpack-dev-server')
1717
const webpackConfig = require('./webpack.config')
1818

1919
if (!webpackConfig.resolve) {
@@ -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: cypressDevServerConfig, webpackConfig })
28+
return devServer(cypressDevServerConfig, { webpackConfig })
2929
},
3030
setupNodeEvents (on, config) {
3131
require('@cypress/code-coverage/task')(on, config)

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

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1+
const { devServer } = require('@cypress/webpack-dev-server')
2+
const webpackConfig = require('./webpack.config')
3+
14
module.exports = {
25
'fixturesFolder': false,
36
'video': false,
47
'component': {
5-
devServer (cypressDevServerConfig) {
6-
const { startDevServer } = require('@cypress/webpack-dev-server')
7-
const webpackConfig = require('./webpack.config')
8-
9-
return startDevServer({
10-
options: cypressDevServerConfig,
11-
webpackConfig,
12-
})
13-
},
8+
devServer,
9+
devServerConfig: { webpackConfig },
1410
setupNodeEvents (on, config) {
1511
require('@cypress/code-coverage/task')(on, config)
1612

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

+7-11
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,23 @@
1+
const { devServer } = require('@cypress/webpack-dev-server')
2+
const webpackConfig = require('@vue/cli-service/webpack.config')
3+
14
module.exports = {
25
'video': false,
36
'fixturesFolder': false,
47
'component': {
5-
devServer (cypressDevServerConfig) {
6-
const { startDevServer } = require('@cypress/webpack-dev-server')
7-
const webpackConfig = require('@vue/cli-service/webpack.config')
8-
8+
devServer,
9+
devServerConfig: {
910
// HtmlPwaPlugin is coupled to a hook in HtmlWebpackPlugin
1011
// that was deprecated after 3.x. We currently only support
1112
// HtmlWebpackPlugin 4.x and 5.x.
1213
// TODO: Figure out how to deal with 2 major versions old HtmlWebpackPlugin
1314
// which is still in widespread usage.
14-
const modifiedWebpackConfig = {
15+
webpackConfig: {
1516
...webpackConfig,
1617
plugins: (webpackConfig.plugins || []).filter((x) => {
1718
return x.constructor.name !== 'HtmlPwaPlugin'
1819
}),
19-
}
20-
21-
return startDevServer({
22-
options: cypressDevServerConfig,
23-
webpackConfig: modifiedWebpackConfig,
24-
})
20+
},
2521
},
2622
setupNodeEvents (on, config) {
2723
require('@cypress/code-coverage/task')(on, config)

packages/frontend-shared/cypress.config.ts

+7-14
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { defineConfig } from 'cypress'
2+
import { devServer } from '@cypress/vite-dev-server'
3+
24
import getenv from 'getenv'
35

46
const CYPRESS_INTERNAL_CLOUD_ENV = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development')
@@ -16,21 +18,12 @@ export default defineConfig({
1618
'configFile': '../../mocha-reporter-config.json',
1719
},
1820
'component': {
19-
devServer (cypressDevServerConfig, devServerConfig) {
20-
const { startDevServer } = require('@cypress/vite-dev-server')
21-
22-
return startDevServer({
23-
options: cypressDevServerConfig,
24-
...devServerConfig,
25-
})
26-
},
21+
devServer,
2722
devServerConfig: {
28-
viteConfig: {
29-
optimizeDeps: {
30-
include: [
31-
'@packages/ui-components/cypress/support/customPercyCommand',
32-
],
33-
},
23+
optimizeDeps: {
24+
include: [
25+
'@packages/ui-components/cypress/support/customPercyCommand',
26+
],
3427
},
3528
},
3629
},

packages/launchpad/cypress.config.ts

+6-14
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { defineConfig } from 'cypress'
22
import getenv from 'getenv'
3+
import { devServer } from '@cypress/vite-dev-server'
34

45
const CYPRESS_INTERNAL_CLOUD_ENV = getenv('CYPRESS_INTERNAL_CLOUD_ENV', process.env.CYPRESS_INTERNAL_ENV || 'development')
56

@@ -17,21 +18,12 @@ export default defineConfig({
1718
},
1819
'component': {
1920
'supportFile': 'cypress/component/support/index.ts',
20-
devServer (cypressDevServerConfig, devServerConfig) {
21-
const { startDevServer } = require('@cypress/vite-dev-server')
22-
23-
return startDevServer({
24-
options: cypressDevServerConfig,
25-
...devServerConfig,
26-
})
27-
},
21+
devServer,
2822
devServerConfig: {
29-
viteConfig: {
30-
optimizeDeps: {
31-
include: [
32-
'@packages/ui-components/cypress/support/customPercyCommand',
33-
],
34-
},
23+
optimizeDeps: {
24+
include: [
25+
'@packages/ui-components/cypress/support/customPercyCommand',
26+
],
3527
},
3628
},
3729
},

packages/runner-ct/cypress.config.ts

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineConfig } from 'cypress'
2+
import { devServer } from '@cypress/webpack-dev-server'
23

34
export default defineConfig({
45
video: true,
@@ -11,8 +12,6 @@ export default defineConfig({
1112
},
1213
component: {
1314
devServer (cypressDevServerConfig) {
14-
const { startDevServer } = require('@cypress/webpack-dev-server')
15-
1615
function injectStylesInlineForPercyInPlace (webpackConfig) {
1716
webpackConfig.module.rules = webpackConfig.module.rules.map((rule) => {
1817
if (rule?.use?.[0]?.loader.includes('mini-css-extract-plugin')) {
@@ -32,10 +31,7 @@ export default defineConfig({
3231

3332
injectStylesInlineForPercyInPlace(webpackConfig)
3433

35-
return startDevServer({
36-
webpackConfig,
37-
options: cypressDevServerConfig,
38-
})
34+
return devServer(cypressDevServerConfig, { webpackConfig })
3935
},
4036
},
4137
})

system-tests/projects/component-tests/cypress.config.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1+
const { devServer } = require('@cypress/webpack-dev-server')
2+
13
module.exports = {
24
'projectId': 'abc123',
35
e2e: {
46
specPattern: 'cypress/e2e/**/*',
57
},
68
component: {
79
specPattern: 'cypress/component-tests/**/*',
8-
devServer (cypressDevServerConfig, devServerConfig) {
9-
const { startDevServer } = require('@cypress/webpack-dev-server')
10-
11-
return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
12-
},
10+
devServer,
1311
devServerConfig: {
1412
webpackConfig: {
1513
output: {

system-tests/projects/e2e/cypress.config.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
const { devServer } = require('@cypress/webpack-dev-server')
2+
13
const plugin = require('./cypress/plugins')
24

35
module.exports = {
@@ -10,11 +12,7 @@ module.exports = {
1012
'component': {
1113
'supportFile': false,
1214
'specPattern': 'cypress/component/**/*spec.js',
13-
devServer (cypressDevServerConfig, devServerConfig) {
14-
const { startDevServer } = require('@cypress/webpack-dev-server')
15-
16-
return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
17-
},
15+
devServer,
1816
devServerConfig: {
1917
webpackConfig: {
2018
output: {

system-tests/projects/react-code-gen/cypress.config.js

+3-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1+
const { devServer } = require('@cypress/webpack-dev-server')
2+
13
module.exports = {
24
component: {
35
supportFile: 'cypress/component/support.js',
46
specPattern: 'src/**/*.cy.{js,jsx}',
5-
devServer (cypressDevServerConfig, devServerConfig) {
6-
const { startDevServer } = require('@cypress/webpack-dev-server')
7-
8-
return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
9-
},
7+
devServer,
108
},
119
e2e: {
1210
supportFile: 'cypress/component/support.js',
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1+
const { devServer } = require('@cypress/webpack-dev-server')
2+
13
module.exports = {
24
'component': {
35
supportFile: false,
4-
devServer (cypressDevServerConfig) {
5-
const { startDevServer } = require('@cypress/webpack-dev-server')
6-
7-
return startDevServer({
8-
options: cypressDevServerConfig,
9-
webpackConfig: {
10-
output: {
11-
publicPath: '/',
12-
},
13-
},
14-
})
6+
devServer,
7+
devServerConfig: {
8+
output: {
9+
publicPath: '/',
10+
},
1511
},
1612
},
1713
}

0 commit comments

Comments
 (0)