jest-preset-angular: [Bug]: type-only imports cause ReferenceError
Version
11.0.1
Steps to reproduce
@leosvelperez created a repo showing the failure: https://github.com/leosvelperez/ng-jest-type-issue
Just clone the repo, install depdencies and execute the tests using jest.
(For reference, this bug was originally reported to the Nx team here: https://github.com/nrwl/nx/issues/7845)
Expected behavior
Tests which use import type should pass. See the official Typescript documentation.
Actual behavior
An error is thrown:
● AppService › should be created
ReferenceError: Request is not defined
1 | import { Inject, Injectable, Optional } from '@angular/core';
> 2 | import type { Request } from 'express';
| ^
3 | import { REQUEST } from './app.tokens';
4 |
5 | @Injectable({
Additional context
The context of this issue is, that we are using Angular Universal for Server Side Rendering. Hence we sometimes have to inject the Browser’s request/response into a service or similar. Since we do not want to accidentally bundle express into our Angular app, we want to use type-only imports.
Environment
npx: installed 1 in 0.89s
System:
OS: Linux 5.14 Fedora Linux 35 (Workstation Edition)
CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
Binaries:
Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
Yarn: 1.22.15 - ~/.nvm/versions/node/v14.17.6/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
npmPackages:
jest: ^27.3.1 => 27.3.1
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 7
- Comments: 40
Also having the same issue
this is failing for every type that we are importing, we don’t use import type but we are having the same problem.
We do have have setup paths in tsconfig to improve our imports, @mypathDefinition , aside from that there is nothing else worth mentioning
Adding the “include”: [“src/**/*.ts”] to our “tsconfig.spec.json” did not help at all.
Any updates on this issue or any other way on how we can sort this out?
Angular 13.3.9 / jest 28.1.0 / types-jest 27.0.2 / jest-preset-angular 12.0.1
So have been seeing reports of this for Nx workspaces.
here is a reproduce-able for an nx workspace that @jcabannes provided me, turning
emitDecoratorMetadata: falseis kind of a work around I’ve found, but not an ideal solution since I think it’s just kicking the ball down the road.https://github.com/nrwl/nx/issues/10660#issuecomment-1251030448
What we are seeing is basically the transformed code is missing an import being declared but is checking for that import in the decorator metadata of the compiled TS code. so removing the decorator metadata removes the check, causing the error to go away. Of course if the metadata is needed then tests will fail for other reasons, so bandaid solution for now. unsure if this is a jest-preset-angular/ts-jest/typescript/angular issue right now.
I can replicate this problem on Angular 14, just by updating
jest-preset-angularto12.0.0from11.1.2.However, if I set the
resolutionssection inpackage.jsonto point tots-jest@^27.0.0, and then patch the files insidejest-preset-angularback to the oldts-jestimport paths I can get it to work again. So for our repo at least, something changed ints-jest@28that caused type-only imports to no longer work.Changing from
importtoimport typedoes work, but simply adding"src/**/*.ts"to thetsconfig.spec.jsondoes not.Alright, crisbeto just freed up the way to make it work with ng15 compiler. Details: https://github.com/angular/angular/commit/33f35b04ef0f32f25624a6be59f8635675e3e131
So with the next ng minor release @ahnpnl should be able to make it work correctly again 😃
The same problem for Angular v14.2.1 / jest v28.1.3 / jest-preset-angular v12.2.2 The workaround didn’t help
Perfect, 12.2.4 seems to be fully compatible with ts 4.8! Updated my issue repo and all tests are passing as expected now. ( https://github.com/jbjhjm/jest28-bug ) Unit tests in our main repo (ng14, jest28, ts4.8) are passing fine too. I think this issue is resolved @ahnpnl !
@anschm @gmfun a new version has just been released, happy testing! Will check it out myself tomorrow .
This works!!! Thanks so much!!!
Something else I found is that using a type alias fixes the problem too.
It also happens without any decorators on the constructor
@marleypowell hmm this WAS fixed for sure. This unit test is responsible for ensuring it works: https://github.com/angular/angular/blob/17.0.x/packages/compiler-cli/test/downlevel_decorators_transform_spec.ts#L703
Unfortunately my projects are still months away from ng17 so I can’t reproduce or help out with this.
After all this was a issue on angular side, so as you already have a reproduction setup you may want to open a regression issue over there.
I have reproduced this issue with a fresh NX setup for an angular application. https://github.com/marleypowell/nx-jest-repro/tree/master/nx-jest-repro
Dependency injection in the constructor doesn’t work with type only imports. As soon as I remove the type only import this works again.
Something is different with constructor dependency injection as the static method decorator is fine
@jbjhjm I tested this in angular 15.1 but its still not working
You can check here https://github.com/thymikee/jest-preset-angular/blob/de881987c681d45907fb4f298704006813eb3912/scripts/prebuild.js#L8 it is a prebuild script that we first download and then build the package.
It seems something is broken in ts-jest@28. Is their any bug opend at ts-jest?
I’m also getting the same error: ReferenceError: lcl_routing_1 is not defined
Workaround does not help.
Angular v14.2.10 / jest v28.1.3 / ts-jest 28.0.8 / jest-preset-angular v12.2.2