Asserting localStorage value is always null

Viewed 75

I am building a web application using React JS. I am writing integration tests for my application using Cypress. Now I am writing a test to assert the value in the localStorage. But the localStorage value is always returning null even though the application actually stores the expected value in the localStorage.

Here is my code:

describe('Login', () => {
    it ('redirects to dashboard page when login is successful', () => {
        const accessToken = "fake access token"
        cy.intercept('POST', '**/user/login', {
            "accessToken": accessToken,
            "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"
            }})
        cy.intercept('GET', '**/user/me', {
            "data":{
                "roles":[
                    {
                        "id":4,
                        "identifier":5,
                        "title":"Super Admin",
                        "created_at":null
                    }],
                "user":{
                    "id":31,
                    "name":"Super Admin",
                    "email":"superadmin@gmail.com",
                    "created_at":"2022-05-24T13:14:53.000000Z",
                    "roles":[
                        {
                            "id":4,
                            "identifier":5,
                            "title":"Super Admin",
                            "created_at":null
                        }],
                    "internal_admin_access_disabled":false
                },
                "restaurant_staff":null
            }
        });
        cy.get('input[cy-data-id="email"]').type('test-email@gmail.com')
        cy.get('input[cy-data-id="password"]').type('password');
        cy.get('button[cy-data-id="btn-login"]').click();

        cy.location('pathname').should('eq', '/dashboard');
        // eslint-disable-next-line jest/valid-expect
        expect(localStorage.getItem('access_token')).to.eq(accessToken);
    })
})

The localStorage.getItem('access_token') is always returning null in the test. What is wrong with my code, and how can I test it?

1 Answers

The line expect(localStorage.getItem('access_token')).to.eq(accessToken) is synchronous, all the others are asynchronous, so it has already run before the login completes.

Try adding a .then()

cy.location('pathname').should('eq', '/dashboard')
  .then(() => {
    // eslint-disable-next-line jest/valid-expect
    expect(localStorage.getItem('access_token')).to.eq(accessToken)
  })
Related