ng_dev
ng_dev

Reputation: 155

Are test.ts and test-acceptance.ts not required from Angularv15 onwards?

I have upgraded to Angular15 recently, but unit tests weren't running, after some exploring, I got to know that main:"test.ts" needs to be removed from angular.json's test block, and instead add zone.ts, zone.js/testing (also src/polyfills.ts depending upon unit test errors), to the polyfills array in the same test block.

So, Angular v15 upgrade automatically removes context block from test.ts file, so now both the test.ts and test-acceptance.ts have only the getTestbed().initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting());

except that the test.ts has teardown: { destroyAfterEach: false} whereas test-acceptance.ts doesnt have that property.

So, I am a bit confused,like why the official documentation for v15 upgrade didnt mention about this changes at all.

After making above mentioned angular.json changes, I was still getting errors while running jasmine unit tests and acceptance tests, when run together, but when run individual tests separately, they are passing.

Some tests failed due to: "NG0205: Injector has already been destroyed"

and then the other major issue I noticed was UI components used to render in karma browser, when we run ng test, but after the above changes after v15 upgrade, the UI components were not rendering properly, mostly I could say they flicker and run so quickly that human's eye cant notice what the Karma is testing on UI.

I have even tried changing the teardown propert from false to true in test.ts , and tried adding the same block in test-acceptance.ts too, but the issues remained same.

So, again after referring to so many articles and Stackoverflow posts, I have implemented the below mentioned changes:

  1. Deleted test.ts & tes-acceptance.ts files and these file references in tsconfig.spec.json tsconfig.acceptance.json files array block.

2.Removed src/test-acceptance.ts attribute from the "acceptance" and "acceptance-headless" scripts of package.json file.

3.Added beforeAll(() => { TestBed.resetTestEnvironment(); TestBed.initTestEnvironment( BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { teardown: { destroyAfterEach: false } }, ); });

in app.component.spec.ts file.

Now, I can see the UI components rendering normally like earlier i.e., how it used to work before v15 upgrade, and NG0205 error is not popping up at all.

So, all these steps I implemented are correct or not? I am novice in unit testing, so seeking senior devs suggestions/opinions, whether the approaches I have followed are correct or incorrect as per v15 Angular. Thanks in advance.

Upvotes: 1

Views: 206

Answers (0)

Related Questions