feat: vue-cli and nuxt preset for CT object API architecture #20956

lmiller1990 · 2022-04-07T05:33:28Z

User facing changelog

Add out-of-the-box support for Vue CLI and Nuxt.js in the new Object API CT architecture.

Now you easily configure Vue CLI with Cypress CT, like this:

module.exports = {
  component: {
    devServer: {
      framework: 'vue-cli',
      bundler: 'webpack'
    }
  },
}

Additional details

How has the user experience changed?

Heavily inspired by @ZachJW34's branch: https://github.com/cypress-io/cypress/pull/20954/files#diff-c96246e7228f1e151b9a664f2465af2aee6f1eefef8cc69b2cd1b7e4d650a0f0

Since we did not bundle cypress/vue-2 with the binary, I skipped that test. It can be added once https://cypress-io.atlassian.net/browse/UNIFY-1253 is completed.

PR Tasks

Have tests been added/updated?
Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?
Have new configuration options been added to the cypress.schema.json?

cypress-bot · 2022-04-07T05:33:30Z

Thanks for taking the time to open a PR!

Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

cypress · 2022-04-07T05:53:07Z

Test summary

441 • 0 • 21 • 0 • 0

Run details


Project	cypress
Status	Passed
Commit	`602ca20`
Started	Apr 8, 2022 1:37 PM
Ended	Apr 8, 2022 1:45 PM
Duration	07:47 💡
OS	Linux Debian - 10.10
Browser	Multiple

View run in Cypress Dashboard ➡️

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

ZachJW34

Should we add coverage for vuecli/nuxt typescript projects?

Some comments, nothing blocking. Tested and it works great 👍

ZachJW34 · 2022-04-07T22:28:01Z

npm/webpack-dev-server-fresh/cypress/e2e/vue-cli.cy.ts

+
+// Add to this list to focus on a particular permutation
+// TODO: run vuecli4-vue2 tests once cypress/vue-2 is bundled
+const ONLY_PROJECTS: ProjectDirs[number][] = ['vuecli5-vue3']


I think we should have a test for vuecli4-vue3 as well.

384aa53 and 602ca20

ZachJW34 · 2022-04-07T22:34:44Z

npm/webpack-dev-server-fresh/src/helpers/vueCliHandler.ts

+export function vueCliHandler ({ devServerConfig }: PresetHandler): Configuration {
+  try {
+    const config = require.resolve('@vue/cli-service/webpack.config', {
+      paths: [devServerConfig.cypressConfig.projectRoot],


The sourceRelativeWebpackModules.ts has the framework and importPath (though since this is coming from @vue/cli-service it would have to be mapped) which can be used to do a direct require. This works as well, what are your thoughts on which system to use? I'm fine with either but going this route would make the work done inside of sourceRelativeWebpackModules.ts for frameworks largely redundant.

I think using require.resolve.paths is nice since it gives better stack traces if the module isn't found: #20956 (review)

My understanding is the sourceRelativeWebpackModules is more for sourcing the modules we ship in the binary and pointing to the right ones (eg, webpack-dev-server, html-webpack-plugin, etc).

ZachJW34 · 2022-04-07T22:42:32Z

npm/webpack-dev-server-fresh/src/makeWebpackConfig.ts

@@ -49,8 +78,8 @@ export function makeWebpackConfig (
  config: CreateFinalWebpackConfig,
 ) {
  const { module: webpack } = config.sourceWebpackModulesResult.webpack
-  const userWebpackConfig = config.devServerConfig.webpackConfig as Partial<Configuration>
-  const frameworkWebpackConfig = config.frameworkConfig as Partial<Configuration>
+  const userWebpackConfig = modifyWebpackConfigForCypress(config.devServerConfig.webpackConfig as Partial<Configuration>)


Do we have to do this twice or can we just modify the mergedConfig? I did something similar here:

cypress/npm/webpack-dev-server-fresh/src/makeWebpackConfig.ts

Line 55 in ca87f90

const finalUserWebpackConfig = merge(frameworkWebpackConfig ?? {}, userWebpackConfig ?? {})

tgriesser

Looking good, the require.resolve.paths is nice b/c it shows all the places it searched for the module.

npm/webpack-dev-server-fresh/src/helpers/vueCliHandler.ts

tgriesser · 2022-04-08T00:29:33Z

npm/webpack-dev-server-fresh/src/helpers/nuxtHandler.ts

+
+    const { getWebpackConfig } = require(nuxt)
+
+    const webpackConfig = await getWebpackConfig()


😢 that this forces async everywhere. Was looking into nuxt internal to understand why it does, and it seems only to be because of the ability to have nuxt options be async: https://github.com/nuxt/nuxt.js/blame/db11f7bf937cdbb96ff0067bdee1aa153978e4e0/packages/config/src/load.js#L63

Oh well, probably not worth tapping into internal APIs, but I was half wondering if we could just source from @nuxt/webpack directly.

Yes I shed a tear when I saw this was async. We can def explore tapping into the internals, but it seems better to use their public API, at least for now, where the goal is stability. Can definitely dig into this more later, or even make a PR to nuxt (we are good friends with them).

npm/webpack-dev-server-fresh/src/helpers/nuxtHandler.ts

…o-vue-cli fix: cleanup for #20956

lmiller1990 added 2 commits April 7, 2022 15:14

feat: vue-cli preset

aa892ce

reuse existing code to strip out conflicting plugins

0650ca5

fix tests broken by upstream dep (vtu rc.19)

5652bd0

testing nuxt

3225f35

lmiller1990 changed the title ~~feat: vue-cli preset for CT object API architecture~~ feat: vue-cli and nuxt preset for CT object API architecture Apr 7, 2022

lmiller1990 marked this pull request as ready for review April 7, 2022 08:00

lmiller1990 requested review from a team as code owners April 7, 2022 08:00

lmiller1990 requested review from jennifer-shehane, tgriesser, BlueWinds and ZachJW34 and removed request for a team April 7, 2022 08:00

fix test

2b63258

lmiller1990 removed request for jennifer-shehane and a team April 7, 2022 08:23

remove old fies

30043cf

ZachJW34 approved these changes Apr 7, 2022

View reviewed changes

tgriesser reviewed Apr 8, 2022

View reviewed changes

lmiller1990 added 5 commits April 8, 2022 13:30

merge in 10.0-release

35edd95

refactor duplicate logic

a16b439

better errors

3ba83f8

add vuecli4-vue3 project

384aa53

add test for Vue CLI v4 and Vue 3

602ca20

tgriesser self-requested a review April 8, 2022 14:36

tgriesser approved these changes Apr 8, 2022

View reviewed changes

ZachJW34 merged commit 57659c4 into 10.0-release Apr 8, 2022

ZachJW34 deleted the lmiller1990/UNIFY-1415 branch April 8, 2022 14:37

tgriesser added a commit that referenced this pull request Apr 8, 2022

fix: cleanup for #20956

2e3dbfe

tgriesser mentioned this pull request Apr 8, 2022

fix: cleanup for #20956 #21002

Merged

tgriesser added a commit that referenced this pull request Apr 8, 2022

Merge pull request #21002 from cypress-io/tgriesser/chore/follow-up-t…

df6a415

…o-vue-cli fix: cleanup for #20956

sync-by-unito bot mentioned this pull request May 31, 2022

Release: Ensure we are publishing the correct versions of CT related npm packages for upcoming 10.0 release #21944

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: vue-cli and nuxt preset for CT object API architecture #20956

feat: vue-cli and nuxt preset for CT object API architecture #20956

lmiller1990 commented Apr 7, 2022 •

edited

cypress-bot bot commented Apr 7, 2022

cypress bot commented Apr 7, 2022 •

edited

ZachJW34 left a comment

ZachJW34 Apr 7, 2022

lmiller1990 Apr 8, 2022

ZachJW34 Apr 7, 2022

lmiller1990 Apr 8, 2022

ZachJW34 Apr 7, 2022

lmiller1990 Apr 8, 2022

tgriesser left a comment

tgriesser Apr 8, 2022

lmiller1990 Apr 8, 2022


		const { getWebpackConfig } = require(nuxt)

		const webpackConfig = await getWebpackConfig()

feat: vue-cli and nuxt preset for CT object API architecture #20956

feat: vue-cli and nuxt preset for CT object API architecture #20956

Conversation

lmiller1990 commented Apr 7, 2022 • edited

User facing changelog

Additional details

How has the user experience changed?

PR Tasks

cypress-bot bot commented Apr 7, 2022

cypress bot commented Apr 7, 2022 • edited

Test summary

Run details

ZachJW34 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tgriesser left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lmiller1990 commented Apr 7, 2022 •

edited

cypress bot commented Apr 7, 2022 •

edited