fix(component-testing): Fix webpack-dev-server deps validation crash (#15708)

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

Author: 4 people

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

@@ -1,4 +1,4 @@
 export const MIN_SUPPORTED_VERSION = {
   'react-scripts': '^=3.x || ^=4.x',
-  next: '^=9.x',
+  next: '^=9.x || ^=10.x',
 }

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

@@ -51,16 +51,22 @@ async function askForComponentTesting () {
   return shouldSetupComponentTesting
 }
 
-function printCypressCommandsHelper ({ useYarn }: { useYarn: boolean }) {
-  const displayedCommand = useYarn ? 'yarn' : 'npx'
-
-  console.log('Inside this directory, you can run several commands:')
-  console.log()
-  console.log(chalk.cyan(`  ${displayedCommand} cypress open`))
-  console.log('    Opens cypress local development app.')
-  console.log()
-  console.log(chalk.cyan(`  ${displayedCommand} cypress run`))
-  console.log('    Runs tests in headless mode.')
+function printCypressCommandsHelper (options: { shouldSetupComponentTesting: boolean, useYarn: boolean }) {
+  const printCommand = (command: string, description: string) => {
+    const displayedRunner = options.useYarn ? 'yarn' : 'npx'
+
+    console.log()
+    console.log(chalk.cyan(`  ${displayedRunner} ${command}`))
+    console.log(`    ${description}`)
+  }
+
+  printCommand('cypress open', 'Opens cypress local development app.')
+  printCommand('cypress run', 'Runs tests in headless mode.')
+
+  if (options.shouldSetupComponentTesting) {
+    printCommand('cypress open-ct', 'Opens cypress component-testing web app.')
+    printCommand('cypress run', 'Runs component testing in headless mode.')
+  }
 }
 
 export async function main ({ useNpm, ignoreTs, setupComponentTesting, ignoreExamples }: MainArgv) {
@@ -92,7 +98,7 @@ export async function main ({ useNpm, ignoreTs, setupComponentTesting, ignoreExa
   }
 
   console.log(`\n👍  Success! Cypress is installed and ready to run tests.`)
-  printCypressCommandsHelper({ useYarn })
+  printCypressCommandsHelper({ useYarn, shouldSetupComponentTesting })
 
   console.log(`\nHappy testing with ${chalk.green('cypress.io')} 🌲\n`)
 }

npm/react/examples/nextjs/cypress/components/Router.spec.jsx

@@ -2,7 +2,6 @@
 /// <reference types="cypress" />
 import * as React from 'react'
 import RouterPage from '../../pages/router'
-import { createRouter } from 'next/router'
 import { RouterContext } from 'next/dist/next-server/lib/router-context'
 import { mount } from '@cypress/react'
 
@@ -22,6 +21,9 @@ describe('Component with router usage', () => {
       reload: cy.spy(),
       back: cy.spy(),
       prefetch: cy.spy(),
+      isReady: true,
+      isPreview: false,
+      isLocaleDomain: false,
       beforePopState: cy.spy(),
     }
 
@@ -34,33 +36,6 @@ describe('Component with router usage', () => {
     cy.contains('Next.js route /testPath')
   })
 
-  it('renders the component that uses next.js with parsed query', () => {
-    // alternatively you can use next's internal `createRouter` function to create a real instance of NextRouter
-    const router = createRouter(
-      '/testPath',
-      { param1: 'param1' },
-      '/asTestPath',
-      {
-        subscription: cy.spy(),
-        initialProps: {},
-        App: cy.spy(),
-        Component: cy.spy(),
-        pageLoader: cy.spy(),
-        initialStyleSheets: [],
-        wrapApp: cy.spy(),
-        isFallback: false,
-      },
-    )
-
-    mount(
-      <RouterContext.Provider value={router}>
-        <RouterPage />
-      </RouterContext.Provider>,
-    )
-
-    cy.contains('My query: {"param1":"param1"}')
-  })
-
   it('pushes the new route', () => {
     const router = {
       pathname: '/router',
@@ -76,6 +51,9 @@ describe('Component with router usage', () => {
       reload: cy.spy(),
       back: cy.spy(),
       prefetch: cy.spy(),
+      isReady: true,
+      isPreview: false,
+      isLocaleDomain: false,
       beforePopState: cy.spy(),
     }
 

npm/react/examples/nextjs/package.json

@@ -15,12 +15,11 @@
   "devDependencies": {
     "@cypress/react": "file:../../dist",
     "@mdx-js/loader": "^1.6.16",
-    "@next/mdx": "10.0.7",
+    "@next/mdx": "10.1.2",
     "@zeit/next-sass": "^1.0.1",
     "check-code-coverage": "1.9.2",
     "cypress-circleci-reporter": "0.2.0",
-    "next": "10.0.7",
-    "webpack": "^4.44.2"
+    "next": "10.1.2"
   },
   "license": "MIT"
 }