Javascript 如何开玩笑地模仿脚本标记

我正在使用

react

在特定页面上包含一个google tag manager脚本标记。它工作正常，但jest抛出了一个声明异常

通常我会使用

jest.mock

，但我似乎无法让它为此工作，我似乎无法让jest忽略这行代码

   <Helmet>
          <title>{messages.title.defaultMessage}</title>
          <meta name="title" content={messages.metaTitle.defaultMessage} />
          <meta name="description" content={messages.metaDescriptions.defaultMessage} />
          <meta name="keyword" content={messages.metaKeyword.defaultMessage} />
          {/* Google Tag Manager */}
          <script id="ga-script" type="text/javascript">
            {((w, d, s, l, i) => {
              w[l] = w[l] || [];
              w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js',
              });
              const f = d.getElementsByTagName(s)[0];
              const j = d.createElement(s);
              const dl = l !== 'dataLayer' ? `&l=${l}` : '';
              j.async = true;
              j.src = `https://www.googletagmanager.com/gtm.js?id=${i}${dl}`;
              f.parentNode.insertBefore(j, f);
              f.className = 'ga-script';
              j.className = 'ga-script';
            })(window, document, 'script', 'dataLayer', 'GTM-000000')}
          </script>
          {/* End Google Tag Manager*/}
        </Helmet>

{messages.title.defaultMessage}
{/*谷歌标签管理器*/}
{（（w，d，s，l，i）=>{
w[l]=w[l]| |[]；
w[l]。推({
“gtm.start”：新日期（）.getTime（），
事件：“gtm.js”，
});
常量f=d.getElementsByTagName[0]；
常数j=d.createElement；
常量dl=l！='dataLayer'？`&l=${l}`:''；
j、 异步=真；
j、 src=`https://www.googletagmanager.com/gtm.js?id=${i}${dl}`；
f、 parentNode.insertBefore（j，f）；
f、 className='ga脚本'；
j、 className='ga脚本'；
})（窗口，文档，'script'，'dataLayer'，'GTM-000000'））
{/*结束谷歌标签管理器*/}

equalEmailProps›遇到声明异常
TypeError:无法读取未定义的属性“parentNode”
296 | j.async=true；
297 | j.src=`https://www.googletagmanager.com/gtm.js?id=${i}${dl}`；
>298 | f.parentNode.insertBefore（j，f）；
|                 ^
299 | f.className='ga script'；
300 | j.className='ga script'；
301 |}（窗口、文档、“脚本”、“数据层”、“GTM-000000”）}

我从未使用过谷歌标签管理器，但在我看来，这个脚本在React上似乎有些过火

你可以这样做：

回国前

const i='GTM-000000'
//“i”不是自描述性的，请重命名它
//但如果该值从未更改，则直接将其插入url
常数src=`https://www.googletagmanager.com/gtm.js?id=${i}`
//函数中唯一重要的代码
window.dataLayer=window.dataLayer | |[]
window.dataLayer.push({
“gtm.start”：新日期（）.getTime（），
事件：“gtm.js”，
})

返回时

---

我从未使用过谷歌标签管理器，但在我看来，这个脚本在React上似乎有些过火

你可以这样做：

回国前

const i='GTM-000000'
//“i”不是自描述性的，请重命名它
//但如果该值从未更改，则直接将其插入url
常数src=`https://www.googletagmanager.com/gtm.js?id=${i}`
//函数中唯一重要的代码
window.dataLayer=window.dataLayer | |[]
window.dataLayer.push({
“gtm.start”：新日期（）.getTime（），
事件：“gtm.js”，
})

返回时

---

为了简单地模拟该方法，我通过以下方式获得了结果（我使用的是Vue和jest）：

Vue代码：

created(){
        this.pushPageTitleInGTM()
    },
    methods:{
        pushPageTitleInGTM(){
            this.$gtm.trackEvent({
                event: 'Page Title', 
                category: 'Page Title',
                action: 'Page Load',
                label: '404 Page',
                value: '404',
                pageTitle: '404',
            });
        }
    } 

笑话组：

import _404 from './404.vue'
describe('@views/404', () => {
    let wrapper;
    // test set up
    beforeEach(() => {
        wrapper = shallowMount(_404, {
        methods: {
            // mocking GTM 
            pushPageTitleInGTM: () => {} 
        }
        })
    })
})

---

为了简单地模拟该方法，我通过以下方式获得了结果（我使用的是Vue和jest）：

Vue代码：

created(){
        this.pushPageTitleInGTM()
    },
    methods:{
        pushPageTitleInGTM(){
            this.$gtm.trackEvent({
                event: 'Page Title', 
                category: 'Page Title',
                action: 'Page Load',
                label: '404 Page',
                value: '404',
                pageTitle: '404',
            });
        }
    } 

笑话组：

import _404 from './404.vue'
describe('@views/404', () => {
    let wrapper;
    // test set up
    beforeEach(() => {
        wrapper = shallowMount(_404, {
        methods: {
            // mocking GTM 
            pushPageTitleInGTM: () => {} 
        }
        })
    })
})

---

这只是谷歌给你的脚本。它可以更好，但我需要先测试的方法问题似乎是

getElementsByTagName

函数的返回。我的样品不这样做。测试也失败了？是的，这就是问题所在。我需要在测试中模拟它，但是如何模拟节点元素呢？这只是google给你的脚本。它可以更好，但我需要先测试的方法问题似乎是

getElementsByTagName

函数的返回。我的样品不这样做。测试也失败了？是的，这就是问题所在。我需要在测试中模拟它，但是如何模拟节点元素呢？