Angular - Cypress component test failure

[zijam]

Current Behavior

Trying to run a component-test with following command npx nx component-test login, but it fails with Error: Missing executor options "main"

Expected Behavior

To run Cypress Component Testing

Steps to Reproduce

Used following guide: https://nx.dev/cypress/cypress-component-testing

npx nx g @nrwl/angular:cypress-component-configuration --project=login --generate-tests --build-target=login:build
npx nx component-test login

The generator created this file login.component.cy.ts

import { mount, MountConfig } from 'cypress/angular';

import { LoginComponent } from './login.component';

describe(LoginComponent.name, () => {
  const config: MountConfig<LoginComponent> = {
    declarations: [],
    imports: [],
    providers: [],
  };

  it('renders', () => {
    mount(LoginComponent, {
      ...config,
      componentProperties: {
        invalidCredentials: false,
        logo: '',
      },
    });
  });
});

My Cypress config file: test-ui/libs/login/cypress.config.ts

import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';
import { defineConfig } from 'cypress';

export default defineConfig({
  // eslint-disable-next-line unicorn/prefer-module
  component: nxComponentTestingPreset(__filename)
});

Failure Logs

~/workspace/test-ui  main* ❯ npx nx component-test login
> nx run login:component-test

Your configFile is invalid: /Users/siyalrach/workspace/test-ui/libs/login/cypress.config.ts

It threw an error when required, check the stack trace below:

Error: Missing executor options "main"
    at withSchemaDefaults (/Users/siyalrach/workspace/test-ui/packages/angular/plugins/component-testing.ts:231:11)
    at normalizeBuildTargetOptions (/Users/siyalrach/workspace/test-ui/packages/angular/plugins/component-testing.ts:167:24)
    at nxComponentTestingPreset (/Users/siyalrach/workspace/test-ui/packages/angular/plugins/component-testing.ts:95:34)
    at Object.<anonymous> (/Users/siyalrach/workspace/test-ui/libs/login/cypress.config.ts:6:38)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Module.m._compile (/Users/siyalrach/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/src/index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/siyalrach/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/ts-node/src/index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadFile (/Users/siyalrach/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:89:14)
    at EventEmitter.<anonymous> (/Users/siyalrach/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_require_async_child.js:116:38)
    at EventEmitter.emit (node:events:527:28)
    at EventEmitter.emit (node:domain:475:12)
    at process.<anonymous> (/Users/siyalrach/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:527:28)
    at process.emit (node:domain:475:12)
    at process.emit.sharedData.processEmitHook.installedValue [as emit] (/Users/siyalrach/Library/Caches/Cypress/10.8.0/Cypress.app/Contents/Resources/app/node_modules/@cspotcode/source-map-support/source-map-support.js:745:40)
    at emit (node:internal/child_process:938:14)
    at processTicksAndRejections (node:internal/process/task_queues:84:21)

Environment

~/workspace/test-ui main* ❯ npx nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.15.1
   OS   : darwin arm64
   npm  : 8.19.2
   
   nx : 14.7.6
   @nrwl/angular : 14.7.6
   @nrwl/cypress : 14.7.6
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.7.6
   @nrwl/eslint-plugin-nx : 14.7.6
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 14.7.6
   @nrwl/js : 14.7.6
   @nrwl/linter : 14.7.6
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : Not Found
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.7.6
   @nrwl/web : Not Found
   @nrwl/workspace : 14.7.6
   typescript : 4.8.3
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:
         @storybook/angular: 6.5.12

[kevgk]

We're having the same issue, trying to component test an angular UI library, which has no main.
Tested with "@nrwl/cypress": "14.7.13", "@nrwl/angular": "14.7.13" and "cypress": "^10.8.0".

[barbados-clemens]

odds are your buildTarget being used is not an angular app but instead an angular library.

can you post the build target the login project you used?

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[quirin-buechner-mdctec]

We're having the same issue, trying to component test an angular UI library.
Tested with "@nrwl/cypress": "15.1.1", "@nrwl/angular": "15.1.1" and "cypress": "11.2.0".

We tried to define an extra build target for the library project like this:

{
    "projectType": "library",
    // [...]
    "targets": {
        // [...]
        "build-component-test": {
            "executor": "@nrwl/angular:webpack-browser",
            "options": {
                "outputPath": "dist/libs/cb-template-feature/ui",
                "index": "libs/cb-template-feature/ui/cypress/index.html", // <- extra file created manually just for component testing
                "main": "libs/cb-template-feature/ui/cypress/main.ts",  // <- extra file created manually just for component testing
                "tsConfig": "libs/cb-template-feature/ui/tsconfig.e2e.json",
                "customWebpackConfig": {
                    "path": "libs/cb-template-feature/ui/cypress/webpack.config.js"
                }
            }
        },
        "component-test": {
            "executor": "@nrwl/cypress:cypress",
            "options": {
                "cypressConfig": "libs/cb-template-feature/ui/cypress.config.ts",
                "testingType": "component",
                "skipServe": true,
                "devServerTarget": "cb-template-feature-ui:build-component-test"
            }
        }
    }
}

But we got the following error:

> nx run cb-template-feature-ui:component-test

Your configFile is invalid:  ...\libs\cb-template-feature\ui\cypress.config.ts

It threw an error when required, check the stack trace below:
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at new NodeError (node:internal/errors:371:5)
    at validateString (node:internal/validators:120:11)
    at Object.join (node:path:429:7)
    at joinPathFragments
    at normalizeBuildTargetOptions 
    at nxComponentTestingPreset 
    at Object.<anonymous> 
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Module.m._compile 
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.require.extensions.<computed> [as .ts] 
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadFile 
    at EventEmitter.<anonymous> 
    at EventEmitter.emit (node:events:520:28)
    at EventEmitter.emit (node:domain:475:12)
    at process.<anonymous> 
    at process.emit (node:events:520:28)
    at process.emit (node:domain:475:12)


 —————————————————————————————————————————————————————————

 >  NX   Ran target component-test for project cb-template-feature-ui (3s)

    ×    1/1 failed
    √    0/1 succeeded [0 read from cache]

[barbados-clemens]

@quirin-buechner-mdctec it looks like I didn't null check the polyfills property before trying to use it in the CT preset.

should be fixed here: #16411

You can get around it by adding the it as an executor option for build-component-test target you have. should be able to set it to an empty string if you don't have any polyfills you wish to apply as well.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.