lukeed/uvu

Guidance on browser testing 🙏

mattpilott opened this issue · 3 comments

mattpilott commented

Hey,

I've spent a fair while trying to work out how to setup uvu to test browser specific functions. I have something with limited functionality using puppeteer but i really want to be able to pass in a function and run it, but puppeteer doesnt seem to like this and you have to stringify your function then rebuild it.

I also tried jsdom but couldn't think how to make window and document available to the function i was passing.

What's the right way to do this?

Here's a dumb example of a simple function i was testing with:

My module

export default function (tagName, attributes = {}) {
   const elem = document.createElement(tagName)

   for (const key in attributes) {
      elem[key] = attributes[key]
   }

   return elem
}

Ideal test file (of course no worky)

/* Imports */
import { test } from 'uvu'
import * as assert from 'uvu/assert'
import createEl from './index.js'

/* Setup */
const elem = createEl('button', { width: '100px'})

/* Test */
test('createEl', () => {
   assert.type(createEl, 'function')
   assert.is(elem.tagName, 'BUTTON')
   assert.is(elem.getAttribute('width'), '100px')
})

/* Result */
test.run()
lukeed commented

Thanks @pberganza-nelnet

there’s also a few examples that use jsdom without a global hook. You can do it programmatically like this with suite hooks: https://github.com/lukeed/uvu/blob/master/examples/preact/tests/setup/env.js

pablo-abc commented

Whoops. Just realised I posted that comment with the wrong account. I'm reposting it here:

You need to make the values of JSDOM globally available. You could do that manually or use something like global-jsdom.

Personally I do this:

    "test": "uvu -r tsm -r global-jsdom/register tests",
  • 👍2