chore(create-cypress-test): Fix a bunch of small issues in wizard (#1…

…5739)

* Install correct version for vue 3

* Disable users config

* Disable babel.config.js

* Avoid users babel.config files in wizard

* Cleanup

Co-authored-by: Barthélémy Ledoux <bart@cypress.io>
Co-authored-by: Lachlan Miller <lachlan.miller.1990@outlook.com>

npm/create-cypress-tests/src/component-testing/babel/babelTransform.ts

@@ -18,6 +18,13 @@ function tryRequirePrettier () {
     return null
   }
 }
+const sharedBabelOptions = {
+  // disable user config
+  configFile: false,
+  babelrc: false,
+  presets: [],
+  root: process.env.BABEL_TEST_ROOT, // for testing
+}
 
 async function transformFileViaPlugin (filePath: string, babelPlugin: babel.PluginObj) {
   try {
@@ -27,7 +34,7 @@ async function transformFileViaPlugin (filePath: string, babelPlugin: babel.Plug
       filename: path.basename(filePath),
       filenameRelative: path.relative(process.cwd(), filePath),
       plugins: [babelPlugin],
-      presets: [],
+      ...sharedBabelOptions,
     })
 
     if (!updatedResult) {
@@ -127,7 +134,7 @@ export async function getPluginsSourceExample (ast: PluginsConfigAst) {
     const babelResult = await babel.transformAsync(exampleCode, {
       filename: 'nothing.js',
       plugins: [createTransformPluginsFileBabelPlugin(ast)],
-      presets: [],
+      ...sharedBabelOptions,
     })
 
     if (!babelResult?.code) {

npm/create-cypress-tests/src/component-testing/init-component-testing.test.ts

@@ -32,6 +32,8 @@ describe('init component tests script', () => {
 
     await fs.remove(e2eTestOutputPath)
     await fs.mkdir(e2eTestOutputPath)
+
+    process.env.BABEL_TEST_ROOT = e2eTestOutputPath
   })
 
   afterEach(() => {
@@ -170,7 +172,7 @@ describe('init component tests script', () => {
     createTempFiles({
       '/cypress.json': '{}',
       '/webpack.config.js': 'module.exports = { }',
-      '/package.json': JSON.stringify({ dependencies: { react: '*', vue: '*' } }),
+      '/package.json': JSON.stringify({ dependencies: { react: '*', vue: '^2.4.5' } }),
     })
 
     promptSpy = sinon.stub(inquirer, 'prompt')
@@ -187,12 +189,44 @@ describe('init component tests script', () => {
     await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
 
     expect(
-      someOfSpyCallsIncludes(global.console.log, `It looks like all these frameworks: ${chalk.yellow('react, vue')} are available from this directory.`),
+      someOfSpyCallsIncludes(global.console.log, `It looks like all these frameworks: ${chalk.yellow('react, vue@2')} are available from this directory.`),
     ).to.be.true
   })
 
-  it('installs the right adapter', () => {
+  it('installs the right adapter', async () => {
+    createTempFiles({
+      '/cypress.json': '{}',
+      '/webpack.config.js': 'module.exports = { }',
+      '/package.json': JSON.stringify({ dependencies: { react: '16.4.5' } }),
+    })
+
+    promptSpy = sinon.stub(inquirer, 'prompt')
+    .onCall(0)
+    .returns(Promise.resolve({
+      chosenTemplateName: 'vite',
+      componentFolder: 'src',
+    }) as any)
 
+    await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
+    expect(execStub).to.be.calledWith('yarn add @cypress/react --dev')
+  })
+
+  it('installs the right adapter for vue 3', async () => {
+    createTempFiles({
+      '/cypress.json': '{}',
+      '/vite.config.js': 'module.exports = { }',
+      '/package.json': JSON.stringify({ dependencies: { vue: '^3.0.0' } }),
+    })
+
+    promptSpy = sinon.stub(inquirer, 'prompt')
+    .onCall(0)
+    .returns(Promise.resolve({
+      chosenTemplateName: 'vite',
+      componentFolder: 'src',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
+    expect(execStub).to.be.calledWith('yarn add @cypress/vue@3 --dev')
   })
 
   it('suggest the right instruction based on user template choice', async () => {
@@ -272,4 +306,36 @@ describe('init component tests script', () => {
       ),
     ).to.be.true
   })
+
+  it('Doesn\'t affect injected code if user has custom babel.config.js', async () => {
+    createTempFiles({
+      '/cypress/plugins/index.js': 'module.exports = (on, config) => {}',
+      '/cypress.json': '{}',
+      'babel.config.js': `module.exports = ${JSON.stringify({
+        presets: [
+          '@babel/preset-env',
+        ],
+      })}`,
+      '/package.json': JSON.stringify({
+        dependencies: {
+          babel: '*',
+          react: '^16.0.0',
+        },
+      }),
+    })
+
+    sinon.stub(inquirer, 'prompt').returns(Promise.resolve({
+      chosenTemplateName: 'create-react-app',
+      componentFolder: 'cypress/component',
+    }) as any)
+
+    await initComponentTesting({ config: {}, cypressConfigPath, useYarn: true })
+    const babelPluginsOutput = await fs.readFile(
+      path.join(e2eTestOutputPath, 'cypress', 'plugins', 'index.js'),
+      'utf-8',
+    )
+
+    expect(babelPluginsOutput).not.to.contain('use strict')
+    expect(babelPluginsOutput).to.contain('module.exports = (on, config) => {')
+  })
 })

npm/create-cypress-tests/src/component-testing/installFrameworkAdapter.ts

@@ -6,8 +6,9 @@ import { installDependency } from '../utils'
 async function guessOrAskForFramework (cwd: string): Promise<'react' | 'vue'> {
   // please sort this alphabetically
   const frameworks = {
-    react: () => scanFSForAvailableDependency(cwd, ['react', 'react-dom']),
-    vue: () => scanFSForAvailableDependency(cwd, ['vue']),
+    react: () => scanFSForAvailableDependency(cwd, { react: '*', 'react-dom': '*' }),
+    'vue@2': () => scanFSForAvailableDependency(cwd, { vue: '2.x' }),
+    'vue@3': () => scanFSForAvailableDependency(cwd, { vue: '3.x' }),
   }
 
   const guesses = Object.keys(frameworks).filter((framework) => {

npm/create-cypress-tests/src/component-testing/templates/_shared/vite.ts

@@ -20,7 +20,7 @@ export const ViteTemplate: Template = {
   },
   test: (root) => {
     return {
-      success: scanFSForAvailableDependency(root, ['vite']),
+      success: scanFSForAvailableDependency(root, { vite: '*' }),
     }
   },
 }

npm/create-cypress-tests/src/component-testing/templates/vue/vueCli.ts

@@ -20,7 +20,7 @@ export const VueCliTemplate: Template = {
     }
   },
   test: (root) => {
-    const hasVueCliService = scanFSForAvailableDependency(root, ['@vue/cli-service'])
+    const hasVueCliService = scanFSForAvailableDependency(root, { '@vue/cli-service': '>=4' })
 
     return {
       success: hasVueCliService,

npm/create-cypress-tests/src/findPackageJson.ts

@@ -1,6 +1,7 @@
 import path from 'path'
 import fs from 'fs'
 import findUp from 'find-up'
+import { validateSemverVersion } from './utils'
 
 type PackageJsonLike = {
   name?: string
@@ -91,16 +92,21 @@ export function createFindPackageJsonIterator (rootPath = process.cwd()) {
   }
 }
 
-export function scanFSForAvailableDependency (cwd: string, deps: string[]) {
+export function scanFSForAvailableDependency (cwd: string, lookingForDeps: Record<string, string>) {
   const { success } = createFindPackageJsonIterator(cwd)
   .map(({ dependencies, devDependencies }, path) => {
     if (!dependencies && !devDependencies) {
       return { success: false }
     }
 
     return {
-      success: Object.keys({ ...dependencies, ...devDependencies })
-      .some((dependency) => deps.includes(dependency)),
+      success: Object.entries({ ...dependencies, ...devDependencies })
+      .some(([dependency, version]) => {
+        return (
+          Boolean(lookingForDeps[dependency])
+          && validateSemverVersion(version, lookingForDeps[dependency], dependency)
+        )
+      }),
     }
   })
 

npm/create-cypress-tests/src/main.ts

@@ -38,7 +38,7 @@ async function shouldUseYarn () {
 }
 
 function shouldUseTypescript () {
-  return scanFSForAvailableDependency(process.cwd(), ['typescript'])
+  return scanFSForAvailableDependency(process.cwd(), { typescript: '*' })
 }
 
 async function askForComponentTesting () {