[Bug]: Jest does not support jquery ajax function with jsonp dataType

[yaojingguo]

Version

27.5.1

Steps to reproduce

1. git clone https://github.com/yaojingguo/jest-jsonp.git
2. yarn install
3. yarn test -t jsonp, you will see

req str: {"readyState":0,"status":0,"statusText":"timeout"}

If you change dataType to json, you will see:

req str: {"readyState":4,"responseText":"{\n  \"args\": {}, \n  \"headers\": {\n    \"Accept\": \"application/json, text/javascript, */*; q=0.01\", \n    \"Accept-Encoding\": \"gzip, deflate\", \n    \"Accept-Language\": \"en\", \n    \"Host\": \"httpbin.org\", \n    \"Origin\": \"http://localhost\", \n    \"Referer\": \"http://localhost/\", \n    \"User-Agent\": \"Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/16.7.0\", \n    \"X-Amzn-Trace-Id\": \"Root=1-62406529-7f081162578641cf66364e66\"\n  }, \n  \"origin\": \"111.196.61.15\", \n  \"url\": \"https://httpbin.org/get\"\n}\n","responseJSON":{"args":{},"headers":{"Accept":"application/json, text/javascript, */*; q=0.01","Accept-Encoding":"gzip, deflate","Accept-Language":"en","Host":"httpbin.org","Origin":"http://localhost","Referer":"http://localhost/","User-Agent":"Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/16.7.0","X-Amzn-Trace-Id":"Root=1-62406529-7f081162578641cf66364e66"},"origin":"111.196.61.15","url":"https://httpbin.org/get"},"status":200,"statusText":"OK"}

Expected behavior

I expect that $.ajax function return status 200.

Actual behavior

I see a timeout statusText.

Additional context

No response

Environment

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
  Binaries:
    Node: 17.7.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.5.2 - /usr/local/bin/npm
  npmPackages:
    jest: ^27.5.1 => 27.5.1

[F3n67u]

Set `testEnvironmentOptions.resources="usable"

By default, jsdom environment doesn't allow downloading the external script using script tag which is the ajax jsonp depends on, so the test above will timeout because the jsonp request is not fired.

The jquery jsonp's implementation is like below:

const element = document.createElement("script");
// src point to the real jsonp request
element.src = `https://httpbin.org/get?callback=jQuery36005282486042709105_1648514920763&_=1648514920764`;
document.head.appendChild(element);

you can add the below config to package.json will allow external script download, so the jsonp request can fired.

  "jest": {
    "testEnvironmentOptions": {
      "resources": "usable"
    }
  }

httpbin.org doesn't support jsonp maybe?

after I add resources=usable option, the below error happened, because the jsonp request is responsed with json which is not a valid javascript. I am not very experienced with jquery jsonp implementation, I am not sure if it's the problem of httpbin.org endpoint. maybe httpbin don't support jsonp request?

    https://httpbin.org/get?callback=jQuery36005017521770598357_1648515914254&_=1648515914255:2
      "args": {
            ^

    SyntaxError: Unexpected token ':'

      at processJavaScript (node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:241:10)

$ curl https://httpbin.org/get\?callback\=jQuery36005017521770598357_1648515914254\&_\=1648515914255  
{
  "args": {
    "_": "1648515914255", 
    "callback": "jQuery36005017521770598357_1648515914254"
  }, 
  "headers": {
    "Accept": "*/*", 
    "Host": "httpbin.org", 
    "User-Agent": "curl/7.77.0", 
    "X-Amzn-Trace-Id": "Root=1-62425d19-171ac9033b85b4cf0d624eb4"
  }, 
  "origin": "220.243.131.228", 
  "url": "https://httpbin.org/get?callback=jQuery36005017521770598357_1648515914254&_=1648515914255"
}

why add resources="usable" will make jsonp works?

when specifying @jest-environment jsdom, jest internally use jsdom to simulate the browser environment. The environment is created like below.

https://github.com/facebook/jest/blob/0d9809479139db4121ba1f72239f5a9b170f565f/packages/jest-environment-jsdom/src/index.ts#L46-L63

only when resources option is set to usable and runScripts option is set to dangerously, the external script can be downloaded. because jest already set runScripts option to dangerously, so we just need override resources=usable via testEnvironmentOptions config.

[F3n67u]

@337Gslime is spam. could you help to ban this user? @SimenB

see also here: #12578

[SimenB]

@F3n67u I can delete their comments, unfortunately I do not have the accesses to block their access. I suggest reporting (I've just done so) and GH will probably delete the user

[SimenB]

That said, thank you so much for jumping in and trying to help here! I do not think this is a bug, but rather a usage question (and if it is a bug, it's in JSDOM, and not in Jest), so I'll close this.

[yaojingguo]

@F3n67u Thanks a lot for your kind help.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.