fix: set Next.js pages to load from /pages folder (#518)

Co-authored-by: Kristian Tryggestad <[email protected]>

examples/nextjs/components/UsingHelper.jsx

@@ -0,0 +1,9 @@
+import * as React from 'react'
+
+import { hello } from './helpers';
+
+export function UsingHelper() {
+  return (
+    <>{hello()}</>
+  )
+}

examples/nextjs/components/helpers/hello-world.js

@@ -0,0 +1 @@
+export const hello = () => 'Hello World!'

examples/nextjs/components/helpers/index.js

@@ -0,0 +1 @@
+export * from './hello-world'

examples/nextjs/cypress/components/UsingHelper.spec.jsx

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import * as React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import { UsingHelper } from '../../components/UsingHelper'
+
+describe('Component using helper with * export', () => {
+  it('Renders component', () => {
+    mount(<UsingHelper />)
+
+    cy.contains('Hello World!')
+  })
+})

examples/nextjs/package.json

@@ -7,11 +7,11 @@
     "dev": "next",
     "build": "next build",
     "start": "next start",
-    "test": "cypress-expect run --min-passing 10",
+    "test": "cypress-expect run --min-passing 11",
     "cy:open": "cypress open",
     "build:static": "next build && next out",
-    "check-coverage": "check-coverage components/Search.jsx pages/index.js pages/router.js",
-    "only-covered": "only-covered components/Search.jsx pages/index.js pages/router.js"
+    "check-coverage": "check-coverage components/Search.jsx pages/index.js pages/router.js components/UsingHelper.jsx",
+    "only-covered": "only-covered components/Search.jsx components/UsingHelper.jsx components/helpers/hello-world.js components/helpers/index.js pages/index.js pages/router.js"
   },
   "devDependencies": {
     "@mdx-js/loader": "1.6.18",

plugins/next/file-preprocessor.js

@@ -1,4 +1,5 @@
 // @ts-check
+const path = require('path')
 const debug = require('debug')('cypress-react-unit-test')
 const loadConfig = require('next/dist/next-server/server/config').default
 const getNextJsBaseWebpackConfig = require('next/dist/build/webpack-config')
@@ -11,19 +12,29 @@ async function getNextWebpackConfig(config) {
     config && config.env && config.env.coverage === false
 
   debug('coverage is disabled? %o', { coverageIsDisabled })
+  debug('Cypress project %o', {
+    projectRoot: config.projectRoot,
+    componentFolder: config.componentFolder,
+  })
 
   const nextConfig = await loadConfig('development', config.projectRoot)
+
+  const configOptions = {
+    buildId: `cypress-react-unit-test-${Math.random().toString()}`,
+    config: nextConfig,
+    dev: false,
+    isServer: false,
+    // assuming the Next.js project has the entire pages in "/pages" subfolder
+    // https://github.com/bahmutov/cypress-react-unit-test/pull/517
+    pagesDir: path.join(config.projectRoot, 'pages'),
+    entrypoints: {},
+    rewrites: [],
+  }
+  debug('Next config options %o', configOptions)
+
   const nextWebpackConfig = await getNextJsBaseWebpackConfig(
     config.projectRoot,
-    {
-      buildId: `cypress-react-unit-test-${Math.random().toString()}`,
-      config: nextConfig,
-      dev: false,
-      isServer: false,
-      pagesDir: config.projectRoot,
-      entrypoints: {},
-      rewrites: [],
-    },
+    configOptions,
   )
 
   debug('resolved next.js webpack options: %o', nextWebpackConfig)