Angular testing, currency pipe not found

Question

I am making use of the native angular currency pipe within my components. and it's working as it should, but when I try to unit test my component, there is an error saying:

I am using Angular 10 with Ivy and have imported the CommonModule, though no avail. Online I could only find this error when using a custom pipe, did I forget to register something? Any help is much appreciated.

My component file

<div class="jumbotron-wrapper relative">
    <div class="w-full grid grid-cols-12 h-full items-center ">
        <div class="break-words col-start-2 col-span-7">

            <div class="flex w-full justify-between">
                <div class=" text-2xl sm:text-3xl text-white mb-2 sm:mb-0 ">
                    <fa-icon [icon]="backArrow" class="text-2xl mr-4"></fa-icon> Terug naar overzicht
                </div>
            </div>
        </div>
        <div class="col-start-9 col-span-3">
        </div>
    </div>

    <div class="content-wrapper">
        <div class="w-full grid grid-cols-12 h-full items-center ">
            <div class="flex flex-col col-start-2 col-span-10 bg-white mb-8">

                <div class="flex flex-row justify-between mb-1 p-8 ">

                    <fa-icon [icon]="assetTypeIcon" class="text-3xl text-abn-green"></fa-icon>

                    <div class="text-right">
                        <p style="color: grey;">Totale facilitieit</p>
                        <p class="text-abn-green text-xl font-semibold">&euro;9.876.750,00</p>
                    </div>


                </div>

                <div class="px-8 mb-16">
                    <abf-lease-bar></abf-lease-bar>
                    <abf-lease-bar useDivisions="true" [alreadyLeasedAmount]="225000" [availableForLeaseAmount]="250000"
                        [currentlyReservedLeaseAmount]="12500" useLegenda="true"></abf-lease-bar>
                </div>


                <div class="w-full flex flex-col light-blue-bg p-8 ">
                    <div class="flex flex-col md:flex-row justify-between">
                        <h3 class="text-2xl">Factuur 2636532 - In behandeling</h3>
                        <p class="text-2xl mt-4 md:mt-0">{{12500 | currency: 'EUR'}}</p>
                    </div>
                    <div class=" flex-row-reverse md:flex-row col-span-10 mt-8 valign-top">

                        <div class="flex md:inline-flex w-12/12 mb-8 md:mb-0 md:w-3/12 ">
                            <div
                                class="flex flex-col  h-64 lg:h-80 w-full border-dashed border border-gray-700 bg-gray-300 relative">
                                <div class="absolute right-15 top-15 w-8 h-8 bg-white action-enlarge" title="enlarge">
                                    e
                                </div>
                                <div class="absolute right-15 top-15 w-8 h-8 bg-white action-delete" title="delete">
                                    2
                                </div>
                            </div>
                        </div>
                        <div class="md:visible md:inline-flex w-12/12 md:w-9/12 md:pl-8 lg:w-9/12  h-full valign-top ">
                            <div class="w-12/12 md:w-full h-auto">

                                <abf-panel [opened]="leaseObjectPanelIsOpen" [headerText]="'Te leasen object'"
                                    [usePrice]="true" [totalPrice]="12500" [pricePerMonth]="750"
                                    (toggleOutput)="toggleLeaseObjectPanel()">
                                    <div class="fake-form">
                                        <p>Te leasen object info.</p>
                                    </div>

                                </abf-panel>

                                <div class="flex flex-col md:flex-row justify-between  mb-4 md:mb-12 mt-8">

                                    <div class="text-left w-full mb-4 md:mb-0  md:w-3/12">
                                        <h4 class="text-sm text-abn-green">Leverancier</h4>
                                        <p>Van Udenhout</p>
                                    </div>

                                    <div class="text-left w-full mb-4 md:mb-0  md:w-3/12">
                                        <h4 class="text-sm text-abn-green">Factuurnummer</h4>
                                        <p>00000123451</p>
                                    </div>
                                    <div class="text-left w-full mb-4 md:mb-0  md:w-3/12">
                                        <h4 class="text-sm text-abn-green">BTW ID</h4>
                                        <p>5123151</p>
                                    </div>
                                </div>

                                <div class="flex flex-col md:flex-row justify-between mb-4 md:mb-12">

                                    <div class="text-left w-full mb-4 md:mb-0  md:w-3/12">
                                        <h4 class="text-sm text-abn-green">IBAN leverancier</h4>
                                        <p>NL12 ABNA 0236512512</p>
                                    </div>

                                    <div class="text-left w-full mb-4 md:mb-0  md:w-3/12">
                                        <h4 class="text-sm text-abn-green">KVK nr.</h4>
                                        <p>87278237</p>
                                    </div>
                                    <div class="text-left w-full hidden md:visible mb-4 md:mb-0 md:w-3/12">
                                        &nbsp;
                                    </div>
                                </div>
                                <div class="flex flex-col md:flex-row justify-between mb-12">

                                    <div class="text-left w-full mb-4 md:mb-0 md:w-3/12">
                                        <h4 class="text-sm text-abn-green">Bedrag incl. BTW</h4>
                                        <p>{{12500 | currency: 'EUR'}}}</p>
                                    </div>

                                    <div class="text-left w-full mb-4 md:mb-0  md:w-3/12">
                                        <h4 class="text-sm text-abn-green">Bedrag ex. BTW</h4>
                                        <p>{{9875 | currency: 'EUR'}}}</p>
                                    </div>
                                    <div class="text-left w-full mb-4 md:mb-0  md:w-3/12">
                                        <h4 class="text-sm text-abn-green">BTW bedrag</h4>
                                        <p>{{ 1625 | currency: 'EUR'}}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            </div>


        </div>
    </div>
</div>

My unit test file:

import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterModule } from '@angular/router';
import { AppModule } from 'apps/login/src/app/app.module';

import { ContractDetailsComponent } from './contract-details.component';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        RouterModule.forRoot([]),
        CommonModule
      ],

      declarations: [],
      providers: [AppModule, { provide: APP_BASE_HREF, useValue: '/' }],
    })
      .compileComponents();
  });

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

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

Answer 1

just put your component into declarations section. this will make your component as part of a module, and, you will be able to use other components from this module inside of your component

declaraions: [ContractDetailsComponent],