title: Angular Jest Spectator - problem mocking dependency services
body: <p>So I'm trying to set up my project with Jest/Spectator as it seems like a very neat way to develop tests but I'm running into issues with the dependencies for my components and services. And getting them mocked entirely isn't the main issue, changing their behavior to do different things is the main issue.</p>
  
  <p>Say I have a service, that returns something, in my current tests that always seems to be undefined. And when its an observable (like returning an array with the ReplaySubject) or any chained object, it does not seem to work. Or when I want to know how many times a call was made (or with what parameters), it doesn't seem to match. I know that for Jest there are different modules to load and that the syntax for Jest is different compared to Karma/Jasmine (like mockReturnValue instead of .and.returnValue), but it still seems to not work or break the tests.</p>
  
  <p>And for child components to change depending on the data I input, or trigger onChange events, it all seems very difficult to find out how its supposed to go. Same with when you add routing to the mix, it all seems to fall flat when you want to try to make things dynamic.</p>
  
  <p>The documentation from Jest and Spectator seems pretty basic and don't really cover the part where you start actually using the thing. I had to look to issues to see whats what and that makes things pretty hard to figure out.</p>
  
  <p>So what are some examples to follow, some best practices to use and things to build on? I'm mainly looking on how to properly mock services so I can change the behavior of my components or services depending on how it communicates with others. The only way I found to make any test work is to completely mock the entire thing but then I'm not really testing the contents of my components well.</p>
  
  <p>I know that Jest/Spectator aren't the Angular defaults, but I've disliked Karma/Jasmine for a long time and wanted to try something different.</p>
  
  <p>So say I have a service like so:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { ReplaySubject, Observable } from 'rxjs';
  
  /**
   * Some Service to do stuff
   */
  @Injectable({
      providedIn: 'root',
  })
  export class SomeService {
      private myData: string[]; // some data that gets managed here
  
      private _name$ = new ReplaySubject&lt;string[]&gt;(); // some name that gets updated by different components/services
      nameObservable: Observable&lt;string[]&gt;; // for example when it is set without a function (though I did see there were issues with this)
  
      constructor() {
          this.nameObservable = this._name$.asObservable(); // for when values get set in the constructor
      }
  
      // this is a function that gets called from somewhere else
      setName(name: string): void {
          this._name$.next([name]);
      }
  
      setMyData(): void {
          // this data can come from somewhere else in the application but I want to mock whatever this returns.
          this.myData = ['stuff'];
      }
  
      getSomeData(stuff: string): string {
          return stuff + 'otherStuff';
      }
  }
  </code></pre>
  
  <p>How do I mock this in another test when it is a dependency and modify its output? I get either problems subscribing on results or functions not existing. Even spectator becomes undefined. But rather than just fixing my current issue, I'd like to know what a normal way of working would be.</p>
  
  <p>So, in a single test:</p>
  
  <ol>
  <li>How would I change the output of this dependency to get
  different data into my Angular tests that use Jest+Spectator?</li>
  <li>How would I mock this dependency for tests that don't involve this
  dependency (given that there are tests that do)?</li>
  <li>How would I check whether functions were called and with what parameters? (spyOn or such)</li>
  </ol>
  
  <p>Of course I could go back to Karma/Jasmine and drop Spectator, but I think that with some help I can not only get my tests working, but the documentation updated for Spectator and/or Jest as I feel parts are missing and there isn't enough questions yet about this combination. Seeing how fast tests are and how easy it is to debug (given you know what you are doing and what the syntax should be), I have no doubt this will be come more popular soon...</p>