I am facing this error while testing using Jasmine. I have created a custom pipe that sorts the list according to the selected parameter.

I have imported everything as per my knowledge. Also, the code is being executed properly without any issues. Yet I am facing this issue using Jasmine.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './appponent';

import {FormsModule } from '@angular/forms';
import { SortPipe } from './sort.pipe';
import { CustomPipeComponent } from './custom-pipe/custom-pipeponent';
import { CustpipeComponent } from './custpipe/custpipeponent';
import { RideFilterPipePipe } from './ride-filter-pipe.pipe';
import { ReactFormComponent } from './react-form/react-formponent';
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-formponent';
import { EmailValidator } from './template-driven-form/emailValidator';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    SortPipe,
    CustpipeComponent,
    RideFilterPipePipe,
    ReactFormComponent,
    TemplateDrivenFormComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule      
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

custom-pipeponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-pipe',
  templateUrl: './custom-pipeponent.html',
  styleUrls: ['./custom-pipeponent.css']
})
export class CustomPipeComponent implements OnInit {
  sortoption: string = '';
  productsList: any = [
    { productName: 'Samsung J7', price: 18000 },
    { productName: 'Apple iPhone 6S', price: 60000 },
    { productName: 'Lenovo K5 Note', price: 10000 },
    { productName: 'Nokia 6', price: 15000 },
    { productName: 'Vivo V5 Plus', price: 26000 },
  ];
  constructor() { }

  ngOnInit(): void {
  }

}

custom-pipeponent.html

<h2>Sorting Products list using custom pipe</h2>
Sort the list based on
<select [(ngModel)]="sortoption">
  <option value="prodName">Product Name</option>
  <option value="price">Price</option>
</select>
<br /><br />
<table border="1">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let products of productsList | sort: sortoption " >
      <td>{{ products.productName }}</td>
      <td>{{ products.price }}</td>
    </tr>
  </tbody>
</table>

sort.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {
  transform(value: any[], args?: any): any[] {
    if (args === 'prodName') {
      return value.sort((a: any, b: any) => {
        if (a.productName < b.productName) {
          return -1;
        } else if (a.productName > b.productName) {
          return 1;
        } else {
          return 0;
        }
      });
    } else if (args === 'price') {
      return value.sort((a: any, b: any) => {
        if (a.price < b.price) {
          return -1;
        } else if (a.price > b.price) {
          return 1;
        } else {
          return 0;
        }
      });
    }
    return value;
  }
}

customer-pipeponent.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomPipeComponent } from './custom-pipeponent';

describe('CustomPipeComponent', () => {
  let ponent: CustomPipeComponent;
  let fixture: ComponentFixture<CustomPipeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent ]
    })
    pileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CustomPipeComponent);
    ponent = fixtureponentInstance;
    fixture.detectChanges();
  });

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

sort.pipe.spec.ts

import { SortPipe } from './sort.pipe';

describe('SortPipe', () => {
  it('create an instance', () => {
    const pipe = new SortPipe();
    expect(pipe).toBeTruthy();
  });
});

I am facing this error while testing using Jasmine. I have created a custom pipe that sorts the list according to the selected parameter.

I have imported everything as per my knowledge. Also, the code is being executed properly without any issues. Yet I am facing this issue using Jasmine.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.ponent';

import {FormsModule } from '@angular/forms';
import { SortPipe } from './sort.pipe';
import { CustomPipeComponent } from './custom-pipe/custom-pipe.ponent';
import { CustpipeComponent } from './custpipe/custpipe.ponent';
import { RideFilterPipePipe } from './ride-filter-pipe.pipe';
import { ReactFormComponent } from './react-form/react-form.ponent';
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.ponent';
import { EmailValidator } from './template-driven-form/emailValidator';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    SortPipe,
    CustpipeComponent,
    RideFilterPipePipe,
    ReactFormComponent,
    TemplateDrivenFormComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule      
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

custom-pipe.ponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-pipe',
  templateUrl: './custom-pipe.ponent.html',
  styleUrls: ['./custom-pipe.ponent.css']
})
export class CustomPipeComponent implements OnInit {
  sortoption: string = '';
  productsList: any = [
    { productName: 'Samsung J7', price: 18000 },
    { productName: 'Apple iPhone 6S', price: 60000 },
    { productName: 'Lenovo K5 Note', price: 10000 },
    { productName: 'Nokia 6', price: 15000 },
    { productName: 'Vivo V5 Plus', price: 26000 },
  ];
  constructor() { }

  ngOnInit(): void {
  }

}

custom-pipe.ponent.html

<h2>Sorting Products list using custom pipe</h2>
Sort the list based on
<select [(ngModel)]="sortoption">
  <option value="prodName">Product Name</option>
  <option value="price">Price</option>
</select>
<br /><br />
<table border="1">
  <thead>
    <tr>
      <th>Product Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let products of productsList | sort: sortoption " >
      <td>{{ products.productName }}</td>
      <td>{{ products.price }}</td>
    </tr>
  </tbody>
</table>

sort.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'sort',
})
export class SortPipe implements PipeTransform {
  transform(value: any[], args?: any): any[] {
    if (args === 'prodName') {
      return value.sort((a: any, b: any) => {
        if (a.productName < b.productName) {
          return -1;
        } else if (a.productName > b.productName) {
          return 1;
        } else {
          return 0;
        }
      });
    } else if (args === 'price') {
      return value.sort((a: any, b: any) => {
        if (a.price < b.price) {
          return -1;
        } else if (a.price > b.price) {
          return 1;
        } else {
          return 0;
        }
      });
    }
    return value;
  }
}

customer-pipe.ponent.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomPipeComponent } from './custom-pipe.ponent';

describe('CustomPipeComponent', () => {
  let ponent: CustomPipeComponent;
  let fixture: ComponentFixture<CustomPipeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent ]
    })
    .pileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CustomPipeComponent);
    ponent = fixture.ponentInstance;
    fixture.detectChanges();
  });

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

sort.pipe.spec.ts

import { SortPipe } from './sort.pipe';

describe('SortPipe', () => {
  it('create an instance', () => {
    const pipe = new SortPipe();
    expect(pipe).toBeTruthy();
  });
});

• javascript
• angular
• angularjs
• typescript

Share Improve this question Follow edited Feb 17, 2022 at 10:20 muskaan sharma asked Feb 17, 2022 at 6:15 muskaan sharmamuskaan sharma 17722 gold badges55 silver badges1212 bronze badges 2

• You forgot to include the test code – akotech Commented Feb 17, 2022 at 7:39
• oh sorry. Just added it now. – muskaan sharma Commented Feb 17, 2022 at 10:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You need to add the SortPipe in the declarations of the TestingModule

describe('CustomPipeComponent', () => {
  ...

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent, SortPipe ] // <-- here
    })
    .pileComponents();
  });

  ...
});

Cheers

FIX: Do the following changes:

1. In app.module.ts add SortPipe in declarations(If not present).
2. In customer-pipe.ponent.spec.ts add SortPipe in declarations(If not present) and add in providers as well if you get error like NullInjectorError: R3InjectorError(DynamicTestModule)[PipeName -> PipeName]: NullInjectorError: No provider for PipeName!.

Like given below

app.module.ts

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.ponent';

import {FormsModule } from '@angular/forms';
import { SortPipe } from './sort.pipe';
import { CustomPipeComponent } from './custom-pipe/custom-pipe.ponent';
import { CustpipeComponent } from './custpipe/custpipe.ponent';
import { RideFilterPipePipe } from './ride-filter-pipe.pipe';
import { ReactFormComponent } from './react-form/react-form.ponent';
import { TemplateDrivenFormComponent } from './template-driven-form/template-driven-form.ponent';
import { EmailValidator } from './template-driven-form/emailValidator';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipeComponent,
    SortPipe,               // Already present
    CustpipeComponent,
    RideFilterPipePipe,
    ReactFormComponent,
    TemplateDrivenFormComponent,
    EmailValidator
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule      
  ],
  providers: [], 
  bootstrap: [AppComponent]
})
export class AppModule { }

customer-pipe.ponent.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { CustomPipeComponent } from './custom-pipe.ponent';

describe('CustomPipeComponent', () => {
  let ponent: CustomPipeComponent;
  let fixture: ComponentFixture<CustomPipeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ CustomPipeComponent, SortPipe ], // SortPipe added here
      providers: [] // Optional, based on error
    })
    .pileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(CustomPipeComponent);
    ponent = fixture.ponentInstance;
    fixture.detectChanges();
  });

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