SyntaxError: Unexpected token y in JSON at position 0

[xlozinguez]

On v1.1.0, I'm getting the error when trying to test a Patch request:

#updateCompanyField:
      ✖ should call endpoint and return its response
        Chrome 55.0.2883 (Mac OS X 10.12.1)
      SyntaxError: Unexpected token y in JSON at position 0
          at JSON.parse (<anonymous>)
          at Response.Body.json (webpack:///~/@angular/http/src/body.js:22:0 <- config/spec-bundle.js:41895:25)
          at MapSubscriber.http.patch.map.res [as project] (webpack:///src/common/services/company.api.service.ts:9:978 <- config/spec-bundle.js:29941:980)
          at MapSubscriber._next (webpack:///~/rxjs/operator/map.js:77:0 <- config/spec-bundle.js:20131:35)
          at MapSubscriber.Subscriber.next (webpack:///~/rxjs/Subscriber.js:89:0 <- config/spec-bundle.js:506:18)
          at TakeSubscriber._next (webpack:///~/rxjs/operator/take.js:79:0 <- config/spec-bundle.js:45597:30)
          at TakeSubscriber.Subscriber.next (webpack:///~/rxjs/Subscriber.js:89:0 <- config/spec-bundle.js:506:18)
          at ReplaySubject._subscribe (webpack:///~/rxjs/ReplaySubject.js:38:0 <- config/spec-bundle.js:10048:24)
          at ReplaySubject.Observable.subscribe (webpack:///~/rxjs/Observable.js:56:0 <- config/spec-bundle.js:127:27)
          at AnonymousSubject._subscribe (webpack:///~/rxjs/Subject.js:151:0 <- config/spec-bundle.js:2314:32)
          at TakeOperator.call (webpack:///~/rxjs/operator/take.js:60:0 <- config/spec-bundle.js:45578:23)
          at AnonymousSubject.Observable.subscribe (webpack:///~/rxjs/Observable.js:53:0 <- config/spec-bundle.js:124:22)
          at AnonymousSubject._subscribe (webpack:///~/rxjs/Subject.js:151:0 <- config/spec-bundle.js:2314:32)
          at MapOperator.call (webpack:///~/rxjs/operator/map.js:54:0 <- config/spec-bundle.js:20108:23)
          at AnonymousSubject.Observable.subscribe (webpack:///~/rxjs/Observable.js:53:0 <- config/spec-bundle.js:124:22)
          at Object.it (webpack:///src/common/services/company.api.service.spec.ts:44:13 <- config/spec-bundle.js:64635:16)
          at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:232:0 <- config/spec-bundle.js:50653:26)
          at ProxyZoneSpec.onInvoke (webpack:///~/zone.js/dist/proxy.js:79:0 <- config/spec-bundle.js:50317:39)
          at ZoneDelegate.invoke (webpack:///~/zone.js/dist/zone.js:231:0 <- config/spec-bundle.js:50652:32)
          at Zone.run (webpack:///~/zone.js/dist/zone.js:114:0 <- config/spec-bundle.js:50535:43)
          at Object.<anonymous> (webpack:///~/zone.js/dist/jasmine-patch.js:104:0 <- config/spec-bundle.js:50034:34)
          at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (webpack:///~/zone.js/dist/jasmine-patch.js:132:0 <- config/spec-bundle.js:50062:42)
          at ZoneQueueRunner.jasmine.QueueRunner.ZoneQueueRunner.execute (webpack:///~/zone.js/dist/jasmine-patch.js:132:0 <- config/spec-bundle.js:50062:42)
          at ZoneDelegate.invokeTask (webpack:///~/zone.js/dist/zone.js:265:0 <- config/spec-bundle.js:50686:35)
          at Zone.runTask (webpack:///~/zone.js/dist/zone.js:154:0 <- config/spec-bundle.js:50575:47)
          at drainMicroTaskQueue (webpack:///~/zone.js/dist/zone.js:401:0 <- config/spec-bundle.js:50822:35)

My code:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Company } from '../models/company.model';

@Injectable()
export class CompanyApiService {
    private API_PATH: string = 'http://localhost:3001/companies';

    constructor(private http: Http) { }

    updateCompanyField(payload: any): Observable<Company> {
        return this.http.patch(`${this.API_PATH}/${payload.company_id}`, payload.details_to_update)
            .map(res => res.json());
    }
}

My unit test:

describe('#updateCompanyField: ', () => {
        it('should call endpoint and return its response', (done) => {
            backend
                .expectPatch(
                    'http://localhost:3001/companies/foo',
                    { 'foo': 'bar' },
                    null
                )
                .respond('yeah!');

            subject.updateCompanyField({
                company_id: 'foo',
                details_to_update: { 'foo': 'bar' }
            }).subscribe((response) => {
                expect(response).toEqual('yeah!');
                done();
            });
        });
    });

I'm using Ts2 and Webpack 2, am I missing some webpack setup?

[sonicoder86]

You are responding with a string which can not be parsed as a json response.
Change it to:

backend
  .expectPatch(
    'http://localhost:3001/companies/foo',
    { 'foo': 'bar' }
  )
  .respond({ message: 'yeah!' });

[xlozinguez]

Thanks @BlackSonic ! Makes sense and it works now ;)