“您的一些测试进行了整页重新加载！”在 Angular 14 应用程序中运行 karma jasmine 单元测试用例时出错

Question

当我尝试在 Angular 14 应用程序中运行 karma jasmine 单元测试用例时，出现以下错误。

错误消息：“您的某些测试进行了整页重新加载！”

karma.confg.js：

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        files: [
            'https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js'
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        jasmineHtmlReporter: {
            suppressAll: true // removes the duplicated traces
        }
   });
};

我注意到office.js CDN文件中的window.location.href代码。如何解决这个问题？

Answer 1

编辑：自从写这篇文章以来，我知道我错了。我的回答代表了一种短视且“老式”的看待单元测试的方式。单元测试的一种更现代的做法（在我看来，是更好的一种）是测试行为单元而不是代码单元。

但是，我确实认为，模拟单元测试的外部依赖是有意义的，尤其是在涉及 Office 时。

单元测试时，所有依赖项都应该是mocked，否则就不是真正的单元测试。请记住，目标通常是测试尽可能小的代码片段。

在您当前的情况下，Office 会对您的测试造成严重破坏，因为您正在导入真正的依赖项。创建一个包含必要方法的模拟并删除 Office 依赖项（以及任何其他依赖项），它应该可以立即解决问题。

您可能希望研究一下 Façade 模式，因为它可以帮助将代码与依赖项分离，从而使测试变得更加容易。