briebug/jest-schematic

Angular schematic for adding Jest and the required files to an Angular CLI project

jest-schematic's Issues

Thanks for this Awesome Schematic!!

Just wanted to say Thanks!! for this awesome schematic and I wrote a quick blog post on it in case you wanted to add it to the documentation section:

https://medium.com/@ole.ersoy/unit-testing-angular-with-jest-b65888ff33f6

Libraries generated by cli using `ng generate library` creates a subproject using Karma intead of Jest

Reopen from briebug/jest#9.
At first it was a bug report... now I think it is a feature request

Is your feature request related to a problem? Please describe.
After using this schematics to convert my project into a Jest one, I expected all libs I created to also be Jest projects.

Describe the solution you'd like
After running all the steps to convert my project to Jest, when creating a new lib, I expect to, at least, not have a * Karma* configuration file on this lib.
Also, if possible, have the correct jestSetup files.

Describe alternatives you've considered
If it cannot be done automatically, create a script to, at least, remove the karma file.

Doesn't work with Angular 12.2 anymore

Describe the bug
When I create a new Angular application and apply the schematics, the tests immediately fail.

Schema validation failed with the following errors:
Data path "/polyfills" must be array.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `ng test`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

To Reproduce
Steps to reproduce the behavior:

npx @angular/cli@12 new angular-cli-jest
npx ng add @briebug/jest-schematic
npm run test

Desktop (please complete the following information):

• OS: Windows
• Node version: 14.16.0
• NPM or Yarn version: NPM 6.14.11
• App type Angular CLI
• Angular version 12.2

Support for libraries?

Is your feature request related to a problem? Please describe.
Running the schematic on an Angular application project seems to be working fine, but when I run it on a library project it fails.

Here are some sample errors that I'm seeing:

    SyntaxError: /home/ole/Github/slice/angular-package-format-workspace/projects/slice/src/lib/OStore.spec.ts: Unexpected token, expected ";" (8:12)

       6 | 
       7 | describe("Creating a key value store", () => {
    >  8 |   let ostore: OStore = new OStore();
         |             ^
       9 | 
      10 |   it("should create an empty key value store", () => {
      11 |     expect(ostore.isEmpty()).toBeTruthy();

      at Parser.raise (../../node_modules/@babel/parser/lib/index.js:6975:17)
      at Parser.unexpected (../../node_modules/@babel/parser/lib/index.js:8368:16)
      at Parser.semicolon (../../node_modules/@babel/parser/lib/index.js:8350:40)
      at Parser.parseVarStatement (../../node_modules/@babel/parser/lib/index.js:11127:10)
      at Parser.parseStatementContent (../../node_modules/@babel/parser/lib/index.js:10723:21)
      at Parser.parseStatement (../../node_modules/@babel/parser/lib/index.js:10656:17)
      at Parser.parseBlockOrModuleBlockBody (../../node_modules/@babel/parser/lib/index.js:11232:25)
      at Parser.parseBlockBody (../../node_modules/@babel/parser/lib/index.js:11219:10)
      at Parser.parseBlock (../../node_modules/@babel/parser/lib/index.js:11203:10)
      at Parser.parseFunctionBody (../../node_modules/@babel/parser/lib/index.js:10222:24)


       6 | 
       7 | describe("Creating a key value store", () => {
    >  8 |   let ostore: OStore = new OStore();
         |             ^
       9 | 
      10 |   it("should create an empty key value store", () => {
      11 |     expect(ostore.isEmpty()).toBeTruthy();

It looks like jest does not understand typescript in this case. I'm assuming that we just have to add the normal Jest / Typescript setup.

Describe the solution you'd like

Automatic addition of support for libraries when we run:

ng add @briebug/jest-schematic

address lodash vulnerabilities in dependency `schematics-core`

Describe the bug
Lodash has many vulnerabilities and they all go away if we merge schuchard/ng-schematics#36
To Reproduce
Steps to reproduce the behavior:

1. npm install or enable @dependabot

Expected behavior
Merge schuchard/ng-schematics#36 and mitigate security risks

Additional context
I have published https://www.npmjs.com/package/@npmtmp/jest-schematic until this is resolved

Hangs on "add" to ng new project in Angular 8

Describe the bug
When running the "add" schematic everything hangs.
Angular CLI: 8.0.4
Node: 10.15.3
OS: darwin x64
Angular: 8.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.800.4
@angular-devkit/build-angular 0.800.4
@angular-devkit/build-optimizer 0.800.4
@angular-devkit/build-webpack 0.800.4
@angular-devkit/core 8.0.4
@angular-devkit/schematics 8.0.4
@angular/cli 8.0.4
@ngtools/webpack 8.0.4
@schematics/angular 8.0.4
@schematics/update 0.800.4
rxjs 6.4.0
typescript 3.4.5
webpack 4.30.0

To Reproduce
Add to a new NG project
Watch it hang

Expected behavior
It's possible that "add" just takes a really long time and I'm not patient enough. If that's the case maybe I just need to request a "User Feedback" feature request.

Additional context
I originally used the NPM Module in a scaffolding script. Because it seems to hang it breaks my script. It would be helpful to add the ability to "break on error" to the module. Within the script I get no error feedback even if I'm not within an Angular project. If I try to run in directly (outside a project) I get an error. I don't necessarily think this is related, but the lack of error handling seems to cause problems for scripting.

Jest Schematic + Cypress Schematic Conflicts

Describe the bug
When running both the BrieBug/Jest & BrieBug/Cypress Schematics, ng test throws error Cannot find name 'cy'.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Angular project with the AngularCLI
2. Add BrieBug/Jest Schematic
3. Add BrieBug/Cypress Schematic
4. Run ng test
5. Notice error Cannot find name 'cy'.

Expected behavior
Tests should succeed without error.

Screenshots

Desktop (please complete the following information):

• OS: macOS Big Sur Version 11.2.3
• Node version: v14.16.1
• NPM or Yarn version NPM v6.14.12
• App type: Angular CLI
• Angular version: @angular/core: "11.2.9"

Module <rootDir>/setup-jest.ts in the setupFilesAfterEnv option was not found

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Angular project ng new test --create-application=false
2. Create a test library ng g library test
3. Create some tests
4. Try running them cd projects/test && npx jest
   Right now I get this:

● Validation Error:

  Module <rootDir>/setup-jest.ts in the setupFilesAfterEnv option was not found.
         <rootDir> is: /Users/oleersoy/Temp/error/projects/fs-error

  Configuration Documentation:
  https://jestjs.io/docs/configuration

Expected behavior
It should run the tests

Librarys with deeper entrypoints: An unhandled exception occurred: Cannot find module '../../jest.config'

Describe the bug
Seems not to work if we have a nested library.
Could fix it easily by changing the import path inside my library, in file jest-config.js

from
const baseConfig = require('../../jest.config');
to
const baseConfig = require('../../../jest.config');

To Reproduce

1. have a library with name myComp/myFirstLibrary.
2. run schematics
3. run ng test
4. look at error:

An unhandled exception occurred: Cannot find module '../../jest.config'
Require stack:
- C:\Users\xxxxxxxx\yyyyy\zzzz\projects\myComp\myFirstLibrary\jest.config.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular-builders\jest\dist\custom-config.resolver.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular-builders\jest\dist\index.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular-devkit\architect\node\index.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular\cli\models\architect-command.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular\cli\commands\test-impl.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular-devkit\schematics\tools\index.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular\cli\utilities\json-schema.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular\cli\models\command-runner.js
- C:\Users\xxxxxxxx\yyyyy\zzzz\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\xxxxxxxx\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
See "C:\Users\xxxxxxxx\AppData\Local\Temp\ng-MsP1Ng\angular-errors.log" for further details.

Expected behavior
The schematics could realize the folder depth and set the correct import.

Additional context

    "@briebug/jest": {
      "version": "1.3.1",

    "@briebug/jest-schematic": {
      "version": "4.0.0",

error TS6053: File '<app>/src/test.ts' not found.

Describe the bug
A clear and concise description of what the bug is.

TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
   error TS6053: File '<app>/src/test.ts' not found.

To Reproduce

1. Create new angular app with angular-cli
2. ng add @briebug/jest-schematic
3. npm run test

Desktop (please complete the following information):

• OS: [Mac]
• Node version: [v10.10.0]
• NPM or Yarn version [npm 6]
• App type [ Angular CLI]
• Angular version [e.g. @angular/core: "7.2.0"]

Running `ng add @briebug/jest-schematic` on an Angular 15 project throws error

Describe the bug
A clear and concise description of what the bug is.

To Reproduce

1. npx @angular/cli@15 new angular-with-jest-test
2. cd .\angular-with-jest-test\
3. ng add @briebug/jest-schematic
4. The following error is thrown: Cannot read properties of undefined (reading 'filter')

Expected behavior
Jest is configured for an Angular 15 project

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Node version: 18.12.1
• App type: Angular cli
• Angular version: 15

test replacing ts-jest with @swc-node/jest

We don't use this package, but we use jest & angular and maybe you are interested.

We replaced ts-jest with @swc-node/jest. Cold cache jest went from 60s to 7s.

swc is a typescript to javascript compiler that also supports annotations & metadata export, thus works with angular jit. swc is written in rust and is ~70x faster as typescript. So by using it you eliminate the compile overhead and are mostly left running the tests themself.

using swc-jest as a jest transformer is pretty straight forward, this is our transform block in jest.config.js

    transform: {
        '\\.ts$': [
            require.resolve('@swc-node/jest'),
            {
                target: 'es2018',
                module: 'commonjs',
                experimentalDecorators: true,
                emitDecoratorMetadata: true,
                dynamicImport: true,
                sourcemap: true,
            },
        ],
    }

ERESOLVE unable to resolve dependency tree with Angular 16.0.2

Describe the bug

Issue with npm dependencies after executing ng add @briebug/jest-schematic.
Yes, I could use the --legacy-peer-deps parameter, but that is a workaround. Please fix upstream.

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"^16.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular-devkit/build-angular@"^15.0.0" from @angular-builders/[email protected]
npm ERR! node_modules/@angular-builders/jest
npm ERR!   dev @angular-builders/jest@"15.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

To Reproduce
Steps to reproduce the behavior:

1. ng add @briebug/jest-schematic

Expected behavior

No errors.

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Node version: 18.16.0
• App type: Angular CLI,

Angular CLI: 16.0.2
Node: 18.16.0
Package Manager: npm 9.5.1
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.2
@angular-devkit/build-angular   16.0.2
@angular-devkit/core            16.0.2
@angular-devkit/schematics      16.0.2
@angular/cdk                    16.0.1
@angular/flex-layout            15.0.0-beta.42
@angular/material               16.0.1
@schematics/angular             16.0.2
rxjs                            7.8.1
typescript                      5.0.4

Additional context
Add any other context about the problem here.

Angular 13, ng add @briebug/jest-schematic fails due to dependency conflict

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. npm install -g @angular/cli@13
2. ng new -S --style=scss --strict --create-application=false -p=reprepo rep-repo
3. ng add @briebug/jest-schematic

Expected behavior
A clear and concise description of what you expected to happen.

Add the compatible @angular-builders/jest@^13.3.12 or similar version instead of the latest when using older angular versions.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [M1 macOS]
• Node version: [v16.15.0]
• App type [Angular CLI]
• Angular version [@angular/core: "13.3.12"]

Additional context
Maybe there's an opportunity for a feature request here? Maybe adding an optional argument to specify the version of angular-builder to install or to force the install.

Fix preset import path for jest-preset-angular in setup-jest.ts

Several versions back, jest-preset-angular changed the location of the preset used in setup-jest.ts

Before
import 'jest-preset-angular';

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

The schematic needs to the import path updated to the current location, otherwise you get errors like the following because zone isn't included:

"Zone is needed for the waitForAsync() test helper but could not be found..."

To Reproduce

1. Run the schematic on a project.

Expected behavior
Should import from the proper location.

Desktop (please complete the following information):

• OS: Mac and Win
• Node version: 14
• NPM or Yarn version: 6.14.8
• App type: Angular CLI
• Angular version: seen on 10.2 and 12.1
  Additional context
  Add any other context about the problem here.

Not able to get the code coverage (Angular 8)

I used this schematic and setup the Jest in my frontend application (Angular 8).
However, am not able to get the code coverage part with the below code.

ng test --no-watch --code-coverage

Error :
Cannot find module 'karma'
Error: Cannot find module 'karma'

Unable to install jest-schematic on Angular 12

Describe the bug
Installing @briebug/jest with "ng add @briebug/jest" is not working on an existing project. I will receive following errors:
PS C:\Users\xxx\development\s4c_update> ng add @briebug/jest

ℹ Using package manager: npm
✔ Found compatible package version: @briebug/[email protected].
✔ Package information loaded.

The package @briebug/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
An unhandled exception occurred: Cannot find module 'C:\Users\xxx\development\s4c_update\node_modules@briebug\jest\src\jest\index'
Require stack:

• C:\Users\xxx\development\s4c_update\node_modules@angular\cli\models\schematic-engine-host.js
• C:\Users\xxx\development\s4c_update\node_modules@angular\cli\models\schematic-command.js
• C:\Users\xxx\development\s4c_update\node_modules@angular\cli\commands\add-impl.js
• C:\Users\xxx\development\s4c_update\node_modules@angular-devkit\schematics\tools\export-ref.js
• C:\Users\xxx\development\s4c_update\node_modules@angular-devkit\schematics\tools\index.js
• C:\Users\xxx\development\s4c_update\node_modules@angular\cli\utilities\json-schema.js
• C:\Users\xxx\development\s4c_update\node_modules@angular\cli\models\command-runner.js
• C:\Users\xxx\development\s4c_update\node_modules@angular\cli\lib\cli\index.js
• C:\Users\xxx\AppData\Roaming\npm\node_modules@angular\cli\lib\init.js
• C:\Users\xxx\AppData\Roaming\npm\node_modules@angular\cli\bin\ng
  See "C:\Users\xxx~1\AppData\Local\Temp\ng-kJFkZe\angular-errors.log" for further details.

To Reproduce
Steps to reproduce the behavior:
go into a Angular 12 project an

1. Go into an existing Angular 12 project'
2. Run command 'ng add @briebug/jest'
3. See error

Expected behavior
Install briebug/jest-schematic

Desktop (please complete the following information):

• OS: Windows 10
• Node version: 15.12.0
• App type Angular CLI
• Angular version [@angular/core: "~12.1.1"]

error: "Cannot set property 'builder' of undefined"

Describe the bug
When running either "ng add @briebug/jest-schematic" or "ng g @briebug/jest-schematic:add" the error "Cannot set property 'builder' of undefined" is given

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/joeeames/UnitTestingAngularLikeABoss/tree/jest-solution
2. clone, make sure you're on the jest-solution branch.
3. npm i
4. execute either of the two commands above
5. See error

Expected behavior
no error

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [Mac & Windows]
• Node version: [14.7.0]
• NPM or Yarn version [npm 6.14.7]
• App type [Angular CLI]
• Angular version [10.1.5]

Additional context
This was discovered on a windows box, then verified on a separate Mac

Fails when added to Angular 12 Library Project

Describe the bug

The package @briebug/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
"BriebugSchematicsJest" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
DELETE projects/join/karma.conf.js
DELETE projects/join/src/test.ts
CREATE jest.config.js (180 bytes)
CREATE setup-jest.ts (860 bytes)
CREATE test-config.helper.ts (611 bytes)
CREATE projects/join/jest.config.js (193 bytes)
UPDATE package.json (1090 bytes)
UPDATE angular.json (1002 bytes)
UPDATE projects/join/tsconfig.spec.json (290 bytes)
⠋ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! Found: [email protected]
npm ERR! node_modules/jest
npm ERR!   dev jest@"27.0.4" from the root project
npm ERR!   peer jest@">=26" from @angular-builders/[email protected]
npm ERR!   node_modules/@angular-builders/jest
npm ERR!     dev @angular-builders/jest@"12.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jest@"^26.0.0" from [email protected]
npm ERR! node_modules/@angular-builders/jest/node_modules/jest-preset-angular
npm ERR!   jest-preset-angular@"^8.4.0" from @angular-builders/[email protected]
npm ERR!   node_modules/@angular-builders/jest
npm ERR!     dev @angular-builders/jest@"12.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/oleersoy/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/oleersoy/.npm/_logs/2021-06-03T18_38_15_162Z-debug.log
✖ Package install failed, see above.

To Reproduce
Steps to reproduce the behavior:

1. Create a new Angular 12 project with --create-application=false
2. Create a library ... ng g library somelib
3. Add @briebug/jest-schematic

Expected behavior
It should work

Desktop (please complete the following information):

• OS: [e.g. Mac, Windows] Mac
• Node version: [e.g. 8.11.3] v16.2.0
• NPM or Yarn version [e.g. Yarn 1.3.0] 7.13.0
• App type [e.g. Angular CLI, Nx Workspace] Workspace
• Angular version [e.g. @angular/core: "6.0.3"] 12

configure to allow raw testing of individual files

Is your feature request related to a problem? Please describe.

I would like to be able to directly test individual files. When setting jest up on my own, I used to be able to: jest ./src/app/app.component.spec.ts

and this comes in handy especially in vscode where I might drag and drop the file directly to the terminal..

now that produces:

Determining test suites to run...
ngcc-jest-processor: running ngcc
FAIL  src/app/app.component.spec.ts
 AppComponent
   ✕ should create the app (3 ms)
   ✕ should have as title 'ang15-test' (6 ms)
   ✕ should render title (1 ms)

 ● AppComponent › should create the app

   Need to call TestBed.initTestEnvironment() first
...

likewise, I cannot call ng test directly with the filename:

ng test ./src/app/app.component.spec.ts

Error: Invalid values:
  Argument: project, Given: "./src/app/app.component.spec.ts", Choices: "ang15-test"

ng test -- ./src/app/app.component.spec.ts
Option '--' has been specified multiple times. The value './src/app/app.component.spec.ts' will be used.
Error: Schema validation failed with the following errors:
  Data path "/" must be array.

Describe the solution you'd like
A clear and concise description of what you want to happen.

I should be able to test specific files directly on the commandline, such as:

jest <filename>

Describe alternatives you've considered
As I've had that working in multiple repos before, I am sure I will be able to figure it out with modern angular 15 now. I just havent located the issue yet.

Cannot read property 'filter' of undefined error

Describe the bug

Error thrown "Cannot read property 'filter' of undefined" when installing and running.

To Reproduce

I'm using the following command to execute:

npx ng add @briebug/jest-schematic

I do not have any packages installed globally.

Output is as follows:

ℹ Using package manager: npm
✔ Found compatible package version: @briebug/[email protected].
✔ Package information loaded.

The package @briebug/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
"BriebugSchematicsJest" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
Cannot read property 'filter' of undefined

Installation of the package succeeds. Running the add schematic with:

npx ng g @briebug/jest-schematic:add

Results in:

"BriebugSchematicsJest" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID.
Cannot read property 'filter' of undefined

Expected behavior

Not expecting any errors.

Desktop (please complete the following information):

• OS: Windows
• Node version: 14.17.5
• NPM or Yarn version: npm 6.14.14
• App type: Angular
• Angular version: 12.2.8

Invalid JSON character: "\n" at 59:34.

Describe the bug
I followed the read me and when running the add schematics it printed Invalid JSON character: "\n" at 59:34.

To Reproduce
Steps to reproduce the behavior:

1. install the package globally
2. run the add schematic in an angular project

Expected behavior
The schematic runs

Desktop (please complete the following information):

• OS: windows
• Node version: 8.12
• NPM or Yarn version 6.4.1
• App type Angular CLI
• Angular version 7.0.2

Custom Validator not found

Describe the bug
Im trying to use a customValidator but i keep getting an error saying the file is not found on first run and in AOT production build

To Reproduce
Steps to reproduce the behavior:
add custom validator to app module providers, run app, get compile error that custom validator is not found

Expected behavior
First non production run build and AOT build should compile when using a custom validator

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Mac, Windows]
• Node version: [e.g. 8.11.3]
• NPM or Yarn version [e.g. Yarn 1.3.0]
• App type [e.g. Angular CLI, Nx Workspace]
• Angular version [e.g. @angular/core: "6.0.3"]

Additional context

Im importing the validator in the app module providers like the docs say

providers: [ { provide: NG_VALIDATORS, useValue: checkboxGroupCustomValidator, multi: true }, { provide: DYNAMIC_VALIDATORS, useValue: new Map<string, Validator | ValidatorFactory>([ ['checkboxGroupCustomValidator', checkboxGroupCustomValidator] ]) ]

ERROR in error TS6053: File '/Users/derek/Toybox/development/labcorp/provider-ui/src/app/orders/aoe-questions/checkboxGroupCustomValidator.ts' not found.

but i keep getting this compile error on first run of the project and when I try an AOT build. If i run the project a second time after saving it works fine for some reason, but its keeping my AOT build from compiling

Running in an Angular 10 project fails

Describe the bug
It is not possible to replace Karma with Jest using this tool.

To Reproduce
Steps to reproduce the behavior:

1. Run 'ng add @briebug/jest-schematic'
2. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):

• OS: [Windows]
• Node version: [14.5.0]
• NPM or Yarn version [6.14.5]
• App type [Angular CLI]
• Angular version [@angular/cli: "10.0.1"]

Additional context
None

Issue with Angular 8: `src/tsconfig.spec.json` => `tsconfig.spec.json`

Describe the bug
Using the schematic with Angular 8 then running the tests will produce the following error:

 File not found: <rootDir>/src/tsconfig.spec.json (resolved as: /.../src/tsconfig.spec.json)

This is due to the fact that Angular 8 moves tsconfig.spec.json out of src while jest-angular-preset is expecting tsconfig.spec.json to be in src.

Maybe jest-angular-preset should automatically detect tsconfig.spec.json location but it might be easier to handle this in this schematic as a temporary fix.

Meanwhile, there are two workarounds (and maybe more):

1. 😔Move tsconfig.spec.json back to src.
2. ✅Update jest.config.js:

const tsJestPreset = require('jest-preset-angular/jest-preset').globals['ts-jest'];

module.exports = {
  ...
  globals: {
    'ts-jest': {
      ...tsJestPreset,
      tsConfig: 'tsconfig.spec.json'
    }
  }
};

To Reproduce
Steps to reproduce the behavior:

1. npm install -g @angular/[email protected]
2. ng add @briebug/jest-schematic
3. npm test
4. See error

Add support for projects structure

Is your feature request related to a problem? Please describe.
We have the following folder structure generated with the cli using this commands:

ng new jesttest2 --create-application=false --style=css --routing=false --directory=./

ng generate application jesttest2 --style=css  

When we then run the schematics it sets the root path to 'src'

Describe the solution you'd like
Add jest config to project

Describe alternatives you've considered
Do it manually

Additional context
Folderstructure after schematic:add

Use jest type instead of jasmine types

Is your feature request related to a problem? Please describe.
As Jest types are built on top of It would probably be a better idea to use Jest types instead of the default Jasmine types Angular comes with. We're already adding @types/jest to package.json, but it doesn't seem like we're actually using it.

Describe the solution you'd like

After adding this schematic with ng add, we could, in addition to the current functionality

• Remove @types/jasmine from package.json
• Remove @types/jasminewd2 from package.json
• Change types: ["jasmine", "node"] to types: ["jest", "node"] in tsconfig.spec.json

Cannot read property 'architect' of undefined

Describe the bug
Skipping installation: Package already installed
Cannot read property 'architect' of undefined

To Reproduce
initially trying to install, not working

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu 18
• Node version: v12.16.1
• NPM version 6.13.4
• App type - Angular CLI
• Angular version - @angular/core: "9.1.3"

Not working with an Angular 7 project?

Describe the bug
With the latest from Angular (cli, core, etc) in v7 it seems to be broken.

The error is:

 ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/maxime/Desktop/ng-with-jest/src/app/app.component.spec.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { TestBed, async } from '@angular/core/testing';
                                                                                                    ^

    SyntaxError: Unexpected token {

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

To Reproduce
Steps to reproduce the behavior:

1. Create a new project using CLI v7
2. Add Material or another lib to have some imports
3. Launch jest

Desktop (please complete the following information):

• OS: [e.g. Mac, Windows]: Ubuntu
• Node version: [e.g. 8.11.3]: 10.12
• NPM or Yarn version [e.g. Yarn 1.3.0]: yarn v1.10.1
• App type [e.g. Angular CLI, Nx Workspace] Angular CLI
• Angular version [e.g. @angular/core: "6.0.3"] 7

PS:

this might be related to https://github.com/thymikee/jest-preset-angular#unexpected-token-importexportother but tried and couldn't get it working...

@briebug/jest-schematic updates dependencies?

This dependency is added to dependencies in package.json.

    "@briebug/jest-schematic": "^3.1.0",

Just curious whether it should be added to devDependencies instead?

Deprecation warning, install issue

Great work on this! Finally testing it out. With current jest.config.js file:

setupTestFrameworkScriptFile: '<rootDir>/src/setup-jest.ts',

throws a deprecation warning: "Option "setupTestFrameworkScriptFile" was replaced by configuration "setupFilesAfterEnv", which supports multiple paths."

It should be replaced with:

setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],

I also noticed that I needed to install the schematic locally in the project before I could run it:

npm i @briebug/jest-schematic -D.

Error appear when i'm trying to execute script responsable to run tests.

Describe the bug
TypeError: Jest: a transform must export something.
at /Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/transform/build/ScriptTransformer.js:386:19
at async Promise.all (index 0)
at async ScriptTransformer.loadTransformers (/Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/transform/build/ScriptTransformer.js:378:5)
at async createScriptTransformer (/Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/transform/build/ScriptTransformer.js:1106:3)
at async /Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/core/build/TestScheduler.js:269:31
at async Promise.all (index 0)
at async TestScheduler.scheduleTests (/Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/core/build/TestScheduler.js:262:5)
at async runJest (/Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/core/build/runJest.js:387:19)
at async _run10000 (/Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/core/build/cli/index.js:408:7)
at async runCLI (/Users/tiagooliveira/workstation/testandoJesSchematics/node_modules/@jest/core/build/cli/index.js:261:3)

Test Suites: 0 of 2 total
Tests: 0 total
Snapshots: 0 total
Time: 0 s%

To Reproduce
Steps to reproduce the behavior:

1. Create a new Angular 12 project with --create-application=false
2. Create a library ... ng g library somelib
3. Add @briebug/jest-schematic ... ng add @briebug/jest-schematic
4. Execute tests by command ... ng test

Expected behavior
When the command ng test is execute the tests must run.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. Mac]
• Node version: [e.g. 14.17.0]
• NPM or Yarn version [e.g. Yarn 6.14.13]
• App type [e.g. Angular CLI]
• Angular version [e.g. @angular/core: "12.0.3"]

Additional context
Add any other context about the problem here.

Running `ng add @briebug/jest-schematic` does not install jest-preset-angular

Describe the bug
Create new angular project. Run ng add @briebug/jest-schematic. Try and run npm run test.

To Reproduce
Steps to reproduce the behavior:

1. Create new angular project.
2. Run ng add @briebug/jest-schematic
3. Try and run npm run test.
4. See error

Expected behavior
Should run tests

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Node version: 16.14.0
• App type: Angular CLI
• Angular version: 13

add image to README

Add the Briebug Jest logo to the README similar to the briebug/cypress-schematic

npm test fails due to improper types (string vs array) in angular.json

Describe the bug
npm test fails due to improper types (string vs array) in angular.json

To Reproduce
Steps to reproduce the behavior:

1. ng new my-app
2. ng add @angular-eslint/schematics
3. ng add @briebug/jest-schematic
4. npm test

Schema validation failed with the following errors:
  Data path "/polyfills" must be array.

5. fix test/polyfills to be string array instead of string
6. npm test

Schema validation failed with the following errors:
  Data path "/inlineStyleLanguage" must be array.

Expected behavior
Tests should have run successfully after step 4

Desktop (please complete the following information):

• OS: Linux
• Node version: v14.17.6
• NPM 7.22.0
• Angular CLI
• @angular/core: "~12.2.0"

BUG: Cannot destructure property 'test' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined.

Hello everyone!

I try to used you schematic but he fired a bug error and i dont get it.

Cannot destructure property 'test' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined.

*To Reproduce
Just doing ng add @briebug/jest-schematic

This is my tsconfig.spec.json

 {
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/spec",
        "types": [
        "jasmine",
        "node"
         ]
     },
    "files": [
         "test.ts",
         "polyfills.ts"
    ],
    "include": [
        "**/*.spec.ts",
        "**/*.d.ts"
     ]
}

This is my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "skipLibCheck": true,
    "types": [
      "heremaps",
      "google.maps"
    ],
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "module": "es2020",
    "baseUrl": "./"
  },
  "exclude": [
    "dist"
  ],
  "include": [
    "node_modules/ng-autosize/**/*.ts",
    "node_modules/ng2-datetime/ng2-datetime.ts",
    "node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.module.ts",
    "node_modules/ng2-datetime/src/ng2-datetime/ng2-datetime.ts",
    "**/*.ts"
  ],
}

Expected behavior
Well i expect the normal behavior, delete/remove karma files/dependecies and install jest

Desktop (please complete the following information):

• OS: Mac
• Node version: v14.17.1
• NPM or Yarn version: NPM 6.14.13
• App type: Angular
• Angular version: 10.2.5

Additional context
I need your heeeelp.

Thank you so much!

Angular 13 - NOT SUPPORTED: keyword "id", use "$id" for schema ID

Describe the bug
Trying to run ng add @briebug/jest-schematic
Get the following error

ng add @briebug/jest-schematic
An unhandled exception occurred: NOT SUPPORTED: keyword "id", use "$id" for schema ID
See "C:\Users\montei0m\AppData\Local\Temp\ng-p0TjR2\angular-errors.log" for further details.

SAME ISSUE WITH THE GLOBALLY INSTALLED
To Reproduce
Steps to reproduce the behavior:

Expected behavior
That works as in the gif of your readme file

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. Mac, Windows] Windows
• Node version: [e.g. 8.11.3] 14.17.3
• NPM or Yarn version [e.g. Yarn 1.3.0] NPM 6.14.7
• App type [e.g. Angular CLI, Nx Workspace]
• Angular version [e.g. @angular/core: "6.0.3"]

 ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.0.1
Node: 14.17.3
Package Manager: npm 6.14.7
OS: win32 x64

Angular: 13.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.1
@angular-devkit/build-angular   13.0.1
@angular-devkit/core            13.0.1
@angular-devkit/schematics      13.0.1
@angular/cli                    13.0.1
@schematics/angular             13.0.1
rxjs                            7.4.0
typescript                      4.4.4

Additional context
Add any other context about the problem here.

Introduces moderate security risk through ajv

Describe the bug
When adding jest-schematic >2.1.1 npm audit reports a moderate security risk.

To Reproduce
Steps to reproduce the behavior:

1. Init an empty Angular project, e.g. ng new jest-schematic-repro
2. cd into the project dir
3. ng add @briebug/jest-schematic according to README
4. npm audit afterwards

ajv  <6.12.3
Severity: moderate
Prototype Pollution in Ajv - https://github.com/advisories/GHSA-v88g-cgmw-v5xw
fix available via `npm audit fix --force`
Will install @briebug/[email protected], which is a breaking change
node_modules/@schuchard/schematics-core/node_modules/ajv
  @angular-devkit/core  0.0.24 - 8.3.28 || 9.0.0-next.0 - 9.1.11 || 10.0.0-next.0 - 10.0.3
  Depends on vulnerable versions of ajv
  node_modules/@schuchard/schematics-core/node_modules/@angular-devkit/core
    @angular-devkit/schematics  0.0.43 - 8.3.28 || 9.0.0-next.0 - 9.1.11 || 10.0.0-next.0 - 10.0.3
    Depends on vulnerable versions of @angular-devkit/core
    node_modules/@schuchard/schematics-core/node_modules/@angular-devkit/schematics
    @schematics/angular  0.1.12 - 8.3.28 || 9.0.0-next.0 - 9.1.11 || 10.0.0-next.0 - 10.0.3
    Depends on vulnerable versions of @angular-devkit/core
    Depends on vulnerable versions of @angular-devkit/schematics
    node_modules/@schuchard/schematics-core/node_modules/@schematics/angular
      @schuchard/schematics-core  *
      Depends on vulnerable versions of @angular-devkit/core
      Depends on vulnerable versions of @angular-devkit/schematics
      Depends on vulnerable versions of @schematics/angular
      node_modules/@schuchard/schematics-core
        @briebug/jest-schematic  >=2.2.0
        Depends on vulnerable versions of @schuchard/schematics-core
        node_modules/@briebug/jest-schematic

6 moderate severity vulnerabilities

Recommends npm audit fix --force which is hard to plan ahead with a medium sized dependency tree containing other less severe security risks.

Expected behavior
Adding jest-schematic does not worsen security.

Workaround
Pin version to 2.1.1, e.g. explicitely do not install latest ng add @briebug/[email protected]. Or don't use this package. Instead follow the Jest setup guide on the official page https://jestjs.io.

Jest throws an error "TypeError: tslib_1.__classPrivateFieldSet is not a function" when i try to do npm test after migrating from Karma to Jest using schematic

Does not remove src/test.ts from tsconfig.spec.json

Describe the bug
After running ng g @briebug/jest-schematic:add there is still a reference to src/test.ts left in tsconfig.spec.json. (This is with ng8)

The reason is that your code does indeed remove src/test.ts but looks for test.ts (not src/test.ts) in the tsconfig.spec.json file.

I tried making a PR because that describes the problem and the possible fix the best but I couldn't figure out how to fix the then failing test in the sandbox.

To Reproduce
Steps to reproduce the behavior:

1. run ng new my-ng8-app
2. run ng g @briebug/jest-schematic:add
3. Observe tsconfig.spec.json has still a reference to src/test.ts

Expected behavior
The removal of src/test.ts from tsconfig.spec.json

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Node version: v10.16.0
• NPM version: 6.9.0
• App type Angular CLI
• Angular version: "@angular/core": "~8.2.5"

Invalid config warning - "hosts"

Describe the bug
it looks like the jest schematic may be using config that is no longer valid for Jest

Additional context

● Validation Warning:

  Unknown option "hosts" with value ["src"] was found. Did you mean "haste"?
  This is probably a typing mistake. Fixing it will remove this message.

  Configuration Documentation:
  https://jestjs.io/docs/configuration.html

cc: @jrista

toMatchSnapshot fails to work

Describe the bug
Adding a toMatchSnapshot() assertion in a test on a fresh angular 6 project gets an error.

To Reproduce
Steps to reproduce the behavior:
With @angular/cli@6:

ng new testproj
cd testproj
ng add @briebug/jest-schematic
# edit app.component.spec.ts and add a toMatchSnapshot() assertion
npm test

Error message is:

$ npm test

> [email protected] test /tmp/fooa
> jest

 FAIL  src/app/app.component.spec.ts
  ● Test suite failed to run

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    src/app/app.component.spec.ts:22:23 - error TS2339: Property 'toMatchSnapshot' does not exist on type 'Matchers<any>'.

    22     expect(app.title).toMatchSnapshot();
                             ~~~~~~~~~~~~~~~

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        4.592s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

Expected behavior
I expected these to work once project is converted to jest

Desktop (please complete the following information):

• OS: Linux
• Node version: 8.11.3
• NPM or Yarn version NPM
• App type Angular CLI
• Angular version ^6.1.0

Validation Error: Preset jest-preset-angular not found.

Describe the bug
After running the command "ng add @briebug/jest-schematic" inside of my angular app and then running "ng test", I receive an error:

Validation Error:

Preset jest-preset-angular not found.

Configuration Documentation:
https://jestjs.io/docs/configuration

To Reproduce

1. Create a new ng app via CLI
2. Navigate to new app folder via CLI
3. execute CLI command "ng add @briebug/jest-schematic"
4. execute CLI command "ng test"

Expected behavior
I expected the 3 default unit tests in my app.component.spec.ts to pass successfully.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Node version: v16.13.0
• App type: Angular CLI
• Angular version: 13.3.7

Additional context

Make ng test work

Is your feature request related to a problem? Please describe.

This is an awesome schematic. It would be even more awesome, if you could run the jest specs by entering ng test. After adding the jest-schematic, ng test does not run the tests anymore.

Describe the solution you'd like

Make the jest-schematic:

• install @angular-builders/jest (npm i -D jest @types/jest @angular-builders/jest)
• in angular.json, replace @angular-devkit/build-angular:karma with @angular-builders/jest:run

An unhandled exception occurred: Cannot find module 'node:fs'

Describe the bug
Tengo el siguiente error al ejecutar ng test,
probe instalando las version 6.0.0 y 5.0.0 y tuve el mismo error
An unhandled exception occurred: Cannot find module 'node:fs'
C:\nodejs64\node_modules@angular\cli\lib\init.js

To Reproduce
Steps to reproduce the behavior:

1. ng add @briebug/jest-schematic
2. ng test

Expected behavior
Espero puedan ayudarme

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 7 x64
• Node version: 14.17.6
• Angular CLI: 14.2.6
• Npm:6.14.15