Simplifying Angular testbed setup by converting to synchronous test hooks
source link: https://dev.to/this-is-angular/simplifying-angular-testbed-setup-by-converting-to-synchronous-test-hooks-19cl
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Configuring the Angular testbed (2 Part Series)
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();
});
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();
}));
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],
});
});
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 namedasync
) - 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 🌞
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK