feat(nextjs): can set compiler when setting up nxComponentTestingPreset

[erenken]

Currently nextjs only uses the swa compiler in Cypress component testing.

To use @cypress/code-coverage you need to use babel, you can now select which compiler to use.

closed #19131

Current Behavior

Cypress Code Coverage doesn't work in a next project when using nxComponentTestingPreset from @nx/next/plugins/component-testing. Currently it works if you are using a react project and importing nxComponentTestingPreset from @nx/react/plugins/component-testing, but tests using NavLink fail because they are missing process with using this preset.

Expected Behavior

I would expect Cypress Code Coverage to work in a next and react project.

Related Issue(s)

Fixes #19131

Unable to run test on devcontainer, so that was updated to use latest version.

[vercel]

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

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
nx-dev	⬜️ Ignored (Inspect)	Visit Preview	💬 Add feedback	Nov 3, 2023 3:11am

[nx-cloud]

☁️ Nx Cloud Report

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

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 6 targets

• nx affected --target=e2e --base=9c0e6a1a983189723b6786e751097d9c1e87a24e --head=643fa2a844be993c6e9f445bdbb411ec1a7e9228 --parallel=1
• nx affected --targets=lint,test,build --base=9c0e6a1a983189723b6786e751097d9c1e87a24e --head=643fa2a844be993c6e9f445bdbb411ec1a7e9228 --parallel=3
• nx run-many -t check-imports check-commit check-lock-files check-codeowners documentation --parallel=1 --no-dte
• nx-cloud record -- nx format:check --base=9c0e6a1a983189723b6786e751097d9c1e87a24e --head=643fa2a844be993c6e9f445bdbb411ec1a7e9228
• nx documentation --no-dte
• nx affected -t e2e-macos --parallel=1 --base=9c0e6a1a983189723b6786e751097d9c1e87a24e --head=643fa2a844be993c6e9f445bdbb411ec1a7e9228

---

Sent with 💌 from NxCloud.

[mandarini]

Hey @erenken thanks for this PR! Can you please add some more tests around this?

[mandarini]

@erenken changes look good, we just need a few tests around this and the pipelines to pass! :D Just ping me when you're done and I will merge! Thank you for this PR!

[erenken]

@erenken changes look good, we just need a few tests around this and the pipelines to pass! :D Just ping me when you're done and I will merge! Thank you for this PR!

Are there any existing tests for the nxComponentTestingPreset method? I was trying to find them, and I couldn't find anything that executes the method. The only tests that have nxComponentTestingPreset in them are all doing contains or snapshot comparisons.

Just adding the line:

const result = nxComponentTestingPreset('myFile.json', {});

Produces this error:

    /lib/x86_64-linux-gnu/libc.so.6: version `GLIBC_2.33' not found (required by /workspaces/nx/packages/nx/src/native/nx.linux-x64-gnu.node)

      180 |           try {
      181 |             if (localFileExisted) {
    > 182 |               nativeBinding = require('./nx.linux-x64-gnu.node')
          |                               ^
      183 |             } else {
      184 |               nativeBinding = require('@nx/nx-linux-x64-gnu')
      185 |             }

      at CompileFunctionRuntime._loadModule (../../node_modules/.pnpm/jest-runtime@29.5.0/node_modules/jest-runtime/build/index.js:1009:29)
      at Object.<anonymous> (../nx/src/native/index.js:182:31)
      at Object.<anonymous> (../nx/src/hasher/task-hasher.ts:23:1)
      at Object.<anonymous> (../nx/src/hasher/hash-task.ts:4:1)
      at Object.<anonymous> (../nx/src/tasks-runner/task-orchestrator.ts:21:1)
      at Object.<anonymous> (../nx/src/tasks-runner/default-tasks-runner.ts:2:1)
      at Object.<anonymous> (../devkit/nx-reexports-pre16.ts:209:1)
      at Object.<anonymous> (../devkit/index.js:21:20)
      at Object.<anonymous> (../cypress/src/utils/ct-helpers.ts:2:1)
      at Object.<anonymous> (plugins/component-testing.ts:1:1)
      at Object.<anonymous> (plugins/component-testing.spec.ts:1:1)

When I comment out that line no errors and the tests pass. Any recommendations? I am running in the devcontainer.

I did run

sudo apt update
sudo apt upgrade

Also tried install libc6 and get libc6 is already the newest version (2.31-13+deb11u7).

Well, hey, I got passed that error. I had to update the devcontainer.json to use a newer image:

"image": "mcr.microsoft.com/devcontainers/typescript-node:latest"

[erenken]

Never mind, I got it all working after updating the devcontainer. Pushing tests soon.

[mandarini]

@barbados-clemens adding you in this conversation to take a look! :D

[erenken]

@mandarini I got all the changes that you and @barbados-clemens wanted. I removed the packages I added to packages.json and created E2E test, and everything is passing. If I missed something or you need more, please let me know. I would like to get this merged in so we can get code coverage working in our project.

[barbados-clemens]

looks like the package.json changes are still there can you revert those real quick?

[erenken]

I know it looks like the main-linux failed, but I think it just needs to be re-ran. I have found that these pipelines are very temperamental and the only way to re-run them is to commit a change or update from master. It was working before the last update from master.

[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.