0

I'm writing unit tests for an Angular component. When I attempted to run it, I received the following error: "Error: Unexpected value 'DecoratorFactory' imported by the module 'DynamicTestModule'. Please add a @NgModule annotation." Is there anything missing or wrong with my code?

import { HttpClient } from '@angular/common/http';
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { AlertController, NavController, ToastController } from '@ionic/angular';
import { GlobalProvider } from 'src/app/services/app/global';
import { AccountProvider } from 'src/app/services/profile/account';
import { phoneValidation } from 'src/helpers/custom-validators';
import { AccountDetailsPage } from "./account-details";

describe("AccountDetailsPage", () => {
  let component: AccountDetailsPage;
  let fixture: ComponentFixture<AccountDetailsPage>;
  let accountProvider: AccountProvider;
  let formBuilder: FormBuilder;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AccountDetailsPage],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      providers: [
        { provide: accountProvider, useValue: {} }
      ],
      imports: [
        Component,
        NavController,
        ToastController,
        AlertController,
        AccountProvider,
        GlobalProvider,
        FormGroup,
        FormBuilder,
        Validators,
        phoneValidation,
        HttpClient
      ]
    }).compileComponents();
  });

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

  describe('method1', () => {
    it('should ...', () => {
      expect(component).toBeTruthy();
    });
  });
})
Jerome Garcia
  • 11
  • 1
  • 2

2 Answers2

1

This usually happens when you have a provider inside of the imports array or vice versa. Remove Component from imports and maybe move it inside of declarations if it's an array. Move NavController, ToastController, AlertController, AccountProvider, FormBuilder, Validators, phoneValidation outside of the imports array and maybe move them to providers.

imports => should only have modules (@NgModule())

providers => should only have services and service like stuff (@Injectable())

declarations => should only have components, pipes and directives (@Component(), @Pipe(), @Directive())

AliF50
  • 16,947
  • 1
  • 21
  • 37
  • so concretly for the OP case, what shoud be moved and where? – serge Nov 30 '22 at 10:45
  • For OP's case, everything that's in the `imports` needs to be removed. `Component` needs to be moved to `declarations`, everything ending in `Controller` should be moved to `providers`, everything ending in `Provider` should be moved to `providers` and `Validators` and `phoneValidation` are not required anywhere. `HttpClient` should be swapped for `HttpClientTestingModule`. Here is a great resource on testing with Angular: https://testing-angular.com/ but the concepts of `imports`, `declarations`, and `providers` is Angular specific and not unit testing Angular specific. – AliF50 Nov 30 '22 at 13:44
  • you repeat same text as in your answer... however, the providers needs value and provider, not really clear what exactly the code should like – serge Nov 30 '22 at 14:34
0

you should not import NgModule because it is a decorator not a module.solved after delete NgModule from imports.

bacha work
  • 1