如何在浏览器环境中运行单元测试？

Question

I am writing a test for some code that manipulates the DOM, and I wanted to run it in a browser environment and I don't know how.

I wrote a mockup test using the testing library AVA , for my small library promisify-dom-selector :

const test = require('ava')
const promisifyDOMSelector = require('index.js')

test('pGetElementById works', t => {
  const pGetElementById = promisifyDOMSelector(document.getElementById)

  pGetElementById('load-later')
    .then((el) => {
      t.deepEqual(el, document.getElementById('load-later'))
    })

  const testEl = document.createElement('div')
  testEl.id = 'load-later'
  document.body.appendChild(testEl)
})

and wanted to run it in Headless Chrome .

I've tried setting up Karma with the ava plugin karma-ava but it doesn't even work, here is the error message:

I wouldn't go with the Karma route if possible, but I don't know of any other way! What can I do?

Answer 1

If you don't need to actually test in a browser then the browser testing recipe includes some helpful pointers.

https://github.com/avajs/karma-ava hasn't seen any work in over a year, so I'm not surprised if that doesn't work.

If you do need to run your code in an actual browser I'd use http://www.nightmarejs.org/ or something with an HTML document you can control from AVA in order to test your library.

Answer 2

Cypress has recently released Cypress Component Testing . This supports major frameworks like React and Vue. The tests will run in headless browser instead of jsdom in node env.