{"id":13711665,"url":"https://github.com/bahmutov/cypress-angular-unit-test","last_synced_at":"2025-06-25T17:10:24.884Z","repository":{"id":38954296,"uuid":"118207433","full_name":"bahmutov/cypress-angular-unit-test","owner":"bahmutov","description":"Trying to load and bootstrap Angular component dynamically inside Cypress","archived":false,"fork":false,"pushed_at":"2025-06-18T18:15:54.000Z","size":4672,"stargazers_count":161,"open_issues_count":33,"forks_count":33,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-18T19:21:26.483Z","etag":null,"topics":["angular","cypress","cypress-io"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahmutov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"support.js","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-01-20T04:05:32.000Z","updated_at":"2025-03-23T03:25:28.000Z","dependencies_parsed_at":"2022-07-16T23:46:17.287Z","dependency_job_id":"2a7a111c-b314-434a-83d1-160c4477c850","html_url":"https://github.com/bahmutov/cypress-angular-unit-test","commit_stats":{"total_commits":768,"total_committers":9,"mean_commits":85.33333333333333,"dds":0.27734375,"last_synced_commit":"c3acd1f4d5208f0ae3a6254593d41c4e8654886b"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/bahmutov/cypress-angular-unit-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-angular-unit-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-angular-unit-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-angular-unit-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-angular-unit-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/cypress-angular-unit-test/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-angular-unit-test/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261917439,"owners_count":23229919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","cypress","cypress-io"],"created_at":"2024-08-02T23:01:10.471Z","updated_at":"2025-06-25T17:10:24.849Z","avatar_url":"https://github.com/bahmutov.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# cypress-angular-unit-test\n\n[![npm version](https://badge.fury.io/js/cypress-angular-unit-test.svg)](https://badge.fury.io/js/cypress-angular-unit-test) [![renovate-app badge][renovate-badge]][renovate-app] ![cypress version](https://img.shields.io/badge/cypress-9.7.0-brightgreen) [![ci status][ci image]][ci url] [![cypress-angular-unit-test](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/nf7zag/master\u0026style=flat\u0026logo=cypress)](https://dashboard.cypress.io/projects/nf7zag/runs)\n\n## Installation\n\n```shell\nnpm install -D cypress cypress-angular-unit-test\n```\n\nAdd to your support file\n\n```js\n// cypress/support/index.js\n// core-js 3.*\nrequire('core-js/es/reflect');\n// core-js 2.*\nrequire('core-js/es7/reflect');\nrequire('cypress-angular-unit-test/support');\n```\n\n### Webpack config\n\nCreate a new file `webpack.config.ts` in `cypress/plugins` folder.\nYou can find the file content here :\n\n- [Webpack v4.x](cypress/plugins/webpack4.config.ts)\n- [Webpack v5.x or Angular v12](cypress/plugins/webpack.config.ts)\n\n### Cypress \u003e= v7\n\n```shell\nnpm install -D @cypress/webpack-dev-server html-webpack-plugin\n```\n\nEnable component testing in `cypress.json`.\n\n```json\n{\n  \"component\": {\n    \"componentFolder\": \"src/app\",\n    \"testFiles\": \"**/*cy-spec.ts\"\n  }\n}\n```\n\nConfigure `cypress/plugins/index.js` to transpile Angular code.\n\n```javascript\nconst webpackConfig = require('./webpack.config');\nconst { startDevServer } = require('@cypress/webpack-dev-server');\n\nmodule.exports = (on, config) =\u003e {\n  on('dev-server:start', (options) =\u003e\n    startDevServer({\n      options,\n      webpackConfig,\n    }),\n  );\n  return config;\n};\n```\n\nRun `npx cypress open-ct`\n\n### Cypress \u003c v7\n\n```shell\nnpm install -D @cypress/webpack-preprocessor\n```\n\nEnable experimental component testing mode in `cypress.json` and point at the spec files. Usually they are alongside your application files in `src` folder.\n\n```json\n{\n  \"experimentalComponentTesting\": true,\n  \"componentFolder\": \"src\",\n  \"testFiles\": \"**/*cy-spec.*\"\n}\n```\n\nConfigure `cypress/plugins/index.js` to transpile Angular code.\n\n```javascript\nconst wp = require('@cypress/webpack-preprocessor');\nconst webpackConfig = require('./webpack.config');\nmodule.exports = (on, config) =\u003e {\n  const options = {\n    webpackConfig,\n  };\n  on('file:preprocessor', wp(options));\n  return config;\n};\n```\n\nRun `npx cypress open`\n\n## Use\n\n```js\nimport { mount } from 'cypress-angular-unit-test';\nimport { AppComponent } from './app.component';\n\ndescribe('AppComponent', () =\u003e {\n  it('shows the input', () =\u003e {\n    // Init Angular stuff\n    initEnv(AppComponent);\n    // You can also :\n    // initEnv({declarations: [AppComponent]});\n    // initEnv({imports: [MyModule]});\n\n    // component + any inputs object\n    mount(AppComponent, { title: 'World' });\n    // use any Cypress command afterwards\n    cy.contains('Welcome to World!');\n  });\n});\n```\n\n![Demo](images/demo.gif)\n\n## Examples\n\n| Use case                                             | Description                                                                                  |\n| ---------------------------------------------------- | -------------------------------------------------------------------------------------------- |\n| [Input](src/app/input)                               | Test inject `@Input()` value                                                                 |\n| [Output](src/app/output-subscribe)                   | Test catching `@Output()`                                                                    |\n| [Bootstrap](src/app/bootstrap-button)                | Bootstrap integration with style : `setConfig({ stylesheet: 'https://...});`                 |\n| [Add style](src/app/add-style)                       | Add custom style for testing : `setConfig({ style: 'p {background-color: blue;}' });`        |\n| [HTML mount](src/app/html-mount)                     | Mount a component with html, don't forget to call `detectChanges()` after                    |\n| [Image Snapshot](src/app/image-snapshot)             | Mount a component and visual asserting                                                       |\n| [Material](src/app/material-button)                  | Material integration                                                                         |\n| [Prime NG](src/app/primeng-button)                   | PrimeNG integration                                                                          |\n| [OnPush strategy](src/app/on-push-strat)             | Component with `changeDetection: ChangeDetectionStrategy.OnPush` need call `detectChanges()` |\n| [Directive](src/app/directives/highlight)            | Test directive with mountHtml                                                                |\n| [Pipe](src/app/pipes/capitalize)                     | Test pipe with mountHtml                                                                     |\n| [Stub service](src/app/service-stub)                 | Stub a service with Observable                                                               |\n| [Only service](src/app/my-values.service.cy-spec.ts) | Test a service without a component                                                           |\n| [Web Component](src/app/use-custom-element)          | Test a custom element with shadow dom                                                        |\n| [Assets](src/app/assets-image)                       | `assets` folder accessible by Cypress                                                        |\n| [Async](src/app/timeout)                             | Async test with `cy.tick`                                                                    |\n| [Routing](src/app/routing)                           | Test routing link                                                                            |\n| [Network](src/app/network)                           | Test with http calls                                                                         |\n| [NGRX](src/app/ngrx)                                 | NGRX store                                                                                   |\n\n## Code coverage\n\n### Integration test\n\n- Install ngx-build-plus to extends the Angular CLI's build process and instrument the code\n\n`npm i -D ngx-build-plus`\n\n- Add webpack coverage config file coverage.webpack.js to cypress folder\n\n```javascript\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.(js|ts)$/,\n        loader: 'istanbul-instrumenter-loader',\n        options: { esModules: true },\n        enforce: 'post',\n        include: require('path').join(__dirname, '..', 'src'),\n        exclude: [\n          /\\.(e2e|spec)\\.ts$/,\n          /node_modules/,\n          /(ngfactory|ngstyle)\\.js/,\n        ],\n      },\n    ],\n  },\n};\n```\n\n- Update `angular.json` to use ngx-build with extra config\n\n```json\n\"serve\": {\n  \"builder\": \"ngx-build-plus:dev-server\",\n  \"options\": {\n    \"browserTarget\": \"cypress-angular-coverage-example:build\",\n    \"extraWebpackConfig\": \"./cypress/coverage.webpack.js\"\n  },\n}\n```\n\n- Instrument JS files with istanbul for code coverage reporting\n\n`npm i -D istanbul-instrumenter-loader`\n\n- Add cypress code coverage plugin\n\n`npm install -D @cypress/code-coverage`\n\n- Then add the code below to your supportFile and pluginsFile\n\n```javascript\n// cypress/support/index.js\nimport '@cypress/code-coverage/support';\n// cypress/plugins/index.js\nmodule.exports = (on, config) =\u003e {\n  require('@cypress/code-coverage/task')(on, config);\n  return config;\n};\n```\n\nsource : \u003chttps://github.com/skylock/cypress-angular-coverage-example\u003e\n\n### Unit test\n\n- Instrument JS files with istanbul for code coverage reporting\n\n`npm i -D istanbul-instrumenter-loader`\n\n- In your `cypress/plugins/cy-ts-preprocessor.ts` add this rule\n\n```javascript\nrules: [\n  {\n    test: /\\.(js|ts)$/,\n    loader: 'istanbul-instrumenter-loader',\n    options: { esModules: true },\n    enforce: 'post',\n    include: path.join(__dirname, '../..', 'src'),\n    exclude: [/\\.(e2e|spec)\\.ts$/, /node_modules/, /(ngfactory|ngstyle)\\.js/],\n  },\n];\n```\n\n### Report\n\nYou can find the HTML report at `coverage/lcov-report/index.html`\n\n## Working\n\nI have successfully used this mounting approach to test components in other frameworks.\n\n- [cypress-vue-unit-test](https://github.com/bahmutov/cypress-vue-unit-test)\n- [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)\n- [cypress-cycle-unit-test](https://github.com/bahmutov/cypress-cycle-unit-test)\n- [cypress-svelte-unit-test](https://github.com/bahmutov/cypress-svelte-unit-test)\n- [cypress-angular-unit-test](https://github.com/bahmutov/cypress-angular-unit-test)\n- [cypress-hyperapp-unit-test](https://github.com/bahmutov/cypress-hyperapp-unit-test)\n- [cypress-angularjs-unit-test](https://github.com/bahmutov/cypress-angularjs-unit-test)\n\n## Debugging\n\nYou can turn on debugging log by setting environment variable :\n\n```bash\n// Unix\nexport DEBUG=\"cypress-angular-unit-test,cypress:webpack:stats\"\n\n// PowerShell\n$env:DEBUG=\"cypress-angular-unit-test,cypress:webpack:stats\"\n```\n\n## Development\n\nThis project only transpiles the library, to see it in action:\n\n- Install dependencies `npm i`\n- Compile the library `npm run build`\n- Open Cypress with `npx cypress open`\n\nPick any component test spec file to run\n\n[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg\n[renovate-app]: https://renovateapp.com/\n[ci image]: https://github.com/bahmutov/cypress-angular-unit-test/workflows/ci/badge.svg?branch=master\n[ci url]: https://github.com/bahmutov/cypress-angular-unit-test/actions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-angular-unit-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Fcypress-angular-unit-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-angular-unit-test/lists"}