How to solve ReferenceError - gtag is not defined for Karma Jasmine test?

Question

我在 Google Analytics 的 Typescript 文件中有一个全局变量。

declare var gtag: any;

当我在 Angular 项目中运行 ng test 时，它显示以下错误。

ReferenceError：未定义 gtag

Answer 1

说明： 由于您使用的是谷歌标签管理器，因此您必须在某处定义 gtag 函数。当您按照 googleAnalytics 的教程进行操作时，他们要求您在 index.html 中包含一些 javascript 代码。问题是当你运行你的测试时，你创建的组件没有他们的父母，所以实际的 index.html 文件永远不会加载你添加的 javascript 代码。您需要在运行测试之前加载该代码。

如何进行： 我建议您将该内容导出到一个单独的文件中， 然后将该文件导入您的 index.html

<script src="assets/metrics/gtm.js"></script>

在此之后进入您的 Karma.conf.js 和以下框架：[...] 添加以下内容：

   files: [
      /* I put my file (containing javascript code) into that path, yours might change */
      { pattern: 'src/assets/**/gtm.js', included: true }
    ],

在此之后，您应该可以简单地重新启动测试！ 希望它能帮助别人！

Answer 2

这是对我有用的东西。我在名为

src/assets/js/gtag.init.js

的javascript文件中添加了以下代码：

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

然后我在我的

karma.conf.js

文件中添加了这个文件的路径：

files: [
    { pattern: 'src/assets/js/gtag.init.js', included: true }
]

最后，我在我的

angular.json

文件中添加了

tests:scripts

下的路径：

{
    "test": {
        "scripts": [
            'src/assets/js/gtag.init.js'
        ]
    }
}

终于让我的测试通过了，错误不再产生了

Answer 3

你必须像这样包装你的代码，以确保当 gtap 是从谷歌分析脚本定义时它只在浏览器上触发。

if (typeof window != 'undefined') {
//your gtag code here
}