Jest无法加载script标签内容, 导致无法测试jsonp

Question

问题描述

使用Jest框架测试一段jsonp的代码, 但是Jest使用的JsDom好像无法加载script标签的内容, 导致jsonp的全局函数无法被调用. 故不能很好的对这段jsonp进行单侧.

jsonp的代码如下:

function noop(){}

/**
 * @description 序列化数据
 */
function formatParams(data) {
  let arr = [];
  for (let name in data) {
    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  }
  return arr.join("&");
}

/**
 * @description jsopn请求函数
 * @param {string} url: 请求地址
 * @param {object} opts: 请求配置项
 *  {object}} parmas: 动参请求数据的对象
 *  {number} timeout: 延迟的时间
 * @param {function} fn 回调函数, 参数分别为rr, data
 */

function jsonp(url, opts, fn){
  // 获取随机数
  const random = Math.random().toString().replace('.', '');
  // 基础的回调名称
  const baseCbName = '__onDWGetData__'
  // 获取了随机数后的回调名称
  const id = baseCbName + random;
  // 需要被添加到参数字符串的后缀, 动态参数会根据jsonpCallback的值返回函数名
  const suffix = '&jsonpCallback=' + baseCbName + random;
  // 进行数据的序列化, 随后添加上&jsonpCallback的后缀
  const param = formatParams(opts.data) + suffix;
  // 生成script标签的url, https://dw-online.ksosoft.com/api/dynamicParam/v1/app/appKey + '?' + 序列化的参数 
  url += '?' + param;
  // 延迟
  const timeout = null != opts.timeout ? opts.timeout : 60000;
  const target = document.head;
  let script;
  let timer;

  if (timeout) {
    timer = setTimeout(function(){
      cleanup();
      if (fn) fn(new Error('ReqDynamic params Timeout'));
    }, timeout);
  }

  function cleanup(){
    if (script.parentNode) script.parentNode.removeChild(script);
    window[id] = noop;
    if (timer) clearTimeout(timer);
  }

  function cancel(){
    if (window[id]) {
      cleanup();
    }
  }

  window[id] = function(data){
    cleanup();
    console.log('window全局调用了函数:', fn, data);
    if (fn) fn(null, data);
  };

  // 创建脚本
  script = document.createElement('script');
  script.src = url;
  target.parentNode.insertBefore(script, target);

  return cancel;
}

export { jsonp };

测试的伪代码代码如下:

import { jsonp } from '../src/jsonP';
test('模拟jsonp实现', done => {
  jsonp('https://fake-collect.com', {a: 'b'}, (err, data) => {
    expect(data).toBeTruthy();
    done();
  })
})

但是每次都会抛出jsonp代码中的Error: ReqDynamic params Timeout错误, 该错误代表请求超时. 表明script无法被正确的加载导致.

期望结果

能够在Jest框架中正确的运行jsonp的整个过程, 加载script`标签和全局函数被调用的过程

Answer 1

我的天，又搜到你了，这个问题又解决方案了没

Answer 2

jest.timeout设置一个更长的数字