首页 > 解决方案 > Mocha/Chai 测试办公室插件,但 Mocha 一直声称“办公室”未定义?

问题描述

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

我的代码(一个 Word 插件)本身工作得很好,但是当我尝试对其运行 mocha 测试时,它在几行中到达了这个 initilize 函数:

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 的 APIhttps://example.com/api/context-key在发送 GET 请求时是否返回 200 状态代码。我走远了吗?就像我说的,我对测试完全陌生:/

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

标签: javascriptmocha.jsoffice-jschai

解决方案


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

您尝试对 Mocha 测试进行的操作看起来像是e2e 测试

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

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

即使这样,测试相关的东西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....
}

推荐阅读