使用Cypress+mysql2测试数据库时遭遇Webpack编译错误求助

问题根源 #

• mysql2是Node.js专属库，依赖Node.js核心API（如net、fs），无法直接在Cypress的浏览器测试环境中运行。
• 报错中的Unexpected token (48:8)是因为新版本lru-cache使用了ES类字段语法（heap;），而Cypress默认Webpack配置未对node_modules中的这类文件做转译，导致编译失败。

正确解决方案：使用Cypress Task执行数据库操作 #

Cypress的task功能允许在Node.js环境中执行代码，完美适配mysql2这类Node库，步骤如下：

1. 配置Cypress任务 #

修改cypress.config.js（Cypress 10+版本），注册数据库查询任务：

const { defineConfig } = require('cypress')
// 引入你的数据库连接池
const pool = require('./db.js') // 请根据实际路径调整

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        // 定义查询数据库的任务
        async queryDatabase(sql) {
          try {
            const [rows] = await pool.execute(sql)
            return rows
          } catch (err) {
            console.error('数据库查询出错:', err)
            throw err
          }
        }
      })
    },
  },
})

2. 修改测试文件 #

不再直接在spec中引用mysql2，而是通过cy.task调用数据库操作：

describe('Test DB', () => {
  it('should query user data', () => {
    cy.task('queryDatabase', 'select user_name from table_test')
      .then((userRows) => {
        cy.log('查询结果:', userRows)
        // 可添加断言验证结果，例如：
        // expect(userRows).to.be.an('array').that.is.not.empty
      })
  })
})

3. 额外注意事项 #

• 数据库敏感信息（账号、密码）建议通过Cypress环境变量管理，避免硬编码：可在cypress.config.js的env字段配置，或通过.env文件加载。
• 确保db.js路径在cypress.config.js中能正确引入，避免路径错误。

为什么之前的方法无效？ #

直接在spec文件中引用mysql2会让Webpack尝试将Node.js库编译为浏览器兼容代码，这不仅会遇到语法转译问题，还会因为浏览器缺少Node核心API导致运行时错误。而task将数据库操作完全放在Node环境执行，从根源上解决了这个问题。

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