Why is my angular 10 unit test failing only half the time?

I have a Navigation component (parent) and I have a menu component(child) nested inside of it. In my menu test spec, it seems when i run the test it passes sometimes and fails sometimes. Is there a way to wait for it to render or add some sort of delay before running the test so it will pass? It only happens to this one component and is driving me nuts.

import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {MenuComponent} from '../menu.component';
import {FaIconComponent, FontAwesomeModule} from "@fortawesome/angular-fontawesome";
import {HttpClientTestingModule} from '@angular/common/http/testing';
import {RouterTestingModule} from "@angular/router/testing";
import {By} from "@angular/platform-browser";

describe('MenuComponent', () => {
  let fixture: ComponentFixture<MenuComponent>;
  let component: MenuComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        FontAwesomeModule,
        HttpClientTestingModule,
        RouterTestingModule
      ],
      declarations: [
        MenuComponent,
        FaIconComponent
      ],
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MenuComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
      expect(component).toBeTruthy();
  });

  it('should display the menu when toggled', () => {
    component.toggleMenu();
    expect(component.open).toBe(true);
    const fixture = TestBed.createComponent(MenuComponent);
    fixture.detectChanges();
    expect(fixture.debugElement.query(By.css('#menu-contents'))).toBeDefined();
   });
});