TypeError: (0 , import_core.ɵisStandalone) is not a function

Question

I tried to use jest with Angular 13 using this tutorial and I got this error bellow.

I don't understand why this error appear, and what it's missing / not working. I have done those steps :

• ng n test-jest --style scss --routing -g true -S
• ng g c counter
• And used the code from this example https://testing-library.com/docs/angular-testing-library/examples
• 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

{
  "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"
    ]
  }
}

If anyone had a way to fix this issue or a resource to redirect me to, to solve this issue, that would be most appreciated :)

Answer 1

Because I updated Angular to v15.1.6, @testing-library/angular also needed to be updated to latest version (13.2.1 in my case)

Answer 2

@testing-library/angular now require Angular 14.

https://github.com/testing-library/angular-testing-library/releases/tag/v12.0.0

Just update Angular version.