Cannot get Spectator run with Angular 13 and Jest

johan974 commented 2 years ago

Is this a regression?

No

Description

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

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

I use version: "@ngneat/spectator": "~7.1.0",

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

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

So there is a circle: either upgrade first from 12 to 13 ... but then I get the first error. When I use Spectator 7.1.0 and upgrade to Angular 13, then I get the above error.

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

Please provide a link to a minimal reproduction of the bug

See above

Please provide the exception or error you saw

See above

Please provide the environment you discovered this bug in

Angular 12 or 13. See above.

Anything else?

No response

Do you want to create a pull request?

No

NetanelBasal commented 2 years ago

I'm wondering why you're the only one mentioning this issue.

kad-holtmj commented 2 years ago

No, there are more people, see stackoverflow. I tested it with Angular 12 and it works great. Yes, I ported my app down from Angular 13 to 12.

NetanelBasal commented 2 years ago

Can you reproduce on a fresh angular cli project, please?

johan974 commented 2 years ago

Please see this project. In the README.md are the instructions. It took a while to create an older project.

Of course I could do the upgrading of Spectator with the same command with '--force --allow-dirty' flags appended.

Then running with the Jest test engine, I get errors, like:

Cannot find module '@ngneat/spectator' from 'src/app/component1/component1.component-spectator.spec.ts'

  4 | import {FormsModule} from '@angular/forms';
  5 | import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
> 6 | import {createComponentFactory, Spectator} from '@ngneat/spectator';
    | ^
  7 |
  8 | describe('Component1Component', () => {
  9 |   let spectator: Spectator<Component1Component>;

  at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
  at Object.<anonymous> (src/app/component1/component1.component-spectator.spec.ts:6:1)

Blafasel3 commented 2 years ago

I encountered the same issue in our Angular 12 project. Running all tests with ngneat/spectator at version 8.3.2 works fine, after upgrading to 9.0.0 I get the same error as @johan974 . As far as I can tell it's some issue with the jest transformation, but I did not get to the bottom of this. If it's any help, these are my dependencies (some omitted for brevity):

 "@angular/animations": "^12.2.16",
    "@angular/cdk": "^12.2.13",
    "@angular/common": "^12.2.16",
    "@angular/compiler": "^12.2.16",
    "@angular/core": "^12.2.16",
    "@angular/forms": "^12.2.16",
    "@angular/material": "^12.2.13",
    "@angular/platform-browser": "^12.2.16",
    "@angular/platform-browser-dynamic": "^12.2.16",
    "@angular/router": "^12.2.16",
...
},
"devDependencies": {
    "@angular-devkit/architect": "^0.1202.15",
    "@angular-devkit/build-angular": "~12.2.15",
    "@angular-eslint/builder": "12.7.0",
    "@angular-eslint/eslint-plugin": "4.3.0",
    "@angular-eslint/eslint-plugin-template": "4.3.0",
    "@angular-eslint/schematics": "4.3.0",
    "@angular-eslint/template-parser": "4.3.0",
    "@angular/cli": "^12.2.16",
    "@angular/compiler-cli": "^12.2.16",
    "@angular/language-service": "^12.2.16",
    "@ngneat/spectator": "^9.0.0",
    "@ngrx/schematics": "^12.5.1",
    "@types/chai": "^4.2.12",
    "@types/cucumber": "^6.0.0",
    "@types/inputmask": "^5.0.0",
    "@types/jest": "^26.0.23",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "chai": "^4.3.4",
    "jest": "^27.0.5",
    "jest-cucumber": "^3.0.0",
    "jest-jasmine2": "^27.0.5",
    "jest-junit": "^11.1.0",
    "jest-marbles": "^2.5.1",
    "jest-preset-angular": "^9.0.4",
    "ts-jest": "^27.0.3",
    "ts-node": "~8.5.4",
    "tslint": "~6.1.0",
    "typescript": "~4.3.5"
  },

johncrim commented 2 years ago

I've encountered similar issues (not the first issue @johan974 described - that's just a dependency issue). Getting ng 13 working well with Jest takes some work (especially if you want to use node ESM support), but it is not a spectator issue.

The root of the problem is that ng 13 switched to .mjs files, which is good long-term but a hassle short term. Your jest config has to be updated to work with that. My recommendation is to clone the jest-preset-angular repo and start from the examples for ng 13 or ng 14, and align your code with those examples. You'll need to decide if you want to use ES Modules or stick with CJS, too. If you run into issues, start with a small project that is a copy of the jest-preset-angular examples and expand it from there.

@johan974 - your test project is not using CommonJS for *.spec.ts compilation - which for ng 13 or newer means you will need to enable ES Modules and run Jest with node ESM switches.

Spectator has also been updated to emit only .mjs files, so you'll need to use the right versions of spectator with the right versions of angular.

ngneat / spectator