Can't enable tests on project created in Nx workspace

[mahmoudajawad]

Overview

Command ns tests init is used to initilise tests in Nativescript. The command doesn't have docs on how to be used with Nx workspace.

Details

I attempted to run it on Nx workspace root, where it correctly created karma.config.js, but nothing at all to the single nativescript app in the workspace. Running the command from the app folder fails with the log:

npm ERR! code 127
npm ERR! path /path/to/wprkspace/node_modules/typescript
npm ERR! command failed
npm ERR! command sh -c gulp build-eslint-rules
npm ERR! sh: gulp: command not found

npm ERR! A complete log of this run can be found in:
npm ERR!     /HOME/PATH/.npm/_logs/2021-04-03T07_48_00_995Z-debug.log
Command npm failed with exit code 127

[NathanWalker]

We're working on a blog post to detail unit testing and will cover this.

[mahmoudajawad]

@NathanWalker, I came across NativeScript account tweet about testing in NS8. Does this also cover the use-case with Nx? I'm yet to try it as I'm not near my device today, but thought of asking before trying to figure out if any additional steps are required.

[mahmoudajawad]

So, this partially worked like this (Using nativescript==8.0.2):

$ npx create-nx-workspace@12.2 # As 12.3 is out, but it conflicts with Angular version
$ npm i --save-dev @nativescript/nx
$ npx nx g @nativescript/nx:app # Angular app
$ cd apps/app
$ ns init test # Success!
$ ns test ios # Fails

# ... a lot of logs

ERROR in ./src/tests/example.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: /path/to/workspace/apps/nativescript-app/src/tests/example.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
    at AngularCompilerPlugin.getCompiledFile (/path/to/workspace/apps/nativescript-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:951:23)
    at /path/to/workspace/apps/nativescript-app/node_modules/@ngtools/webpack/src/loader.js:43:31
 @ ./src/ sync ^\.\/tests\/(.+\/)?([^/]+)\.ts$ ./tests/example.ts
 @ ./node_modules/.nativescript/__@nativescript_webpack_virtual_entry_unit-test-runner__ 2:16-6:1

webpack 5.31.2 compiled with 1 error and 12 warnings in 20935 ms

# a lot of logs

CONSOLE LOG: NSUTR: this.error: Error: Failed to load test tests/example.
at /absoluteexample.3329874741.js?e0cb6652c55435bc885a11dedc8347bbdacf6667
NativeScript / 14.4 (14.4; iPhone): Executed 0 of null SUCCESS (0 secs / 0 secs)
NativeScript / 14.4 (14.4; iPhone)  /absoluteexample.3329874741.js?e0cb6652c55435bc885a11dedc8347bbdacf6667 at line 0 FAILED
    Error: Failed to load test tests/example.
NativeScript / 14.4 (14.4; iPhone): Executed 1 of null (1 FAILED) (0 secs / 0 seNativeScript / 14.4 (14.4; iPhone): Executed 1 of null (1 FAILED) (0.003 secs / 0 secs)
TOTAL: 1 FAILED, 0 SUCCESS
CONSOLE LOG: NSUTR: completeAck
14 05 2021 18:20:19.841:WARN [NativeScript / 14.4 (14.4; iPhone)]: Disconnected (0 times) Client disconnected from CONNECTED state (client namespace disconnect)
NativeScript / 14.4 (14.4; iPhone) ERROR
  Disconnected Client disconnected from CONNECTED state (client namespace disconnect)
NativeScript / 14.4 (14.4; iPhone): Executed 1 of null (1 FAILED) (0.003 secs / 0 secs)

[mahmoudajawad]

To isolate the issue as nx-only, I was able to create new ns project, initialise tests, and run them successfully.

[wSedlacek]

I was able to get a bit further on android.

Successfully synced application org.nativescript.template on device emulator-5554.
JS: NSUTR: fetching http://127.0.0.1:9876/context.json
JS: NSUTR: fetching http://192.168.86.109:9876/context.json
JS: NSUTR: found karma at 192.168.86.109
JS: NSUTR: connecting to karma at http://192.168.86.109:9876
JS: NSUTR: successfully connected to karma
08 09 2021 00:53:58.719:INFO [NativeScript / 31 (12; sdk_gphone64_x86_64)]: Connected on socket 0SIC2Z-zEn3gc70DAAAB with id NativeScriptUnit-5016
JS: NSUTR: downloading http://192.168.86.109:9876/context.json
JS: NSUTR: eval script /absolute/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/brandingbrand/apps/template/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?51a40acf5239b7ae03a061e37e3ae2715d0199de
JS: NSUTR: eval script /absolute/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/brandingbrand/apps/template/node_modules/karma-jasmine/lib/boot.js?760d54bbca4f739f1f8b252c1636d76201cc4e88
JS: NSUTR: eval script /absolute/Volumes/MacOS-Data/Home/wsedlacek/Devolpement/angular/brandingbrand/apps/template/node_modules/karma-jasmine/lib/adapter.js?c22f41e6dc6770beb0be7c86dfade9637bce9290
JS: NSUTR: eval script /absoluteexample.1179246594.js?c0f938ad0f4c78713cfddcf638e6611a99366997
JS: Loading test: tests/example
JS: NSUTR: beginning test run
NativeScript / 31 (12; sdk_gphone64_x86_64): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
NativeScript / 31 (12; sdk_gphone64_x86_64): Executed 1 of 1 SUCCESS (0.071 secs / 0.005 secs)
TOTAL: 1 SUCCESS
JS: NSUTR: completeAck
JS: NSUTR-socket.io: io client disconnect
NativeScript / 31 (12; sdk_gphone64_x86_64) ERROR
  Disconnected Client disconnected from CONNECTED state (client namespace disconnect)
NativeScript / 31 (12; sdk_gphone64_x86_64): Executed 1 of 1 SUCCESS (0.071 secs / 0.005 secs)

It opens up the app and appears to run a test which succeeds before closing the app. I am not sure what test it is running though as I have tried to make it fail by giving bad expectations or commenting out the test and it always says one test runs and succeeds.

🤷🏻

The other issue is that while it closes the app after the test runs, it doesn't end the command which seems like I wouldn't be able to put this in a CI/CD job with that behavior. At least not trivially.

And for local development it feels a bit odd that it closes right away, I kinda would have liked to keep it open as it looked liked there was some info that might be useful when debugging test within the app.

[wSedlacek]

Found the test it was running. There was an example.js that was created but ignored by the default .gitignore So I changed the file match pattern in the karma config to match my specs and main-test.ts following the pattern in the demo app in the @nativescript/angular repo and I got my test to run and pass.

A few issues I would like to point out. There doesn't appear to be a Testing module for the NativeScriptRouterModule. This is a problem because NSRouteReuseStrategy has some required dependency by the router so I either have to provide that in the test or use the full NativeScriptRouterModule

The app still closes on each run as I mentioned before and the task stays running after completing, not sure if that is something I can configure with karma.

It is running against tsconfig.app.json when I would really prefer it run against tsconfig.spec.json and I don't see any easy way to configure that.

[JakeAi]

We're working on a blog post to detail unit testing and will cover this.

Is there an update on this? I have not been successful getting testing to work in an NX repo with a nativescript application.

[JakeAi]

Found the test it was running. There was an example.js that was created but ignored by the default .gitignore So I changed the file match pattern in the karma config to match my specs and main-test.ts following the pattern in the demo app in the @nativescript/angular repo and I got my test to run and pass.

A few issues I would like to point out. There doesn't appear to be a Testing module for the NativeScriptRouterModule. This is a problem because NSRouteReuseStrategy has some required dependency by the router so I either have to provide that in the test or use the full NativeScriptRouterModule

The app still closes on each run as I mentioned before and the task stays running after completing, not sure if that is something I can configure with karma.

It is running against tsconfig.app.json when I would really prefer it run against tsconfig.spec.json and I don't see any easy way to configure that.

Did you get this working completely?

[NathanWalker]

Hi all - we ended up revamping the unit-test-runner and have a 3.0 released now which is added by {N} cli 8.1.5 as default now and we are planning to add a generator here which would allow one to easily configure it within Nx on the next major version (~January 2022). We are also planning the post to be published outlining 3.0 details and how to configure with plain/core projects as well as Angular projects before Christmas break however.

[JakeAi]

Hi all - we ended up revamping the unit-test-runner and have a 3.0 released now which is added by {N} cli 8.1.5 as default now and we are planning to add a generator here which would allow one to easily configure it within Nx on the next major version (~January 2022). We are also planning the post to be published outlining 3.0 details and how to configure with plain/core projects as well as Angular projects before Christmas break however.

I'm so glad you responded. I have been trying to get multiple things to work from the nativescript-blog, but they were not working. However, you said it was updated in 8.1.5, which I have, which is probably why it wasn't working. Do you have any repos (not NX necessarily, even standalone apps) utilizing the new test-runner (with angular) that I can learn from in the mean time? Or hints?

[NathanWalker]

I'll set one up - we have a private one used for training but I will setup a public one to go along with the blog post - You can actually refer to the new NativeScript/angular repo as it was recently updated to use the new 3.0 runner on the Angular 13 branch (angular 13 is not required so don't worry about that) - but you can refer to the setup on this branch: https://github.com/NativeScript/angular/tree/feat/angular13/apps/nativescript-demo-ng

[mahmoudajawad]

Thanks for the great work, @NathanWalker and rest of contributors!

[JakeAi]

I'll set one up - we have a private one used for training but I will setup a public one to go along with the blog post - You can actually refer to the new NativeScript/angular repo as it was recently updated to use the new 3.0 runner on the Angular 13 branch (angular 13 is not required so don't worry about that) - but you can refer to the setup on this branch: https://github.com/NativeScript/angular/tree/feat/angular13/apps/nativescript-demo-ng

I got it working in my repo exactly like the repo you linked. I am trying to test a component which references another component from the libs folder, how do we allow access to the monorepo libs?

ERROR in ./src/tests/list-view-tests.spec.ts 5:0-71
Module not found: Error: Can't resolve '@mm-mono/xplat/nativescript/features' in 'C:\Development\minnich\apps\nativescript-monitor\src\tests'
 @ ./src/ sync \.spec\.ts$ ./tests/list-view-tests.spec.ts
 @ ./src/test.ts 5:22-64

[NathanWalker]

@JakeAi You likely need the path aliases exposed to the tsconfig.spec.json - do you have them referenced like this? https://github.com/NativeScript/angular/blob/feat/angular13/apps/nativescript-demo-ng/tsconfig.spec.json#L9-L14 For example with xplat, you could do this sort of thing in the interim:

"@mm-mono/xplat/nativescript/features": ["../../libs/xplat/nativescript/features/src/index.ts"]

[JakeAi]

@JakeAi You likely need the path aliases exposed to the tsconfig.spec.json - do you have them referenced like this? https://github.com/NativeScript/angular/blob/feat/angular13/apps/nativescript-demo-ng/tsconfig.spec.json#L9-L14 For example with xplat, you could do this sort of thing in the interim:

"@mm-mono/xplat/nativescript/features": ["../../libs/xplat/nativescript/features/src/index.ts"]

I kinda figured that was the case. However, I was trying to avoid doing that. But if that will be fixed eventually, I don't mind doing it for now.

[NathanWalker]

@JakeAi We have unit test runner v3 configured and running within xplat now without having to specify paths (just reusing the tsconfig.base.json). We're writing a post covering the details as well as included a new test builder/executor which will run it all. We'll also be covering how to setup unit testing against angular component/services for those using that flavor. But it can work within Nx (with or without xplat) and any flavor.

[JakeAi]

@JakeAi We have unit test runner v3 configured and running within xplat now without having to specify paths (just reusing the tsconfig.base.json). We're writing a post covering the details as well as included a new test builder/executor which will run it all. We'll also be covering how to setup unit testing against angular component/services for those using that flavor. But it can work within Nx (with or without xplat) and any flavor.

Do you have a repo? :)

[NathanWalker]

The merged PR provides a test builder which can be used like everything else to invoke tests from root of workspace with standard semantics, can add this to the target/architect replacing app name with yours:

"test": {
      "executor": "@nativescript/nx:test",
      "outputs": ["coverage/apps/nativescript-mobile"],
      "options": {
        "coverage": false // applies to both platforms
      },
      "configurations": {
        "android": {}, // can turn coverage on per platform if desired as well here
        "ios": {}
      }
    },

Can be invoked with:

nx run nativescript-mobile:test:ios

We're updating to angular 13 and will add the test generator which would generate the test entry and setup to any apps specified via prompts next.

[SmailHammour]

@NathanWalker I keep getting this error when trying to run the tests;

Error: In order to run unit tests, your project must already be configured by running $ ns test init.

I'm a little bit confused why I'm even getting that error. Nx uses jest, but when I want to initialise the test, using the ns test init command, it's asking me to use karma.

What am I doing wrong here?

[SmailHammour]

@NathanWalker Any idea why I'm getting that error?