如何在Cypress测试中正确打开IndexedDB连接解决运行报错问题

核心结论 #

需要为Cypress测试环境单独适配IndexedDB的初始化逻辑，你遇到的报错核心是异步操作时序错乱和上下文不匹配两个问题：

• 你写的loadScript、IndexedDB操作都是原生Promise，没有和Cypress命令链绑定，会出现cy.visit先执行、DB还没初始化完成的情况
• 你操作的window是测试脚本的上下文，和被测应用的window不是同一个对象，导致应用读取不到你初始化的DB
• localforage的配置和读写逻辑放在了loadScript的回调外，会出现库还没加载完成就调用方法的报错

正确实现代码 #

你可以通过cy.visit的onBeforeLoad钩子，在应用加载前、拿到应用上下文的前提下完成DB初始化：

beforeEach(() => {
  // 先执行登录请求
  cy.request({
    method: 'POST',
    url :'http://localhost:3000/api/auth/login',
    body : {
      email: "name",
      password: "Passwprd"
    }
  })

  // 访问页面时在onBeforeLoad钩子中初始化DB
  cy.visit('http://localhost:3000/', {
    onBeforeLoad(win) {
      // 如果你的应用本身已经引入了localforage，可跳过加载外部脚本的步骤
      const script = win.document.createElement('script')
      script.src = 'https://unpkg.com/localforage@1.5.5/dist/localforage.js'
      win.document.head.appendChild(script)

      script.onload = () => {
        // 用应用上下文的localforage初始化
        const localforage = win.localforage
        localforage.config({
          driver: [localforage.INDEXEDDB],
          name: 'timesheetstestDBDB',
          storeName: 'testDB',
          version: '1.0',
        })
        // 写入测试数据
        localforage.clear().then(() => {
          return localforage.setItem('jobs', [{name: 'fdf'}])
        })
      }
    }
  })
})

验证方法 #

你可以在测试用例中增加DB校验步骤，确认初始化生效：

it('验证IndexedDB数据正确', () => {
  cy.window().then(win => {
    return win.localforage.getItem('jobs')
  }).should('deep.equal', [{name: 'fdf'}])
  // 后续你的组件测试逻辑
})

可选优化方案 #

如果你的测试不需要真实操作IndexedDB，也可以直接mock localforage的接口返回测试数据，避免DB初始化的时序问题，更适合纯UI逻辑的测试场景。

内容的提问来源于stack exchange，提问作者DevOverflow