fix: configure proper pages directory for next application

[ZachJW34]

• Closes Component testing + Next JS using @cypress/react/plugins/next configures the 'pages' directory wrongly #17898

User facing changelog

NA

Additional details

Our Next.js plugin was not pointing to the correct pagesDir, causing errors to be thrown if files under projectRoot did not follow the pages export convention. This PR sets the pagesDir by looking for either {root}/pages or {root}/src/pages (Next.js conventions) and falling back to {root} if not found.

I tested this by checking out https://github.com/cypress-io/cypress-component-testing-examples and:

1. cd ./create-next-app
2. yarn
3. mkdir -p ./src/components
4. echo "export const HelloWorld = () => 'Hello World!'" >> ./src/components/HelloWorld.js
5. echo "export * from './HelloWorld'" >> ./src/components/index.js
6. Add import { HelloWorld } from '../src/components' to ./pages/index.js
7. npx cypress run-ct and see that it fails (You can run DEBUG=* npx cypress run-ct to see logs)
8. Copy new plugins folder from this branch (or entire built package) into ./node_modules/@cypress/react
9. npx cypress run-ct and see that it passes

How has the user experience changed?

NA

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub?
• 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]

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]

---

Test summary

4181 • 0 • 53 • 1 • 4

---

Run details

Project	cypress
Status	Passed
Commit	9445ee4
Started	Sep 13, 2021 4:05 AM
Ended	Sep 13, 2021 4:16 AM
Duration	10:52 💡
OS	Linux Debian - 10.9
Browser	Firefox 89

View run in Cypress Dashboard ➡️

---

Flakiness

	commands/xhr_spec.js		2
1	... > no status when request isnt forced 404
2	src/cy/commands/xhr > abort > aborts xhrs currently in flight
	commands/net_stubbing_spec.ts		1
1	network stubbing > intercepting request > can intercept utf-8 request bodies without crashing
	cypress/proxy-logging-spec.ts		1
1	Proxy Logging > request logging > fetch log shows resource type, url, method, and status code and has expected snapshots and consoleProps

---

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

[JessicaSachs]

This looks good, but we need to make sure that our code is written ts-first. If you have a sec to convert the new Javascript files into Typescript, that would be super.

[JessicaSachs]

Suggested change

	"test-unit": "mocha test/**/*.spec.js",
	"test-unit": "mocha test/**/*.spec.*",

[JessicaSachs]

For example, in TS this would be

export function findPagesDir() { /* ... */ }

[lmiller1990]

Nice job figuring this out - just need some TS and to clarify what the yarn command is for (yarn does not seem like a great name for a script in package.json).

[lmiller1990]

Is this step supposed to be called yarn? This doesn't seem correct.

[ZachJW34]

Good catch. I meant to replace line 14 with "test": "yarn test-unit && yarn test-component",

[ZachJW34]

@lmiller1990 @JessicaSachs Is the appveyor CI failure something I should be concerned about? I can't reproduce the error locally. If I do need to make a change to how I'm compiling the typescript I see two ways:

1. Move the findPagesDir.ts into the src/ directory. This makes sense because the rootDir is set as src so that's where TS files should be located.
2. Create a separate tsconfig inside of plugins.

There are more drastic changes we could make but I didn't want to change too much just for a small bug fix. Thoughts?

[JessicaSachs]

LGTM. No, Appveyor sometimes doesn't retrigger. It's usually fine, though.

[lmiller1990]

Seems the build is broken. You should be able to reproduce locally with yarn build @ZachJW34

[ZachJW34]

@lmiller1990 Looks like windows didn't like the glob pattern for tsc cli. I added a tsconfig for plugins so it should be good now.