Simplifying Angular testbed setup by converting to synchronous test hooks

When we use Angular’s schematics to generate components, unnecessary asynchronous code is added to the test setup hook for its test suite.

The following test setup is generated by Angular’s component generation schematic:

beforeEach(async () => …


This content originally appeared on DEV Community and was authored by Lars Gyrup Brink Nielsen

When we use Angular's schematics to generate components, unnecessary asynchronous code is added to the test setup hook for its test suite.

The following test setup is generated by Angular's component generation schematic:

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [MyComponent],
  }).compileComponents();
});
Angular testbed setup generated by the component schematic.

Alternatively, we might be using Angular's waitForAsync test function wrapper (formerly named async) as seen in the following code snippet:

beforeEach(waitForAsync(() => {
  TestBed.configureTestingModule({
    declarations: [MyComponent],
  }).compileComponents();
}));
Angular testbed setup using waitForAsync.

Here's the deal: It's only necessary to call the static TestBed.compileComponents method if we're not using the Angular CLI to run our tests (who would do such a thing, Google? 👈😏).

The Angular CLI compiles our application and tests before the tests are run so no asynchronous action is needed for setting up the declarables.

Let's simplify the common test setup by leaving out async-await, waitForAsync, and even the TestBed.createComponent invocation as seen in this code snippet:

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [MyComponent],
  });
});
Simplified Angular testbed setup.

The following points are true for common Angular testbed setup for tests covering all types of Angular declarables:

  • No need to use async-await
  • No need to use waitForAsync (formerly named async)
  • No need to call TestBed.compileComponents

Of course, there might be other reasons for introducing asynchronicity to our test setup but compiling and linking declarables is not one of them.

Enjoy a little less boilerplate in your Angular tests 🌞


This content originally appeared on DEV Community and was authored by Lars Gyrup Brink Nielsen


Print Share Comment Cite Upload Translate Updates
APA

Lars Gyrup Brink Nielsen | Sciencx (2021-10-30T22:10:01+00:00) Simplifying Angular testbed setup by converting to synchronous test hooks. Retrieved from https://www.scien.cx/2021/10/30/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks/

MLA
" » Simplifying Angular testbed setup by converting to synchronous test hooks." Lars Gyrup Brink Nielsen | Sciencx - Saturday October 30, 2021, https://www.scien.cx/2021/10/30/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks/
HARVARD
Lars Gyrup Brink Nielsen | Sciencx Saturday October 30, 2021 » Simplifying Angular testbed setup by converting to synchronous test hooks., viewed ,<https://www.scien.cx/2021/10/30/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks/>
VANCOUVER
Lars Gyrup Brink Nielsen | Sciencx - » Simplifying Angular testbed setup by converting to synchronous test hooks. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/30/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks/
CHICAGO
" » Simplifying Angular testbed setup by converting to synchronous test hooks." Lars Gyrup Brink Nielsen | Sciencx - Accessed . https://www.scien.cx/2021/10/30/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks/
IEEE
" » Simplifying Angular testbed setup by converting to synchronous test hooks." Lars Gyrup Brink Nielsen | Sciencx [Online]. Available: https://www.scien.cx/2021/10/30/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks/. [Accessed: ]
rf:citation
» Simplifying Angular testbed setup by converting to synchronous test hooks | Lars Gyrup Brink Nielsen | Sciencx | https://www.scien.cx/2021/10/30/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.