Angular 生成的项目未通过默认测试

问题描述

我使用以下命令生成了一个 angular 项目：

ng new project-name --directory my_directory --strict

正如预期的那样，在我的文件夹中创建了一个新的 Angular 项目，并使用 Karma 和 Testbed 生成了默认测试。

然后，当我运行以下命令时：

ng test

我收到以下“fn.bind 不是函数”错误：

Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
- Generating browser application bundles...
04 02 2021 09:56:05.721:WARN [karma]: No captured browser,open http://localhost:9876/
04 02 2021 09:56:05.732:INFO [karma-server]: Karma v5.2.3 server started at http://localhost:9876/
04 02 2021 09:56:05.733:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
04 02 2021 09:56:05.742:INFO [launcher]: Starting browser Chrome
ÔêÜ browser application bundle generation complete.
- Generating browser application bundles...
04 02 2021 09:56:14.140:WARN [karma]: No captured browser,open http://localhost:9876/
ÔêÜ browser application bundle generation complete.
04 02 2021 09:56:16.389:INFO [Chrome 83.0.4103.61 (Windows 10)]: Connected on socket Z-JgdI9c7_CWUWjCAAAA with id 62389375
Chrome 83.0.4103.61 (Windows 10) AppComponent should have as title 'project-name' Failed
        TypeError: fn.bind is not a function
            at newTrustedFunctionForJIT (node_modules/@angular/compiler/fesm2015/compiler.js:6845:1)
            at JitEvaluator.evaluateCode (node_modules/@angular/compiler/fesm2015/compiler.js:6909:1)
            at JitEvaluator.evaluateStatements (node_modules/@angular/compiler/fesm2015/compiler.js:6883:1)
            at CompilerFacadeImpl.jitExpression (node_modules/@angular/compiler/fesm2015/compiler.js:20277:1)
            at CompilerFacadeImpl.compileNgModule (node_modules/@angular/compiler/fesm2015/compiler.js:20207:1)
            at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26880:1)
            at getNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1021:1)
            at verifySemanticsOfNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26941:1)
            at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26909:1)
            at R3TestbedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1074:1)
Chrome 83.0.4103.61 (Windows 10) AppComponent should render title Failed
        TypeError: fn.bind is not a function
            at newTrustedFunctionForJIT (node_modules/@angular/compiler/fesm2015/compiler.js:6845:1)
            at JitEvaluator.evaluateCode (node_modules/@angular/compiler/fesm2015/compiler.js:6909:1)
            at JitEvaluator.evaluateStatements (node_modules/@angular/compiler/fesm2015/compiler.js:6883:1)
            at CompilerFacadeImpl.jitExpression (node_modules/@angular/compiler/fesm2015/compiler.js:20277:1)
            at CompilerFacadeImpl.compileNgModule (node_modules/@angular/compiler/fesm2015/compiler.js:20207:1)
            at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26880:1)
            at getNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1021:1)
            at verifySemanticsOfNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26941:1)
            at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26909:1)
            at R3TestbedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1074:1)
Chrome 83.0.4103.61 (Windows 10) AppComponent should create the app Failed
        TypeError: fn.bind is not a function
            at newTrustedFunctionForJIT (node_modules/@angular/compiler/fesm2015/compiler.js:6845:1)
            at JitEvaluator.evaluateCode (node_modules/@angular/compiler/fesm2015/compiler.js:6909:1)
            at JitEvaluator.evaluateStatements (node_modules/@angular/compiler/fesm2015/compiler.js:6883:1)
            at CompilerFacadeImpl.jitExpression (node_modules/@angular/compiler/fesm2015/compiler.js:20277:1)
            at CompilerFacadeImpl.compileNgModule (node_modules/@angular/compiler/fesm2015/compiler.js:20207:1)
            at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26880:1)
            at getNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1021:1)
            at verifySemanticsOfNgModuleDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26941:1)
            at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:26909:1)
            at R3TestbedCompiler.applyProviderOverridesToModule (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1074:1)
Chrome 83.0.4103.61 (Windows 10): Executed 3 of 3 (3 Failed) (0.04 secs / 0.018 secs)
TOTAL: 3 Failed,0 SUCCESS
Chrome 83.0.4103.61 (Windows 10) ERROR

Angulars 信息（我使用的是 nvm）：

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__,|\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 11.1.2
Node: 14.15.4
OS: win32 x64

Angular: 11.1.2
... animations,cli,common,compiler,compiler-cli,core,forms
... platform-browser,platform-browser-dynamic,router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.2
@angular-devkit/build-angular   0.1101.2
@angular-devkit/core            11.1.2
@angular-devkit/schematics      11.1.2
@schematics/angular             11.1.2
@schematics/update              0.1101.2
rxjs                            6.6.3
typescript                      4.1.3

生成的 app.component.spec.ts :

import { Testbed } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent',() => {
  beforeEach(async () => {
    await Testbed.configureTestingModule({
      declarations: [
        AppComponent
      ],}).compileComponents();
  });

  it('should create the app',() => {
    const fixture = Testbed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });

  it(`should have as title 'project-name'`,() => {
    const fixture = Testbed.createComponent(AppComponent);
    const app = fixture.componentInstance;
    expect(app.title).toEqual('project-name');
  });

  it('should render title',() => {
    const fixture = Testbed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.content span').textContent).toContain('project-name app is running!');
  });
});

生成的 app.component.ts :

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

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'project-name';
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular karma-runner testbed typescript typescript typescript