2

I have a vanilla Angular7 project that was generated via ng CLI and in there I have a component that I would like to test: src/app/mini-cal/mini-cal.component.spec.ts

I don't know of any way to ask angular cli tool to do this for me, the following combinations failed:

ng test --specs='src/app/mini-cal/mini-cal.component.spec.ts'
ng test -- --specs='src/app/mini-cal/mini-cal.component.spec.ts'

So I decided to point protractor at it like so:

protractor e2e/protractor.conf.js --specs='src/app/mini-cal/mini-cal.component.spec.ts'

which worked in getting at the file of interest but its missing additional configuration for:

  • zone

    - Failed: Zone is needed for the async() test helper
          but could not be found. Please make sure
          that your environment includes
          zone.js/dist/zone.js
  • testbed initialization 
    - Failed: Cannot read property 'injector' of null

Usually all of this is available in src/test.ts and used by ng test automatically ... but now that I'm starting the process via protractor, I need to incorporate it into my e2e/protractor.conf.js file's onPrepare() method somehow.

How can I accomplish this?

pulkitsinghal
  • 3,855
  • 13
  • 45
  • 84
  • 2
    You trying to do a unit test or an e2e test? You're specifying one file which makes it seem like a unit test. The Angular CLI uses Jasmine (testing framework) and Karma (test runner) for the unit tests and Protractor for e2e tests: https://angular.io/guide/testing. What does your test file look like? IMHO Jest gives a much better test running experience (ability to run specific tests by pattern matching, run only on changed files in your git working copy, interactive watching mode, snapshots, etc). – Scotty Waggoner May 03 '19 at 23:41
  • Ah I think you've found the cracks in my understanding. I want to test components so I am doing unit testing not e2e and shouldn't try to use protractor for this! I suppose then instead of looking at protractor for specifying a specific file for testing ... I should look at an alternative such as Jest. Please feel free to add your comment as an answer so I may mark it as the correct solution. – pulkitsinghal May 04 '19 at 00:35
  • I have a bunch of experience using Jasmine/Karma with AngularJS and Jest with React, but none testing in Angular 2+. No idea how the Angular CLI is for testing or how well Jest works with Angular. (I tried using Jest with AngularJS once and couldn't get the config completely working.) So don't hate me if things don't work as planned :) – Scotty Waggoner May 04 '19 at 01:12
  • If you want to try the Jest route, these links make it look pretty easy https://github.com/briebug/jest-schematic https://github.com/thymikee/jest-preset-angular https://www.xfive.co/blog/testing-angular-faster-jest/ https://blog.angularindepth.com/integrate-jest-into-an-angular-application-and-library-163b01d977ce – Scotty Waggoner May 04 '19 at 01:12

1 Answers1

2

Since you are testing a single component, I believe you are trying to write and run a unit test, not an e2e (end to end) test. Unit tests generally only test a small unit (like a component or service or function) and are purposely scoped to make sure that unit does what is expected without having to worry about how external units are implemented. An end to end test (I've never written one so correct me if I'm wrong) would fire up your whole app and interact with it to test if units are working together correctly (think testing whole pages, multiple components interacting, navigating, etc).

The Angular CLI uses the Karma test runner to run the unit tests in a browser environment and Protractor for e2e tests (I don't know the specifics of how Protractor runs tests.) See Angular's Testing Guide. So ng test runs Karma and ng e2e runs Protractor. Both types of tests use Jasmine as the testing framework for actually writing the test code.

It appears others have struggled with running a single unit test. You can use Jasmine's focused test feature to display output from a single it or describe block by changing them to fit or fdescribe. But that doesn't stop the code in other test files from being compiled or loaded, just keeps other describe or it blocks from running. You can see How to execute only one test spec with angular-cli for attempts at doing other things.

I've enjoyed using Jest for all my React tests and I believe Jest gives a much better test running experience (ability to run specific tests by pattern matching, run only on changed files in your git working copy, interactive watching mode, updating snapshots, etc). You can look at the Jest cli options to see how to run only specific tests. Jest is both a testing framework (which is very much a copy of Jasmine syntax) and a test runner. Jest can use jsdom or node to run your tests and doesn't need to run a real browser. Looks like Karma might have some support for jsdom now too...

If you want to go the Jest route, using Jest Angular Schematic seems like the easiest way to add Jest to an Angular project and has a corresponding article about it.

Scotty Waggoner
  • 3,083
  • 2
  • 26
  • 40
  • Thanks @scotty-waggoner ... this is all legit. Also since I was only trying to test some functions inside my component, not so much the component's UI behavior ... setting up Unit testing with TypeScript  and pointing that at the component file also worked for me: https://journal.artfuldev.com/unit-testing-node-applications-with-typescript-using-mocha-and-chai-384ef05f32b2 – pulkitsinghal May 05 '19 at 15:57