单元测试时出现ReferenceError: Quill is not defined问题求助

我之前也碰到过几乎一模一样的情况！应用跑起来完全正常，但一跑单元测试Quill就掉链子，哪怕在karma.config.js里加了quill.js也不管用。给你几个我亲测有效的排查方向和解决方案：

1. 确认Quill的加载顺序与依赖完整性 #

很多时候问题出在karma的脚本加载顺序不对，或者漏掉了Quill必需的资源：

• 确保在karma.config.js的files数组里，Quill的JS文件早于你的应用代码和测试文件加载。如果用了Quill的主题（比如snow/bubble），一定要同时引入对应的CSS——样式缺失也会导致Quill初始化失败：

  files: [
    // 先加载Quill核心资源
    'node_modules/quill/dist/quill.js',
    'node_modules/quill/dist/quill.snow.css', // 对应你使用的主题
    // 再加载应用代码
    'src/**/*.js',
    // 最后加载测试用例
    'test/**/*.spec.js'
  ]
  

• 如果你在应用里用ES6模块化引入Quill（比如import Quill from 'quill'），测试文件里也要保持一致的引入方式，不要只依赖karma全局加载。

2. 修复测试环境的DOM支持问题 #

Quill依赖完整的DOM API，而Karma默认的jsdom环境可能缺少一些关键API（比如Range、Selection），导致初始化失败：

• 可以切换到ChromeHeadless环境运行测试，它提供更接近真实浏览器的DOM支持。在karma.config.js里配置：

  browsers: ['ChromeHeadlessNoSandbox'],
  customLaunchers: {
    ChromeHeadlessNoSandbox: {
      base: 'ChromeHeadless',
      flags: ['--no-sandbox', '--disable-setuid-sandbox']
    }
  }
  

• 在测试用例执行前后，手动创建/清理Quill需要的容器元素，避免DOM污染或容器缺失：

  beforeEach(() => {
    // 创建Quill编辑器容器
    const editorContainer = document.createElement('div');
    editorContainer.id = 'test-editor';
    document.body.appendChild(editorContainer);
  });
  
  afterEach(() => {
    // 清理容器
    document.body.removeChild(document.getElementById('test-editor'));
  });
  

3. 确保测试用例等待Quill初始化完成 #

Quill初始化是异步的，如果测试代码在初始化完成前就执行断言，必然会报错：

• 用Jasmine的done()回调或者async/await等待初始化完成：

  it('should initialize Quill editor successfully', (done) => {
    const editor = new Quill('#test-editor', { theme: 'snow' });
    // 给Quill一点初始化时间
    setTimeout(() => {
      expect(editor.root.innerHTML).toBe('<p><br></p>'); // 默认空编辑器内容
      done();
    }, 100);
  });
  

• 如果你用Vue/React等框架，要确保组件挂载完成后再测试Quill相关功能（比如Vue的mounted钩子之后）。

4. 排查版本冲突与环境一致性 #

• 检查应用依赖的Quill版本和测试环境安装的版本是否一致：运行npm list quill查看，版本不一致可能导致兼容性问题。
• 暂时禁用Karma的其他插件（比如代码覆盖率插件），排查是否有插件干扰了Quill的加载或执行。

我当时是因为没在karma里引入Quill的CSS，而且测试用例没等初始化完成就执行断言，调整之后问题就解决了。你可以挨个试试这些方法，应该能搞定！

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