Reading fixture is throwing error TypeError: Converting circular structure to JSON

Question

I am building a web application using React JS. I am writing integration tests using Cypress for my application. In my tests, I am reading JSON data from fixture files. When I read fixture file, it is throwing the following error.

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Window'
    --- property 'window' closes the circle

This is my code.

describe('Login', () => {
    it('renders login form render the form controls', () => {

    it('redirects to dashboard page when login is successful', () => {
        // TODO: use fixture
        // TODO: give alias
        // TODO: mock me endpoint
        const accessToken = 'fake access token'
        const loginResponseJson = cy.fixture('superadmin-login.json');

    })
})

This is my superadmin-login.json fixture file.

{
  "accessToken": "fake access token",
  "token": {
    "id": "c09dd33fbdcbf780ddb4d784002f1b4c8413cc298f2465f5f3e3c3481b2aa7f586d14f04af163a1c",
    "user_id": 31,
    "client_id": 1,
    "name": "User Access Token",
    "scopes": [],
    "revoked": false,
    "created_at": "2022-05-24 20:39:48",
    "updated_at": "2022-05-24 20:39:48",
    "expires_at": "2025-05-24T20:39:48.000000Z"
  }
}

What is wrong with my code and how can I fix it?

Answer 1

Reading a fixture file is an asynchronous operation, so this should work for you

cy.fixture('superadmin-login.json').then(loginResponseJson => {
  const token = loginResponseJson.token;
  ...
})

Note, Cypress has it's own type of a-synchronicity (command-queue model), so you can't do this either

// won't work
const loginResponseJson = await cy.fixture('superadmin-login.json')

You could require it at the top of the spec if you like to minimise .then() callbacks.

const loginResponseJson = require('./cypress/fixtures/superadmin-login.json')