fix: configure proper pages directory for next application (#18009)

* fix: find pages directory for next applications

* convert new files to typescript and add transpile step

* add tsconfig for plugins

Author: ZachJW34

npm/react/package.json

@@ -4,16 +4,19 @@
   "description": "Test React components using Cypress",
   "main": "dist/cypress-react.cjs.js",
   "scripts": {
-    "build": "rimraf dist && yarn rollup -c rollup.config.js",
+    "build": "rimraf dist && yarn transpile-plugins && yarn rollup -c rollup.config.js",
     "build-prod": "yarn build",
     "cy:open": "node ../../scripts/cypress.js open-ct",
     "cy:open:debug": "node --inspect-brk ../../scripts/start.js --component-testing --run-project ${PWD}",
     "cy:run": "node ../../scripts/cypress.js run-ct",
     "cy:run:debug": "node --inspect-brk ../../scripts/start.js --component-testing --run-project ${PWD}",
     "pretest": "yarn transpile",
-    "test": "yarn cy:run",
+    "test": "yarn test-unit && yarn test-component",
+    "test-unit": "mocha -r @packages/ts/register test/**/*.spec.*",
+    "test-component": "yarn cy:run",
     "test-ci": "node ../../scripts/run-ct-examples.js --examplesList=./examples.env",
     "transpile": "tsc",
+    "transpile-plugins": "yarn transpile --project ./plugins",
     "watch": "yarn build --watch --watch.exclude ./dist/**/*"
   },
   "dependencies": {

npm/react/plugins/next/findNextWebpackConfig.js

@@ -2,6 +2,7 @@
 /// <reference types="next" />
 const debug = require('debug')('@cypress/react')
 const getNextJsBaseWebpackConfig = require('next/dist/build/webpack-config').default
+const { findPagesDir } = require('../../dist/next/findPagesDir')
 
 async function getNextWebpackConfig (config) {
   let loadConfig
@@ -26,7 +27,7 @@ async function getNextWebpackConfig (config) {
       config: nextConfig,
       dev: true,
       isServer: false,
-      pagesDir: config.projectRoot,
+      pagesDir: findPagesDir(config.projectRoot),
       entrypoints: {},
       rewrites: { fallback: [], afterFiles: [], beforeFiles: [] },
     },

npm/react/plugins/next/findPagesDir.ts

@@ -0,0 +1,33 @@
+import * as fs from 'fs'
+import * as path from 'path'
+
+const existsSync = (file: string) => {
+  try {
+    fs.accessSync(file, fs.constants.F_OK)
+
+    return true
+  } catch (_) {
+    return false
+  }
+}
+
+/**
+ * Next allows the `pages` directory to be located at either
+ * `${projectRoot}/pages` or `${projectRoot}/src/pages`.
+ * If neither is found, return projectRoot
+ */
+export function findPagesDir (projectRoot: string) {
+  // prioritize ./pages over ./src/pages
+  let pagesDir = path.join(projectRoot, 'pages')
+
+  if (existsSync(pagesDir)) {
+    return pagesDir
+  }
+
+  pagesDir = path.join(projectRoot, 'src/pages')
+  if (existsSync(pagesDir)) {
+    return pagesDir
+  }
+
+  return projectRoot
+}

npm/react/plugins/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "types": [
+      "cypress",
+      "node"
+    ]
+  },
+  "include": ["./**/*.ts"]
+}

npm/react/test/fixtures/next-plugin/next-project-one/pages/foo.js

@@ -0,0 +1,19 @@
+import { expect } from 'chai'
+import * as path from 'path'
+import { findPagesDir } from '../../plugins/next/findPagesDir'
+
+describe('Next.js findPagesDir', () => {
+  it('should find the correct pagesDir', () => {
+    const nextPluginFixturePath = path.join(__dirname, '../fixtures/next-plugin')
+
+    let projectRoot = nextPluginFixturePath
+
+    expect(findPagesDir(projectRoot)).to.equal(projectRoot)
+
+    projectRoot = path.join(nextPluginFixturePath, 'next-project-one')
+    expect(findPagesDir(projectRoot)).to.equal(path.join(projectRoot, 'pages'))
+
+    projectRoot = path.join(nextPluginFixturePath, 'next-project-two')
+    expect(findPagesDir(projectRoot)).to.equal(path.join(projectRoot, 'src/pages'))
+  })
+})