Cypress with Angular : No API call happening while running component Test

Question

configured component testing for our project and its working but no API calls are happening.

In this project only Cypress E2E test working fine with all API calls.

is there any configuration need to angular project for component test?

Details:

"cypress": "11.2.0",

"@angular/cli": "14.2.6"

    import {defineConfig} from 'cypress'
    
    export default defineConfig({
    
      e2e: {
        defaultCommandTimeout: 15000,
        requestTimeout: 15000,
        responseTimeout: 15000,
        video: false,
        viewportWidth: 2000,
        viewportHeight: 1200,
        chromeWebSecurity: false,
        watchForFileChanges: true,
        waitForAnimations: true,
        experimentalRunAllSpecs: true,
        baseUrl: 'http://localhost:4200/',
        specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
    
        env: {
          recoverFromRendererCrashes: true,
          user: *****,
          password: ****,
          url: 'http://localhost:8080/',
    
        }
      },

  component: {
    devServer: {
      framework: "angular",
      bundler: "webpack",
    },
    specPattern: "**/*.cy.ts",
  },
    })

score 2 · Answer 1 · answered Jun 20 '23 at 08:53

According to the Angular Component Testing documentation, there is a section for build options in the configuration.

This gives more details to the Cypress bundler about artifacts that are normally picked up by the Angular compiler.

cypress.config.ts

import { defineConfig } from 'cypress'

export default {
  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
      options: {
        projectConfig: {
          root: '',
          sourceRoot: 'apps/my-app',
          buildOptions: {
            outputPath: 'dist/my-app',
            index: 'apps/my-app/src/index.html',
            main: 'apps/my-app/src/main.ts',
            polyfills: 'apps/my-app/src/polyfills.ts',
            tsConfig: 'apps/my-app/tsconfig.app.json',
            inlineStyleLanguage: 'scss',
            assets: ['apps/my-app/src/favicon.ico', 'apps/my-app/src/assets'],
            styles: ['apps/my-app/src/styles.scss'],
            scripts: [],
            buildOptimizer: false,
            optimization: false,
            vendorChunk: true,
            extractLicenses: false,
            sourceMap: true,
            namedChunks: true,
          },
        },
      },
    },
  },
}

Cypress with Angular : No API call happening while running component Test

1 Answers1