如何为jQuery change事件编写Jest单元测试（NodeJS环境）

要测试这段依赖jQuery的代码，核心是在Node环境中模拟浏览器DOM，并让jQuery能正常工作，以下是具体落地步骤：

1. 安装必要依赖 #

先安装jsdom（用于模拟浏览器DOM环境）和jquery：

npm install --save-dev jsdom jquery

2. 在测试文件中初始化DOM环境 #

在测试文件开头，先搭建好模拟的浏览器环境，让jQuery可以绑定到这个环境：

const { JSDOM } = require('jsdom');
const $ = require('jquery');

// 创建包含目标输入框的DOM结构
const dom = new JSDOM('<!DOCTYPE html><input id="eventCode" type="text">');
// 把模拟的window和document挂到全局，让jQuery能识别
global.window = dom.window;
global.document = dom.window.document;
global.$ = $(dom.window);

3. 编写测试用例 #

引入被测模块后，针对#eventCode的change事件逻辑编写测试：

describe('eventCode输入框的change事件处理', () => {
  let eventCodeInput;

  beforeEach(() => {
    // 每次测试前重置DOM和模块状态，避免用例间污染
    const dom = new JSDOM('<!DOCTYPE html><input id="eventCode" type="text">');
    global.window = dom.window;
    global.document = dom.window.document;
    global.$ = $(dom.window);
    
    jest.resetModules();
    // 重新加载被测模块
    require('../path/to/your/target/module');
    
    eventCodeInput = global.$('#eventCode')[0];
  });

  test('输入框为空时，validateEventCode设为false', () => {
    eventCodeInput.value = '';
    // 触发change事件
    global.$(eventCodeInput).trigger('change');
    
    // 这里需要被测模块导出validateEventCode才能访问，见下一步说明
    const { validateEventCode } = require('../path/to/your/target/module');
    expect(validateEventCode).toBe(false);
  });

  test('输入框有值时，validateEventCode设为true', () => {
    eventCodeInput.value = 'USER_EVENT_001';
    global.$(eventCodeInput).trigger('change');
    
    const { validateEventCode } = require('../path/to/your/target/module');
    expect(validateEventCode).toBe(true);
  });
});

4. 调整被测代码（关键） #

原代码中的validateEventCode是局部变量，测试无法直接访问，建议把它导出：

// 被测模块修改后
'use strict';

const Postmonger = require('../js/postmonger');
var connection = new Postmonger.Session();

let authTokens = {};
let payload = {};

$(window).ready(onRender);

let validateEventCode = false;

$('#eventCode').on('change', function() {
  validateEventCode = $('#eventCode').val() !== '';
});

// 导出变量供测试访问
module.exports = { validateEventCode };

额外处理 #

• 如果onRender函数未定义，测试会报错，可在测试中提前模拟：

  global.onRender = jest.fn();
  

• 每次测试用例执行前用jest.resetModules()重置模块，避免状态残留。

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