Use Spectator (with Jest) on Angular 13 fails with error "Cannot find module '@angular/core/testing'"

Question

An app runs on Angular version 12. Testing is done via Spectator based on Jest.

How to upgrade Angular 13 and have a working Spectator (Jest) test environment?

How to reproduce?

In this sample Angular 12 project you clone a Angular 12 project. Then you find in the README.md the steps to upgrade the project to Angular 13. The next step is to upgrade the Spectator from 7.1.0 to 10.0.0. This will fail, so I append a '--force --allow-dirty'. OK, seems to work. Starting a "jest --watch" will reveal errors.

OK, what did I do in slow motion:

Try 1: When I upgrade a project from Angular 12 to 13, with Spectator 7.1.0, I keep on getting this error message while testing with Spectator:

Error: Cannot find module '@angular/core/testing'.

Try 2: When running with Angular 12 correctly, and upgrade Spectator from 7.1.0 to 10.0.0, so another route, I get:

Error: peer @angular/animations@">= 13.0.0" from @ngneat/spectator@10.0.0

Try 3: Upgrade both Angular to 13 AND set the Spectator to 10.0.0 in one go doesn't work either.

My environment worked fine up till Angular 12 and Spectator 7.1.0.

1 - jest.config.js:

const jestPreset = require('jest-preset-angular/jest-preset');
const { globals } = jestPreset;
const tsjest = globals['ts-jest'];
const tsjestOverrides = {
  ...tsjest,
  tsConfig: '<rootDir>/tsconfig.spec.json'
};
const globalOverrides = {
  ...globals,
  'ts-jest': { ...tsjestOverrides }
};
module.exports = {
  ...jestPreset,
  globals: { ...globalOverrides },
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setupJest.ts']
};

2 - jestSetup.js:

import 'jest-preset-angular';

3 - tsconfig.spec.ts:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": [
      "jest",
      "node"
    ],
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.spec.ts",
    "src/**/*.d.ts"
  ]
}

4 - I uninstalled the Karma/Jasmine and removed the 'test.ts' and 'karma.config.ts' files. This was advised in various manuals.

There is NO src/test.ts file. When switching from Karma/Jasmin to Jest the instruction (in many different tutorials) mentioned that the src/test.ts should be removed. You make me curious ;-) — tm1701, Dec 28 '21 at 14:31
After creating a brand new project with Angular 13 with Jest I added Spectator. That worked. — tm1701, Jan 12 '22 at 06:53

Use Spectator (with Jest) on Angular 13 fails with error "Cannot find module '@angular/core/testing'"

0 Answers0