如何使用mocha、jest、chai为含模态框操作的JS函数编写单元测试

该报错是因为Node测试环境没有浏览器DOM环境，也未加载Bootstrap绑定到jQuery上的.modal()扩展方法，所以方法识别失败。单元测试无需真实渲染模态框，直接mock对应依赖即可。

根据你的测试需求可选择两种mock方案：

方案1：直接mock modaldisplayer 函数（推荐） #

单元测试foo时无需关心modaldisplayer的内部实现，直接mock整个函数即可，示例如下：
首先将函数导出方便测试调用：

// src/index.js 业务代码
export function modaldisplayer(){
   $('.mymodal').modal('show');
   return 'success';
}

export function foo() {
  // 你的foo内部逻辑
  const res = modaldisplayer();
  // 其余逻辑
  return res;
}

测试用例写法：

import { expect } from 'chai';
import { foo, modaldisplayer } from '../src/index';

// mock整个modaldisplayer方法
jest.mock('../src/index', () => {
  const originalModule = jest.requireActual('../src/index');
  return {
    ...originalModule,
    modaldisplayer: jest.fn(() => 'mocked_success')
  };
});

describe('foo单元测试', () => {
  it('调用时会触发modaldisplayer，返回值符合预期', () => {
    const result = foo();
    expect(modaldisplayer).toHaveBeenCalled();
    expect(result).to.equal('mocked_success');
  });
});

方案2：mock jQuery的modal方法（需要验证模态框调用行为时用） #

如果需要验证foo调用时确实触发了模态框展示，可以直接mock jQuery的选择器和modal方法：

import { expect } from 'chai';
import { foo } from '../src/index';

describe('foo单元测试', () => {
  beforeEach(() => {
    // 全局挂载mock的jQuery方法
    global.$ = jest.fn(() => ({
      modal: jest.fn()
    }));
  });

  it('调用时会触发.mymodal的show模态框逻辑', () => {
    foo();
    // 验证选择器命中.mymodal
    expect($).toHaveBeenCalledWith('.mymodal');
    // 验证modal方法传入了show参数
    expect($('.mymodal').modal).toHaveBeenCalledWith('show');
  });
});

• 如果使用jest直接运行测试，在jest.config.js中添加配置项testEnvironment: 'jsdom'，即可自动模拟浏览器DOM环境，无需额外处理jQuery依赖问题。
• 如果使用mocha运行测试，需要先安装jest-mock包，在mocha启动配置中引入jest-mock的全局绑定，即可正常使用jest的mock能力。

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