失败：单元测试角度错误

Question

我为我想测试的组件设置了测试环境，但不幸的是遇到了一些我无法理解的错误。

describe('HelloWorldComponent', () => {
        let component: HelloWorldComponent;
        let fixture: ComponentFixture<HelloWorldComponent>;
        let cookieValue: string;
    
    
        beforeEach(async(() => {
            
            const cookieSvcMock = jasmine.createSpyObj<CookieService>('CookieService', ['check', 'get', 'set', 'delete']);
    
            cookieValue = 'eyJ1c2VyX2lkIjoiNGJm.....';
            mockedCookieService.check.and.returnValue(true);
            mockedCookieService.get.and.returnValue(cookieValue);

           const routes = [
            {path: '/site1', component: AnotherComponent},
            {path: '/site2', component: ComponentTwo}]
    
    
            TestBed.configureTestingModule({
                declarations: [HelloWorldComponent],
                imports: [     
                    FormsModule,
                    ReactiveFormsModule,
                    MatInputModule,
                    MatIconModule,
                    MatSlideToggleModule,
                    MatTooltipModule,
                    RouterTestingModule.withRoutes((routes)),                       
                ],
                providers: [
                    {provide: ActivatedRoute, useValue: {params: of({id: 1})}},
                    {provide: CookieService, useValue: mockedCookieService},
                ]
            }).compileComponents();
        }));
    
        beforeEach(() => {
            fixture = TestBed.createComponent(HelloWorldComponent);
            component = fixture.componentInstance;
            fixture.detectChanges();
        });
    
        it('should create', () => {
            expect(component).toBeTruthy();
        });
    
    });
    
    describe('get array of strings', () => {
    
        let helloWorldComponent = new HelloWorldComponent(null,
            new CookieService(document));
       
        it('should return array', () => {
    
            const text = 'dsfsfsf@domain.comsfssdffdsf.Adfgdfg<>';
            const textArr = ['dsfsfsf@domain.com']
    
            let getTextArr: string[];
    
            getTextArr = helloWorldComponent.getEmails(text);
    
            expect(getTextArr).toBe(textArr);
        })
    })

但是在运行 ng test 时出现以下错误：

HelloWorldComponent > 应该创建 1.错误：

失败：组件 AnotherComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

Error: Component AnotherComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler._createCompiledHostTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25915:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25891:1
    at <Jasmine>
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25888:1
    at <Jasmine>
    at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25877:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25815:1
    at Object.then (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27)
    at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25813:1)
    at JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25775:1)

2 错误：

Error: Expected undefined to be truthy.
        at <Jasmine>
        at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/hello-world(hello-world.component.spec.ts:30:40)
        at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1)
        at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)

规范 getArr 错误：

InvalidTokenError：指定的令牌无效：无法读取未定义的属性（读取“替换”）

at <Jasmine>
at Object../node_modules/jwt-decode/lib/index.js (http://localhost:9876/_karma_webpack_/node_modules/jwt-decode/lib/index.js:9:1)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at Module../hello-world.component.ts (http://localhost:9876/_karma_webpack_/main.js:1036:69)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at Module../src/app/hello-world/hello-world.component.spec.ts (http://localhost:9876/_karma_webpack_/main.js:900:80)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at Module../src/test.ts (http://localhost:9876/_karma_webpack_/src/test.ts:10:1)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at checkDeferredModules (http://localhost:9876/_karma_webpack_/webpack/bootstrap:45:1)
at http://localhost:9876/_karma_webpack_/webpack/bootstrap:152:1

我不确定这个问题是否太具体，不幸的是我已经在这里闲逛很长时间了，我不确定如何解决这个问题。 任何帮助将不胜感激！

Answer 1

问题是 AnotherComponent 没有在 TestBed 中声明。这就是编译器所抱怨的。

测试中使用的所有组件都需要在 TestBed 中声明（或通过声明它的模块导入）

将 AnotherComponent 添加到 TestBed 声明中，您应该没问题：

TestBed.configureTestingModule({
                declarations: [HelloWorldComponent, AnotherComponent],
...

您可能必须将 AnotherComponent 的依赖项添加到您的声明/提供者/导入中。

Answer 2

// cooking-login jwt
    const jwtlogin = () => {
        // Decode JWT token
        const decoded = jwtDecode(mytoken)

        // set emails State
        setEmail(decoded);

        // set cookie
        cookies.set("jwt_auth",mytoken, {
            expires: new Date(decoded.exp * 1000),
        })
    }