Jsdom: Clarify paths to local scripts to be absolute

Created on 13 May 2016  路  4Comments  路  Source: jsdom/jsdom

As for now, jsdom sets injected scripts src without any checks or resolving. IIRC, there was a proposal to add a separate set for local scripts to the config. Untill then, maybe the main help doc should clarify that paths to local scripts must be absolute (or something like path.join(__dirname, 'script.js')). Nothing of these ones will work as a proper local path:

scripts: ['script.js']

scripts: ['.\\script.js']

scripts: ['./script.js']

I'm not sure what is the proper place for this warning, so I dare not make a PR.

documentation fixed in newapi

Most helpful comment

require.resolve() would be good for some sample code in the readme:

scripts: [
  require.resolve('./myscript.js'),
  require.resolve('jquery')
]

All 4 comments

require.resolve() would be good for some sample code in the readme:

scripts: [
  require.resolve('./myscript.js'),
  require.resolve('jquery')
]

Related to https://github.com/tmpvar/jsdom/issues/1733

When I try to load the scripts by:

scripts: [
  require.resolve('./myscript.js'),
  require.resolve('jquery')
]

It doesn't seems to work. Test case:

import test from 'ava'

// import { readFileSync } from 'fs'
import { jsdom, createVirtualConsole } from 'jsdom'

// const systemJSContent = readFileSync(require.resolve('systemjs'), { encoding: 'utf-8' })

const cwd = process.cwd()
let window
test.beforeEach(() => {
  const virtualConsole = createVirtualConsole().sendTo(console)
  const document = jsdom('',
    {
      url: `file://${cwd}/index.html`,
      virtualConsole,
      scripts: [
        require.resolve('systemjs')
      ]
    })
  window = document.defaultView

  // let scriptEl = document.createElement('script')
  // scriptEl.textContent = systemJSContent
  // document.body.appendChild(scriptEl)
})

test(async t => {
  // SystemJS should create global `SystemJS` variable.
  console.log(window.SystemJS)
  t.not(window.SystemJS, undefined)
})

If I switch to load the file directly, the test will pass:

import test from 'ava'

import { readFileSync } from 'fs'
import { jsdom, createVirtualConsole } from 'jsdom'

const systemJSContent = readFileSync(require.resolve('systemjs'), { encoding: 'utf-8' })

const cwd = process.cwd()
let window
test.beforeEach(() => {
  const virtualConsole = createVirtualConsole().sendTo(console)
  const document = jsdom('',
    {
      url: `file://${cwd}/index.html`,
      virtualConsole,
//      scripts: [
//        require.resolve('systemjs')
//      ]
    })
  window = document.defaultView

  let scriptEl = document.createElement('script')
  scriptEl.textContent = systemJSContent
  document.body.appendChild(scriptEl)
})

test(async t => {
  // SystemJS should create global `SystemJS` variable.
  console.log(window.SystemJS)
  t.not(window.SystemJS, undefined)
})

Test code can be seen here: https://github.com/unional/some-issues/tree/jsdom-scirpts

Is it because jsdom() doesn't load scripts?

And it does not allow you to separately supply scripts that it will inject and execute.

UPDATE: nevermind. That is the reason. This test passes:

test('use scripts property', t => {
  return new Promise(r => {
    env(`file://${cwd}/index.html`,
      {
        virtualConsole,
        scripts: [
          require.resolve('systemjs')
        ],
        done(_err, window: any) {
          t.not(window.SystemJS, undefined)
          r()
        }
      })
  })
})

Closing as old API is being deleted in the upcoming v12.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

josephrexme picture josephrexme  路  4Comments

tolmasky picture tolmasky  路  4Comments

drewish picture drewish  路  4Comments

kilianc picture kilianc  路  4Comments

domenic picture domenic  路  3Comments