如何解决Cypress集成log4js时出现的Cannot read properties of undefined (reading 'native')错误？

问题场景 #

在Cypress中集成log4js日志工具时触发错误：TypeError: Cannot read properties of undefined (reading 'native')。相关配置与代码如下：

1. log4js配置JSON文件：

{
  "appenders": {
    "out": {"type": "console", "layout": { "type": "coloured" } },
    "app": {"type": "dateFile",
      "filename": "cypress-logs/logger/info.log",
      "maxLogSize": 10485760,
      "layout": {"type":"pattern", "pattern":"[%d{dd-MM-yyyy hh:mm:ss}] [%p] - %m"}
    }
  },
  "categories": {
    "default": { "appenders": ["out", "app"], "level": "info" }
  }
}

2. 日志工具封装代码：

"use strict";

function log4js_logger() {
    var log4js = require("log4js");  // 引入log4js
    log4js.configure("cypress/fixtures/log4js.json");  // 加载配置文件
    var logs = log4js.getLogger();
    // logs.info("Logger has implemented !!")
    return logs; 
}

module.exports = {log4js_logger}

3. 日志工具调用代码：

"use strict";
var logGenerator = require("../generic_utils/logger")
var logger = logGenerator.log4js_logger()


// 业务逻辑函数
// 在函数内调用logger.info()记录日志

错误详情 #

运行Cypress测试时出现未捕获错误：

在测试外部检测到一个未捕获的错误：
TypeError: 以下错误源自你的测试代码，而非Cypress。

无法读取未定义属性（读取'native'）

当Cypress检测到源自测试代码的未捕获错误时，会自动使当前测试失败。

Cypress无法将此错误关联到任何特定测试。

我们动态生成了一个新测试来显示此失败。
at ./node_modules/streamroller/node_modules/fs-extra/lib/fs/index.js (...)

观察结果 #

直接用node命令运行log4js相关文件时一切正常，但运行Cypress测试时触发该错误。

解决方案 #

这个错误的核心原因是：log4js的dateFile输出器依赖Node.js的fs模块进行文件读写，而Cypress测试代码默认运行在浏览器环境中，没有访问fs模块的权限，因此触发了未定义属性的错误。

要解决这个问题，需要将日志操作转移到Cypress的Node.js环境中执行，通过Cypress的**任务（Task）**来实现：

1. 修改Cypress配置文件（cypress.config.js）
   在配置中初始化log4js，并注册日志任务：

const { defineConfig } = require("cypress");
const log4js = require("log4js");

// 初始化log4js
log4js.configure("cypress/fixtures/log4js.json");
const logger = log4js.getLogger();

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 注册日志任务
      on("task", {
        logInfo(message) {
          logger.info(message);
          return null; // 任务必须返回值，否则会报错
        },
        logError(message) {
          logger.error(message);
          return null;
        },
        // 按需添加其他日志级别任务，如logWarn、logDebug等
      });
    },
  },
});

2. 重构日志工具封装代码
   将直接调用log4js改为调用Cypress任务：

"use strict";

// 封装日志方法，调用Cypress任务
function logInfo(message) {
  return cy.task("logInfo", message);
}

function logError(message) {
  return cy.task("logError", message);
}

module.exports = { logInfo, logError };

3. 在测试代码中使用日志工具

const logger = require("../generic_utils/logger");

// 在测试流程中调用
describe("测试示例", () => {
  it("执行测试步骤", () => {
    logger.logInfo("测试开始执行");
    // 测试操作...
    logger.logError("测试过程中出现异常");
  });
});

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