fix(testing): handle more complex projects for react component testing

[barbados-clemens]

This change will now use @nrwl/web:webpack utilities and requires a build target to be provided in the @nrwl/cypress:cypress executor options. Using nxComponentTestingPreset will load the @nrwl/web:webpack executor options from the provided build target in order to create the webpack configuration for cypress dev server. As of right now, if it's unable to build the webpack configuration, it will fallback to the default configuration that was there before. Which will handle simple cases/can be extended as needed.

When generating a new component testing configuration, a new option for --build-target is available. this allows for manually specifying the target to use for component testing. If one isn't provided the project graph is used to try to find an existing valid build configuration by looking for parent projects that use @nrwl/web:webpack (i.e. a React App)

Potential issues

if working in a workspace without a project using @nrwl/web:webpack i.e. a publishable react lib without apps. 2 options.

1. Allow for @nrwl/cypress:cypress to accept a full configuration for @nrwl/web:webpack / make a new component testing executor that has these options (might not be ideal as new frameworks might have different needs i.e. angular)
2. generate a target that has uses @nrwl/web:webpack and pass to the component testing options. i.e. make a dummy app or add a custom ct-build target with @nrwl/web:webpack in the current project.

Current Behavior

the default webpack configuration used for cypress component testing (in react) fails when having more "complex" set ups i.e. tailwinds via setup-tailwinds generator.

Expected Behavior

things automagically work.

Related Issue(s)

Fixes #11372
Fixes #11509

[nx-cloud-staging]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 30d99d1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 12 targets

• nx affected --target=e2e --base=9999215211a8090e5a94584b7c8891e211cf852c --head=30d99d11de65ad64609ba88a5c949b7b8daf12e0 --exclude=e2e-storybook,e2e-storybook-angular,e2e-react-native,e2e-detox,e2e-make-angular-cli-faster --parallel=1
• nx affected --target=test --base=9999215211a8090e5a94584b7c8891e211cf852c --head=30d99d11de65ad64609ba88a5c949b7b8daf12e0 --parallel=1
• nx affected --target=lint --base=9999215211a8090e5a94584b7c8891e211cf852c --head=30d99d11de65ad64609ba88a5c949b7b8daf12e0 --parallel=3
• nx-cloud record -- yarn depcheck
• nx-cloud record -- yarn nx workspace-lint
• nx-cloud record -- yarn check-lock-files
• nx-cloud record -- yarn check-commit
• nx affected --target=build --base=9999215211a8090e5a94584b7c8891e211cf852c --head=30d99d11de65ad64609ba88a5c949b7b8daf12e0 --parallel=3
• nx-cloud record -- yarn nx format:check --base=9999215211a8090e5a94584b7c8891e211cf852c --head=30d99d11de65ad64609ba88a5c949b7b8daf12e0
• nx-cloud record -- yarn check-imports
• nx-cloud record -- yarn documentation
• nx build typedoc-theme

---

Sent with 💌 from NxCloud.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Updated
nx-dev	⬜️ Ignored (Inspect)		Aug 30, 2022 at 4:22PM (UTC)

[barbados-clemens]

make this handle async callback (maybe follow up PR)

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.