browser-testing.md

Setting up AVA for browser testing

AVA is running in a Node.js environment. JavaScript that runs in a browser will likely expect the browser DOM globals to be in place. With help from a package called jsdom, you can write unit tests with ava also for JavaScript that will run in a browser and relying on browser specific globals such as window, document and navigator.

Install jsdom

npm install --save-dev jsdom

Writing unit tests

Use jsdom to set the globals and the DOM elements that the test target is expecting.

An example Unit Test

The JavaScript code to be tested is doing a DOM query, such as: document.querySelector('#my-element-id').

To make the code testable with ava, add the element to jsdom and set the global object.

import test from 'ava';
import { JSDOM } from 'jsdom';

test.before(() => {
  const dom = new JSDOM('<div id="my-element-id" />');  // insert any html needed for the unit test suite here
  global.document = dom.window.document; // add the globals needed for the unit tests in this suite.
});

test('this is an example', (t) => {
    const res = myTarget.runFunctionThatExpectsTheDocumentGlobalAndElement();

    t.truthy(res);
});

Important note

In general, adding globals to the Node.js environment is recommended against by jsdom. Please read through the linked wiki page and make sure you understand why.