Our project structure follows this: Angular2-webpack-starter.
Our project successfully compiles, build and can be seen in the browser. No problems here.
But when we try to run the test cases using karma and jasmine
we are getting this error.
XXXXComponent
:heavy_multiplication_x: Should Match Current Tab as 1
Chrome 55.0.2883 (Mac OS X 10.10.5)
Error: Unexpected value 'FormGroup' declared by the module 'DynamicTestModule'
at SyntaxError.ZoneAwareError (webpack:///~/zone.js/dist/zone.js:811:0 <- config/spec-bundle.js:74048:33)
at SyntaxError.BaseError [as constructor] (webpack:///~/@angular/compiler/src/facade/errors.js:26:0 <- config/spec-bundle.js:78913:16)
at new SyntaxError (webpack:///~/@angular/compiler/src/util.js:151:0 <- config/spec-bundle.js:6408:16)
at webpack:///~/@angular/compiler/src/metadata_resolver.js:475:0 <- config/spec-bundle.js:19829:40
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (webpack:///~/@angular/compiler/src/metadata_resolver.js:457:0 <- config/spec-bundle.js:19811:54)
at JitCompiler._loadModules (webpack:///~/@angular/compiler/src/jit/compiler.js:165:25 <- config/spec-bundle.js:55462:64)
at JitCompiler._compileModuleAndAllComponents (webpack:///~/@angular/compiler/src/jit/compiler.js:144:25 <- config/spec-bundle.js:55441:52)
at JitCompiler.compileModuleAndAllComponentsSync (webpack:///~/@angular/compiler/src/jit/compiler.js:98:0 <- config/spec-bundle.js:55395:21)
at TestingCompilerImpl.compileModuleAndAllComponentsSync (webpack:///~/@angular/compiler/bundles/compiler-testing.umd.js:482:0 <- config/spec-bundle.js:78583:35)
at TestBed._initIfNeeded (webpack:///~/@angular/core/bundles/core-testing.umd.js:761:0 <- config/spec-bundle.js:26731:40)
at TestBed.createComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:844:0 <- config/spec-bundle.js:26814:18)
at Function.TestBed.createComponent (webpack:///~/@angular/core/bundles/core-testing.umd.js:673:0 <- config/spec-bundle.js:26643:33)
at Object.<anonymous> (webpack:///src/app/zzzz/yyyy/xxxx.component.spec.ts:20:0 <- config/spec-bundle.js:93231:37)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:242:0 <- config/spec-bundle.js:73479:26)
at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- config/spec-bundle.js:73133:39)
at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:241:0 <- config/spec-bundle.js:73478:32)
at Zone.run (webpack:///~/zone.js/dist/zone.js:113:0 <- config/spec-bundle.js:73350:43)
at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:102:0 <- config/spec-bundle.js:72848:34)
at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (webpack:///~/zone.js/dist/jasmine-patch.js:132:0 <- config/spec-bundle.js:72878:42)
at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (webpack:///~/zone.js/dist/jasmine-patch.js:132:0 <- config/spec-bundle.js:72878:42)
at webpack:///~/zone.js/dist/jasmine-patch.js:129:91 <- config/spec-bundle.js:72875:130
at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:275:0 <- config/spec-bundle.js:73512:35)
at Zone.runTask (webpack:///~/zone.js/dist/zone.js:151:0 <- config/spec-bundle.js:73388:47)
at drainMicroTaskQueue (webpack:///~/zone.js/dist/zone.js:433:0 <- config/spec-bundle.js:73670:35)
We have imported all these modules in the app.module.ts as required by new angular convention.
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
bootstrap: [ AppComponent ],
declarations: [
...
],
imports: [ // import Angular's modules
...
BrowserModule,
FormsModule,
HttpModule,
ReactiveFormsModule,
... ],
providers: [ // expose our Services and Providers into Angular's dependency injection
ENV_PROVIDERS,
APP_PROVIDERS
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class AppModule {
constructor() {}
}
Our testBed is setup in this way
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule],
declarations: [ FormGroup, XXXXComponent ], // declare the test component
});
fixture = TestBed.createComponent(XXXXComponent);
comp = fixture.componentInstance;
});
and also
testing.TestBed.initTestEnvironment(
browser.BrowserDynamicTestingModule,
browser.platformBrowserDynamicTesting()
);
We have all the latest versions of packages installed.
"@angular/common": "~2.4.3",
"@angular/compiler": "~2.4.3",
"@angular/core": "~2.4.3",
"@angular/forms": "~2.4.3",
"@angular/http": "~2.4.3",
"@angular/material": "2.0.0-beta.1",
"@angular/platform-browser": "~2.4.3",
"@angular/platform-browser-dynamic": "~2.4.3",
"@angular/platform-server": "~2.4.3",
"@angular/router": "~3.4.3",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.1",
"webpack": "2.2.0",
"webpack-dev-middleware": "^1.9.0",
"webpack-dev-server": "2.2.0",
"webpack-dll-bundles-plugin": "^1.0.0-beta.5",
"webpack-md5-hash": "~0.0.5",
"webpack-merge": "~2.4.0"
Any help in resolving this issue is appreciated.
The error is in your test bed configuration
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule],
declarations: [ FormGroup, XXXXComponent ], // declare the test component
});
FormGroup
is not part of your code, it belongs to the ReactiveFormsModule
and therefore it is invalid for you to declare it. Declaring connotes ownership by an NgModule of that which is declared. You also should not provide it, import it, or export it directly. You import it indirectly by way of importing ReactiveFormsModule
, and may export it indirectly by way of exporting ReactiveFormsModule
. You must not declare it. You must not provide it.
So change your configuration call to
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule],
declarations: [XXXXComponent], // declare the test component
});