While doing ng test in Angular 8, karma console says "Uncaught SyntaxError: Unexpected token o in JSON at position 1 thrown"

Question

This is the spec file

...
...
import { AccountService } from 'src/app/core/account.service';
import accountsummary from 'src/app/core/model/mock-account-summary.json';
import transactions from 'src/app/core/model/mock-transaction-history.json';
import { AccountsummaryComponent } from './accountsummary.component';

describe('AccountsummaryComponent', () => {
  let component: AccountsummaryComponent;
  let fixture: ComponentFixture<AccountsummaryComponent>;
  let debugElement: DebugElement;
  let mockAccountService;
  let mockModalService;
  let accSummary;
  let trans;
  beforeEach(async(() => {
    accSummary = accountsummary;
    trans = transactions;
    mockAccountService = jasmine.createSpyObj(['getAccountSummary', 'getTransactionHistory']);
    mockModalService = jasmine.createSpyObj(['show']);

    TestBed.configureTestingModule({
      declarations: [AccountsummaryComponent],
      providers: [
        { provide: AccountService, useValue: mockAccountService },
        { provide: BsModalService, useValue: mockModalService },
      ],
      imports: [ModalModule.forRoot(), RouterTestingModule, HttpClientTestingModule],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AccountsummaryComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement;
  });

  it('clicking on info-icon should open info modal', () => {

    mockAccountService.getTransactionHistory.and.returnValue(of(trans));
    mockAccountService.getAccountSummary.and.returnValue(of(accSummary));
    fixture.detectChanges();
    const showModal = mockModalService.show.and.returnValue(of([]));
    const infoIcon = debugElement.query(By.css('img'));
    infoIcon.triggerEventHandler('click', {});
    fixture.detectChanges();
    expect(showModal).toHaveBeenCalled();
  });
});

These are the json files

mock-account-summary.json
[
    {
        "id": 1,
        "spendLim": "5000",
        "discBal": "1966.21",
        "pendBal": "35",
        "availSpend": "2998.79",
        "dailySpendLim": "2998.79"
    }
]

In the spec file, I have accSumary and trans which contain the respective json data. I am mocking the AccountService to call the getAccountSummary and getTransactionHistory methods. I am returning accSumary and trans from these methods. But Karma console says Uncaught SyntaxError: Unexpected token o in JSON at position 1 thrown. The tests randomly pass and fail sometimes. Please help. This is the component.ts file:

ngOnInit() {

    this.authService.isTokenIdValid().subscribe((res) => {
    }, () => {
      window.localStorage.removeItem('token');
      this.router.navigate(['/login'])
    })
    this.accountService.getTransactionHistory().subscribe((res) => {
      res = JSON.parse(res);
      this.transactionHistory = res['Result'].array.RevTrxn.sort((a, b) => {
        return a.trxn.recDate > b.trxn.recDate ? -1 : 1;
      });
      this.filteredTransactions = this.transactionHistory;
      this.filteredTransactionsLength = this.filteredTransactions.length;
      this.currentTransactions = this.transactionHistory.slice(0, this.itemsPerPage);
      this.isTransactionsLoaded = true;
      this.maxDate = new Date(this.filteredTransactions[0].trxn.recDate);
      this.minDate = new Date(this.maxDate.getTime() - 7 * 24 * 60 * 60 * 1000);

      this.bsRangeValue = [this.minDate, this.maxDate];
      this.selectedDateRange = this.bsRangeValue;
      this.onDateChange(this.selectedDateRange);

    })
  }

Do you do any JSON.parse and JSON.stringify in your component? — AliF50, Oct 22 '20 at 12:57
@AliF50 Yes, I have used JSON.parse in the ngOnInit of the component. — Dhritiman Tamuli Saikia, Oct 23 '20 at 12:21
Have you looks at any of the questions about that same error that exist? It typically occurs when you attempt to parse and object that has already been parsed. — Heretic Monkey, Oct 23 '20 at 12:35
Does this answer your question? [I keep getting "Uncaught SyntaxError: Unexpected token o"](https://stackoverflow.com/questions/8081701/i-keep-getting-uncaught-syntaxerror-unexpected-token-o) — Heretic Monkey, Oct 23 '20 at 12:37
You are doing `JSON.parse` on `res` but you're returning an object in your test, not a stringify object. Change `mockAccountService.getTransactionHistory.and.returnValue(of(trans));` to `mockAccountService.getTransactionHistory.and.returnValue(of(JSON.stringify(trans)));` — AliF50, Oct 23 '20 at 12:54
@AliF50....Yes, I got it. stringify was the part I was missing. Thanks everyone — Dhritiman Tamuli Saikia, Oct 24 '20 at 04:38

While doing ng test in Angular 8, karma console says "Uncaught SyntaxError: Unexpected token o in JSON at position 1 thrown"

0 Answers0