[NG10] [RC] Testing is not working

[mahmoudajawad]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.8.0-rc.4
• Cross-platform modules: @nativescript/core: 7.0.0-rc.24
• Android Runtime: 6.5.3
• iOS Runtime: 6.5.2
• Plugin(s):
• NativeScript-Angular: "@nativescript/angular": "rc" (rc CLI updated and project created on Jul. 27th. 2020)
• Angular: "@angular/core": "~10.0.0"

Describe the bug
After creating the project and setting up testing per the guide on: https://docs.nativescript.org/angular/tooling/testing/testing (which works with NS6+NG8, only. Doesn't work with NS6+NG9) and running it the following is logged in the console:

Searching for devices...
File change detected. Starting incremental webpack compilation...
(node:21616) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
ℹ ｢wdm｣: wait until bundle finished: noop
ℹ ｢wdm｣: wait until bundle finished: noop
File change detected. Starting incremental webpack compilation...
Webpack compilation complete. Watching for file changes.
✖ ｢wdm｣: Hash: 57cbafb0379fd63d949c
Version: webpack 4.43.0
Time: 11272ms
Built at: 07/27/2020 11:47:55 AM
                           Asset       Size                  Chunks             Chunk Names
                      runtime.js   5.96 KiB                 runtime  [emitted]  runtime
src/tests/example.spec.bundle.js  217 bytes  src/tests/example.spec  [emitted]  src/tests/example.spec
       src/tests/setup.bundle.js  196 bytes         src/tests/setup  [emitted]  src/tests/setup
Entrypoint src/tests/setup = runtime.js src/tests/setup.bundle.js
Entrypoint src/tests/example.spec = runtime.js src/tests/example.spec.bundle.js
[./tests/example.spec.ts] ./src/tests/example.spec.ts 0 bytes {src/tests/example.spec} [built]
[./tests/setup.ts] ./src/tests/setup.ts 0 bytes {src/tests/setup} [built]

ERROR in src/tests/example.spec.ts:19:1 - error TS2582: Cannot find name 'describe'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.

19 describe('Renderer E2E', () => {
   ~~~~~~~~
src/tests/example.spec.ts:20:5 - error TS2304: Cannot find name 'beforeEach'.

20     beforeEach(nsTestBedBeforeEach([ZonedRenderer]));
       ~~~~~~~~~~
src/tests/example.spec.ts:21:5 - error TS2304: Cannot find name 'afterEach'.

21     afterEach(nsTestBedAfterEach(false));
       ~~~~~~~~~
src/tests/example.spec.ts:22:5 - error TS2304: Cannot find name 'afterAll'.

22     afterAll(() => {});
       ~~~~~~~~
src/tests/example.spec.ts:24:5 - error TS2582: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i @types/jest` or `npm i @types/mocha`.

24     it('executes events inside NgZone when listen is called outside NgZone', async(() => {
       ~~
src/tests/example.spec.ts:29:13 - error TS2304: Cannot find name 'expect'.

29             expect(arg).toEqual(eventArg);
               ~~~~~~
src/tests/example.spec.ts:30:13 - error TS2304: Cannot find name 'expect'.

30             expect(NgZone.isInAngularZone()).toBeTruthy();
               ~~~~~~

ℹ ｢wdm｣: Failed to compile.
27 07 2020 11:47:55.318:WARN [karma]: No captured browser, open http://localhost:9876/
27 07 2020 11:47:55.321:INFO [karma-server]: Karma v5.1.0 server started at http://0.0.0.0:9876/
27 07 2020 11:47:55.321:INFO [launcher]: Launching browsers android with concurrency unlimited
27 07 2020 11:47:55.402:INFO [launcher]: Starting browser NativeScript Unit Test Runner
Preparing project...
File change detected. Starting incremental webpack compilation...

webpack is watching the files…

Hash: 0910ec96edc1fa89cd03
Version: webpack 4.43.0
Time: 15385ms
Built at: 07/27/2020 11:48:14 AM
              Asset       Size   Chunks             Chunk Names
          bundle.js   12.6 KiB   bundle  [emitted]  bundle
       package.json  112 bytes           [emitted]  
         runtime.js   13.9 KiB  runtime  [emitted]  runtime
tns-java-classes.js    0 bytes           [emitted]  
          vendor.js   6.19 MiB   vendor  [emitted]  vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[../node_modules/nativescript-unit-test-runner/app sync recursive (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$] ../node_modules/nativescript-unit-test-runner/app sync (?<!\bApp_Resources\b.*)(?<!\.\/\btests\b\/.*?)\.(xml|css|js|(?<!\.d\.)ts|(?<!\b_[\w-]*\.)scss)$ 632 bytes {bundle} [built]
[./ sync recursive tests\/.*\.(ts|js)] . sync tests\/.*\.(ts|js) 209 bytes {bundle} [built]
[./main.ts] 1.1 KiB {bundle} [built]
[./package.json] 100 bytes {bundle} [optional] [built]
[./tests/example.spec.ts] 0 bytes {bundle} [optional] [built]
[./tests/setup.ts] 0 bytes {bundle} [optional] [built]
    + 352 hidden modules

ERROR in src/tests/example.spec.ts:12:9 - error NG8001: 'StackLayout' is not a known element:
1. If 'StackLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

12         <StackLayout><Label text="Layout"></Label></StackLayout>
           ~~~~~~~~~~~~~

Webpack compilation complete. Watching for file changes.
Webpack build done!
Project successfully prepared (android)
Building project...
Gradle build...
         + setting applicationId
         + applying user-defined configuration from /path/to/project/ns-ng-unittest/App_Resources/Android/app.gradle
         + using android X library androidx.legacy:legacy-support-v4:1.0.0
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: /path/to/project/ns-ng-unittest/node_modules/@nativescript/core/platforms/android/widgets-release.aar
         + adding aar plugin dependency: /path/to/project/ns-ng-unittest/node_modules/nativescript-unit-test-runner/platforms/android/nativescript_unit_test_runner.aar
Project successfully built.
The build result is located at: /path/to/project/ns-ng-unittest/platforms/android/app/build/outputs/apk/debug/app-debug.apk
Installing on device emulator-5554...
Successfully installed on device with identifier 'emulator-5554'.
Restarting application on device emulator-5554...
JS: NSUTR: fetching http://127.0.0.1:9876/context.json
JS: NSUTR: fetching http://192.168.0.150:9876/context.json
JS: NSUTR: found karma at 192.168.0.150
JS: NSUTR: connecting to karma at http://192.168.0.150:9876
JS: NSUTR: successfully connected to karma
JS: NSUTR: successfully connected to karma
Successfully synced application org.nativescript.nsngunittest on device emulator-5554.
JS: NSUTR-socket.io: ping timeout
JS: NSUTR-socket.io: 1
JS: NSUTR-socket.io: 1
JS: NSUTR: successfully connected to karma
JS: NSUTR: successfully connected to karma
JS: NSUTR-socket.io: ping timeout

Device would only show the following screen with text changing reflecting the connection status:

One thing worth noting is @types/jasmin got installed as part of nsc test init, unlike previous NS versions, yet errors are shown in the console on this regard. I manually again installed @types/jasmin but test showed exactly the same error.

To Reproduce

Based on NS6+NG10 rc as of Jul. 27th. 2020

1. Install latest NS6+NG10 rc: npm i -g nativescript@rc
2. Create new project: nsc create sampleapp --template @nativescript/template-hello-world-ng@rc
3. Setup testing: nsc test init
4. Run tests: tns test PLATFORM [--watch]

The error would still be shown even after adding TestBed setup and @types/jasmin:

5. Add TestBed and reinstall @types: per guide

Expected behavior
Should begin to test example.ts, or example.spec.ts for steps 1-4, 1-5 respectively.

Sample project
Based on rc project, and Unit Testing article.

Additional context
Testing is broken in NS6+NG9 since the change of lib to @nativescript/angular instead of nativescript-angular. I'm not sure if this issue is just an extension to NS6+NG9 issues I faced running tests, but since most of my projects I'm working on are on NG8 already and upgrading to NS6+NG9 seems to break them, I remained on NS6+NG8 and continued to have unit tests working. But, since NG10 seems to bring great features like complete Ivy support and async boot, jumping into it is a must for me, and unit tests is essential part of making this move.

[mahmoudajawad]

I'm closing this issue while opening another one documenting issue adding unit testing to NS+NG10 project with final release