mfaith
mfaith

Reputation: 130

Angular Schematics: Error when running unit test in library

This is my first time working in the world of schematics, so it's quite possible I just don't have this set up correctly. But I've been following the guide on angular.io and some additional blog walkthroughs. I'm wanting to package ng-add and ng-update schematics into a component library, that I already have setup and running well. After setting up the initial plumbing for the ng-add one, I wrote a simple unit test just to validate the setup and as soon as it hits the call to new SchematicTestRunner, it blows up with a ton of Module not found errors, including child_process and fs. In fact i commented out everything in the unit test except the creation of the test runner, just to identify the breaking point. And the schematic itself isn't doing anything yet except returning the tree as-is. Interestingly, the "blank"/sample schematics project that the schematics-cli generates doesn't use ng test at all, but instead uses jasmine directly. But with this being in an existing Angular Library with full test suite, i want to test in the same way. Any help with this, would be much appreciated!

Portion of error:

ERROR in C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/tasks/node-package/executor.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package'
resolve 'child_process' in 'C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package'
  Parsed request is a module
  using description file: C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\package.json (relative path: ./tasks/node-package)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in C:/Users/<username>/src/fabric/ui
        using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: ./child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\child_process.js doesn't exist
            as directory
              C:\Users\<username>\src\fabric\ui\child_process doesn't exist
      C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\ui\node_modules\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\fabric\node_modules doesn't exist or is not a directory
      C:\Users\<username>\src\node_modules doesn't exist or is not a directory
      C:\Users\<username>\node_modules doesn't exist or is not a directory
      C:\Users\node_modules doesn't exist or is not a directory
      C:\node_modules doesn't exist or is not a directory
      looking for modules in C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules
        using description file: C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
      looking for modules in C:\Users\<username>\src\fabric\ui\node_modules
        using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\package.json (relative path: ./node_modules/child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
          using description file: C:\Users\<username>\src\fabric\ui\package.json (relative path: ./node_modules/child_process)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.js doesn't exist
            as directory
              C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process doesn't exist
              C:\Users\<username>\src\fabric\ui\node_modules\child_process.js doesn't exist
            as directory
              C:\Users\<username>\src\fabric\ui\node_modules\child_process doesn't exist
[C:\Users\<username>\src\fabric\ui\child_process]
[C:\Users\<username>\src\fabric\ui\child_process.ts]
[C:\Users\<username>\src\fabric\ui\child_process.tsx]
[C:\Users\<username>\src\fabric\ui\child_process.mjs]
[C:\Users\<username>\src\fabric\ui\child_process.js]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node-package\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\tasks\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\node_modules]
[C:\Users\<username>\src\fabric\node_modules]
[C:\Users\<username>\src\node_modules]
[C:\Users\<username>\node_modules]
[C:\Users\node_modules]
[C:\node_modules]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.ts]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.ts]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.tsx]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.tsx]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.mjs]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.mjs]
[C:\Users\<username>\src\fabric\ui\node_modules\@angular-devkit\schematics\node_modules\child_process.js]
[C:\Users\<username>\src\fabric\ui\node_modules\child_process.js]
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/tasks/node-package/executor.js 11:24-48
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/tasks/node/index.js
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/testing/schematic-test-runner.js
 @ C:/Users/<username>/src/fabric/ui/node_modules/@angular-devkit/schematics/testing/index.js
 @ ./schematics/ng-add/index.spec.ts
 @ . sync \.spec\.ts$
 @ ./test.ts

Upvotes: 2

Views: 1188

Answers (1)

Brudus
Brudus

Reputation: 799

I finally got it running! @mfaith and I had a conversation on GitHub with the Angular CLI team. You can find it here: https://github.com/angular/angular-cli/issues/17986

There are two important key takeaways:

  1. You can't run testing, building, and bundling with ng commands. So ng test will never work with the schematic tests as it is meant to be used in the browser (unlike Schematics).
  2. There is a dummy project you can use as a reference. Simply run schematics schematic your-name-for-this-project and it will create a schematic project (named your-name-for-this-project) with 3 basic schematics. There you have the scripts that you can use to run to execute your schematic tests inside a library/app.

I ended up doing the following:

  1. I've created a file tsconfig.schematics.spec.json inside my library folder (see below).
  2. I added two scripts to my projects package.json (see below).
  3. Execute the script via npm run schm:test inside the library folder.

I guess, initially there were two errors on my side. First, I wanted to make the schematic tests work with ng test. Secondly, there were for sure issues with the configuration that I was able to resolve with the configuration files from the schematics schematic project.

tsconfig.schematics.spec.json:

{
    "compilerOptions": {
        "baseUrl": "tsconfig",
        "lib": [
            "es2018",
            "dom"
        ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitOnError": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitThis": true,
        "noUnusedParameters": true,
        "noUnusedLocals": true,
        "rootDir": "schematics/",
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "es6",
        "types": [
            "jasmine",
            "node"
        ]
    },
    "include": [
        "schematics/**/*"
    ],
    "exclude": [
        "schematics/*/files/**/*"
    ]
}

2 Scripts in package.json:

"schm:build": "tsc -p tsconfig.schematics.spec.json",
"schm:test": "npm run schm:build && jasmine schematics/**/*.spec.js"

Upvotes: 3

Related Questions