Mocha/Chai 测试办公室插件，但 Mocha 一直声称“办公室”未定义？

Question

我是 mocha/chai/testing 的新手，如果这是一个愚蠢的问题，请原谅我，但我不知道如何解决这个问题。

我的代码（一个 Word 插件）本身工作得很好，但是当我尝试对其运行 mocha 测试时，它在几行中到达了这个初始化函数：

Office.initialize = (reason) => {
    $('#sideload-msg').hide();
    $('#app-body').show();
};

然后停止运行，吐出这个错误：

ReferenceError: Office is not defined

早些时候它吐出同样的东西，但对于 XMLHttpRequest (ReferenceError: XMLHttpRequest is not defined) 但我设法通过将它添加到页面顶部来解决它：

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

我会尝试为 Office 做同样的事情，但我什至不确定我要require 做什么，而且我在网上找不到任何信息。

如果有帮助，这就是我的 test.js 页面的全部内容：

const chai = require('chai');
const chaiHttp = require('chai-http');
const server = require('../src/index.js');
const should = chai.should();

const APIURL = "https://example.com";

chai.use(chaiHttp);

describe('API Calls', function() {
    it('should return 200 status code on /api/context-key GET', function (done) {
        chai.request(server)
            .get(APIURL + '/api/context-key')
            .end(function (err, res) {
                res.should.have.status(200);
                done();
            })
    });
});

我什至不确定我的结构是否正确？它使用我的加载项的 index.js 页面作为server，但我想要做的是测试具有 URL https://example.com/api/context-key 的 API 在发送 GET 请求时返回 200 状态代码。我走远了吗？就像我说的，我对测试完全陌生：/

编辑：实际上 XMLHttpRequest 修复使测试运行，但破坏了应用程序。

Answer 1

我希望你现在已经找到了答案，但我会尽力解释。

您尝试对 Mocha 测试执行的操作类似于 e2e 测试。

但是您还没有设置好进行 e2e 测试的方式。从我看到的代码来看，您正在对服务器调用进行单元测试——没关系。但是Office.js 在客户端，这意味着要正确测试其功能，您必须加载页面（可能在无头浏览器中） - 然后做任何您想做的事情。

有这方面的工具，请参阅下面的一些有趣的读物：

• Testing Front-End Code
• E2E testing with Node and Selenium
• E2E testing with Puppeteer and Jest

即便如此，测试与Office.js 相关的内容也并非易事，因为它需要 Office 环境（如 Windows / Mac / Web 客户端）的外部上下文。例如，Office.context.document.settings 之类的东西在默认情况下不起作用，您必须注入另一个模拟脚本以确保您要调用的方法被模拟。

在这个阶段测试前端的单个组件实际上相当容易，我可以建议永远不要在前端代码中直接使用Office.js 方法，始终通过一个包装器并调用该包装器。这样，您只需要模拟包装器，其余代码就可以测试了。

举个例子，只有一个像 officewrappers.js 这样的文件应该包含对 Office.js 方法的引用。在那里你可以拥有，

/*
 This file and its methods are the only reference that you have
 to Office.context... in no where else you should directly invoke
 these methods but use the OfficeService methods. That way 
 you can mock the OfficeService and you're good to go!
 */
OfficeService.GetDocumentBody = function() {
    // Some office method
    Office.context.document.getBody....
}