feat(nextjs): can set compiler when setting up `nxComponentTestingPre…

…set`

Currently nextjs only uses the *swa* compiler

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

closed nrwl#19131

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
 {
   "name": "NxDevContainer",
   // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:0-18",
+  "image": "mcr.microsoft.com/devcontainers/typescript-node:latest",
   "features": {
     "ghcr.io/devcontainers/features/rust:1": {}
   },

package.json

@@ -149,6 +149,7 @@
     "conventional-changelog-cli": "^2.0.23",
     "convert-source-map": "^2.0.0",
     "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.0",
     "cypress": "^13.0.0",
     "cytoscape": "^3.18.2",
@@ -237,6 +238,7 @@
     "parse5": "4.0.0",
     "postcss": "8.4.19",
     "postcss-import": "~14.1.0",
+    "postcss-loader": "^7.3.3",
     "postcss-preset-env": "~7.5.0",
     "postcss-url": "~10.1.3",
     "prettier": "^2.6.2",
@@ -267,6 +269,7 @@
     "styled-components": "5.3.6",
     "stylus": "0.59.0",
     "stylus-loader": "7.1.0",
+    "swc-loader": "^0.2.3",
     "tar-fs": "^2.1.1",
     "tar-stream": "~2.2.0",
     "tcp-port-used": "^1.0.2",

packages/next/plugins/component-testing.spec.ts

@@ -0,0 +1,62 @@
+import { NxComponentTestingOptions } from '@nx/cypress/plugins/cypress-preset';
+import { nxComponentTestingPreset } from './component-testing';
+
+describe('nxComponentTestingPreset', () => {
+  describe('compiler', () => {
+    it('should default to swc', () => {
+      const result = nxComponentTestingPreset(__filename, {});
+
+      expect(
+        result.devServer.webpackConfig.module.rules.some((rule: any) =>
+          rule.loader?.includes('swc-loader')
+        )
+      ).toBe(true);
+
+      expect(
+        result.devServer.webpackConfig.module.rules.some((rule: any) =>
+          rule.loader?.includes('babel')
+        )
+      ).toBe(false);
+    });
+
+    it('set compiler to swc contains swc', () => {
+      const options: NxComponentTestingOptions = {
+        compiler: 'swc',
+      };
+
+      const result = nxComponentTestingPreset(__filename, options);
+
+      expect(
+        result.devServer.webpackConfig.module.rules.some((rule: any) =>
+          rule.loader?.includes('swc-loader')
+        )
+      ).toBe(true);
+
+      expect(
+        result.devServer.webpackConfig.module.rules.some((rule: any) =>
+          rule.loader?.includes('web-babel-loader')
+        )
+      ).toBe(false);
+    });
+
+    it('set compiler to babel contains babel', () => {
+      const options: NxComponentTestingOptions = {
+        compiler: 'babel',
+      };
+
+      const result = nxComponentTestingPreset(__filename, options);
+
+      expect(
+        result.devServer.webpackConfig.module.rules.some((rule: any) =>
+          rule.loader?.includes('web-babel-loader')
+        )
+      ).toBe(true);
+
+      expect(
+        result.devServer.webpackConfig.module.rules.some((rule: any) =>
+          rule.loader?.includes('swc-loader')
+        )
+      ).toBe(false);
+    });
+  });
+});

packages/next/project.json

@@ -59,6 +59,12 @@
     "add-extra-dependencies": {
       "command": "node ./scripts/add-dependency-to-build.js next @nrwl/next"
     },
-    "lint": {}
+    "lint": {},
+    "component-test": {
+      "executor": "@nx/cypress:cypress",
+      "options": {
+        "cypressConfig": "cypress-component-test.config.ts"
+      }
+    }
   }
 }