{"id":18806002,"url":"https://github.com/m-thompson-code/dynamic-comp-test","last_synced_at":"2025-10-10T10:08:56.249Z","repository":{"id":102503903,"uuid":"358951656","full_name":"m-thompson-code/dynamic-comp-test","owner":"m-thompson-code","description":null,"archived":false,"fork":false,"pushed_at":"2021-04-17T21:15:16.000Z","size":189,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-14T18:41:22.973Z","etag":null,"topics":[],"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/m-thompson-code.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":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-17T18:18:37.000Z","updated_at":"2021-04-17T21:15:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"8e1553bf-4b22-4ac7-bbd2-fa2c04528267","html_url":"https://github.com/m-thompson-code/dynamic-comp-test","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-comp-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-comp-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-comp-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m-thompson-code%2Fdynamic-comp-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m-thompson-code","download_url":"https://codeload.github.com/m-thompson-code/dynamic-comp-test/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239742363,"owners_count":19689308,"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":[],"created_at":"2024-11-07T22:45:54.217Z","updated_at":"2025-10-10T10:08:51.218Z","avatar_url":"https://github.com/m-thompson-code.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DynamicCompTest\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.2.6.\n\nQuick app showcasing how to render components at dynamically at runtime.\n\nOn the `jest` branch, I've swapped out karam for jest and this runs into problems involving Ivy for tests.\n\nThis project is meant to showcase how to tell unit tests are not running with Ivy enabled and uses a situation where the codebase is affected (rendering dynamic components at runtime)\n\n### Notes about switching branches\n\nBe sure to run `npm run reinstall` (clears node_modules and runs `npm install`) when switching from `main` branch to `jest`.\n\nClearing node_modules is important for recreating the issue for jest since the \"fix\" is permanent as long as node_modules isn't deleted\n\n### main\n\nIf you run `npm run test`, everything is good. Karma better than jest proven. Everyone can go home now.\n\n\n### jest\n\nIf you run `npm run test`, you'll get some errors\n\ntl;dr Ivy isn't enabled when running jest unit tests by default, and this causes problems.\n\nSteps to recreate:\n\n1. comment out the 'should have ivy enabled' test in `app.component.specs`\n2. run `npm run test` or `npx jest`\n\nYou should see the following error:\n\n```bash\nUnhandledPromiseRejectionWarning: TypeError: Converting circular structure to JSON\n    --\u003e starting at object with constructor 'Object'\n    |     property 'element' -\u003e object with constructor 'Object'\n    |     property 'componentProvider' -\u003e object with constructor 'Object'\n    --- property 'parent' closes the circle\n```\n\nThis error isn't really clear, so let's add the --detectOpenHandles argument:\n\n`npm run test -- --detectOpenHandles` or `npx jest --detectOpenHandles`\n\n```bash\nAppComponent › how the dyamic component works › should have a blue background\n\n    No component factory found for DynamicComponent. Did you add it to @NgModule.entryComponents?\n```\n\nNaively one might try to add the `DynamicComponent` to `entryComponents` for `DynamicModule` since this is how things were done before Ivy, but since this project has Ivy enabled (which is the new default since Angular 9), this shouldn't be a problem.\n\nIf you do add add `DynamicComponent` to `entryComponents` (which is commented out on `DynamicModule`), the error does go away.\n\nHowever this would mean that Ivy isn't enabled for testing.\n\nTo confirm this, uncomment the 'should have ivy enabled' test in `app.component.specs`:\n\n```bash\nAppComponent › should have ivy enabled\n\n    expect(received).toBe(expected) // Object.is equality\n\n    Expected: true\n```\n\nTo bypass this issue, there is a commented out line of code in `jest.config.js` found at the root of the project:\n\n`require('jest-preset-angular/ngcc-jest-processor');`\n\nWhen including this line, jest now runs `ngcc` before running the tests:\n\n```bash\n ngcc-jest-processor: running ngcc\n\n ...\n\n PASS  src/app/dynamic/dynamic/dynamic.component.spec.ts\n PASS  src/app/app.component.spec.ts\n\nTest Suites: 2 passed, 2 total\nTests:       5 passed, 5 total\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fdynamic-comp-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm-thompson-code%2Fdynamic-comp-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm-thompson-code%2Fdynamic-comp-test/lists"}