断言 localStorage 值始终为 null

Question

我正在使用 React JS 构建 Web 应用程序。我正在使用 Cypress 为我的应用程序编写集成测试。现在我正在编写一个测试来声明 localStorage 中的值。但是 localStorage 值始终返回 null，即使应用程序实际上将预期值存储在 localStorage 中。

这是我的代码：

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);
    })
})

localStorage.getItem('access_token') 在测试中总是返回 null。我的代码有什么问题，我该如何测试它？

Answer 1

行expect(localStorage.getItem('access_token')).to.eq(accessToken)是同步的，其他都是异步的，所以在登录完成之前已经运行了。

尝试添加 .then()

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

断言 localStorage 值始终为 null

Asserting localStorage value is always null

local-storage

cypress