title: Change value of observable returned by mocked service for each test in Angular/Jasmine/Redux
body: <p>I have a service that returns the values exposed by ngrx selectors.
  A component defines this service to get data.
  I am writing unit tests for the component using a mock of the service, and I need the mock service to return different values for each unit test.
  How can I achieve this?</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>@Component({
      selector: 'app-test',
      templateUrl: './test.component.html',
      providers: [TestService],
  
  })
      export class TestComponent {
  
          test$ = this.testService.test$;
          test: number;
  
          constructor(private service: TestService) {
              service.test$.subscribe(test =&gt; this.test = test);
          }
      }
  </code></pre>
  
  <p><strong>Service</strong></p>
  
  <pre><code>export class TestService {
  
          test$ = this.store.select(getTestValueFromStore);
  
          constructor(private store: Store&lt;any&gt;){}
  }
  </code></pre>
  
  <p><strong>Attempt 1 (reset the value of the service): does not work</strong></p>
  
  <pre><code>class MockTestService {
      **test$ = of(10);**
  }
  
  describe('TestComponent', () =&gt; {
      let testService: TestService;
  
      beforeEach((() =&gt; {
          // Define component service
          TestBed.overrideComponent(
              TestComponent,
              { set: { providers: [{ provide: TestService, useClass: MockTestService }] } }
          );
  
          TestBed.configureTestingModule({
              declarations: [TestComponent]
          })
              .compileComponents();
      }));
  
      beforeEach(async() =&gt; {
          fixture = TestBed.createComponent(TestComponent);
          component = fixture.componentInstance;
          testService = fixture.debugElement.injector.get(TestService);
          fixture.detectChanges();
      });
  
  it('should do something when the value returned by the service is 20', fakeAsync(() =&gt; {
  
          **testService.test$ = of(20);**
  
          tick();
  
          expect(component.test).toEqual(20);
      }));
  });
  </code></pre>
  
  <p><strong>Attempt 2: use subjects. Karma throws error 
  "Property 'next' does not exist on type 'Observable'"
  because TestService returns observables, not subjects</strong></p>
  
  <pre><code>class MockTestService {
          **test$ = new BehaviourSubject(10);**
      }
  
      describe('TestComponent', () =&gt; {
          let testService: TestService;
  
          beforeEach((() =&gt; {
              // Define component service
              TestBed.overrideComponent(
                  TestComponent,
                  { set: { providers: [{ provide: TestService, useClass: MockTestService }] } }
              );
  
              TestBed.configureTestingModule({
                  declarations: [TestComponent]
              })
                  .compileComponents();
          }));
  
          beforeEach(async() =&gt; {
              fixture = TestBed.createComponent(TestComponent);
              component = fixture.componentInstance;
              testService = fixture.debugElement.injector.get(TestService);
              fixture.detectChanges();
          });
  
      it('should do something when the value returned by the service is 20', fakeAsync(() =&gt; {
  
              **testService.test$.next(20);**
  
              tick();
  
              expect(component.test).toEqual(20);
          }));
      });
  </code></pre>