Angular 13集成Jest测试报ɵisStandalone不是函数错误求助

问题描述 #

参考Angular项目从Jasmine迁移到Jest教程在Angular 13项目中接入Jest作为单元测试框架时，运行测试抛出错误：TypeError: (0 , import_core.ɵisStandalone) is not a function，错误截图见链接。

复现步骤 #

• 执行命令ng n test-jest --style scss --routing -g true -S创建全新Angular项目
• 执行命令ng g c counter生成Counter组件
• 参考Angular Testing Library官方示例编写组件代码与测试用例
• 执行命令npm run test counter运行测试时触发上述错误

相关代码 #

counter.component.ts #

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

@Component({
  selector: 'counter',
  templateUrl: 'counter.component.html',
})
export class CounterComponent {
  @Input() counter = 0;

  increment() {
    this.counter += 1;
  }

  decrement() {
    this.counter -= 1;
  }
}

counter.component.spec.ts #

import { fireEvent, render, screen } from '@testing-library/angular';
import { CounterComponent } from './counter.component';

describe('Counter', () => {
  test('should render counter', async () => {
    await render(CounterComponent, { componentProperties: { counter: 5 } });

    expect(screen.getByText('Current Count: 5'));
  });

  test('should increment the counter on click', async () => {
    await render(CounterComponent, { componentProperties: { counter: 5 } });

    const incrementButton = screen.getByRole('button', { name: /increment/i });
    fireEvent.click(incrementButton);

    expect(screen.getByText('Current Count: 6'));
  });
});

环境信息 #

执行ng --version输出如下：

Angular CLI: 13.3.7
Node: 14.18.2
Package Manager: npm 6.14.15
OS: win32 x64

Angular: 13.3.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1303.7
@angular-devkit/build-angular   13.3.7
@angular-devkit/core            13.3.7
@angular-devkit/schematics      13.3.7
@angular/cli                    13.3.7
@schematics/angular             13.3.7
rxjs                            7.5.5
typescript                      4.6.4

项目package.json配置如下：

{
  "name": "test-jest",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.5",
    "@angular/cli": "~13.3.5",
    "@angular/compiler-cli": "~13.3.0",
    "@testing-library/angular": "^12.0.1",
    "@types/jest": "^28.1.1",
    "@types/node": "^12.11.1",
    "jest": "^28.1.1",
    "jest-preset-angular": "^12.1.0",
    "typescript": "~4.6.2"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/setup-jest.ts"
    ]
  }
}

问题根因 #

ɵisStandalone是Angular 14版本才新增的独立组件相关内部API，当前安装的jest-preset-angular@12.1.0、@testing-library/angular@12.0.1均为适配Angular 14+的版本，和Angular 13环境存在兼容性问题，因此抛出函数不存在的错误。

修复步骤 #

• 卸载当前不兼容的依赖包：

npm uninstall jest @types/jest jest-preset-angular @testing-library/angular

• 安装适配Angular 13的对应版本依赖：

npm install -D jest@27.5.1 @types/jest@27.5.2 jest-preset-angular@11.1.2 @testing-library/angular@11.0.4

• 确认项目根目录存在setup-jest.ts文件，文件内容如下：

import 'jest-preset-angular/setup-jest';

• 清除本地缓存后重新安装依赖，再执行测试命令即可正常运行：

rm -rf node_modules package-lock.json
npm install
npm run test

内容的提问来源于stack exchange，提问作者Gérard Le Cloerec