browser-testing.md

Setting up AVA for browser testing

Translations: Español, Français, Italiano, Русский, 简体中文

AVA does not support running tests in browsers yet. However JavaScript libraries that require browser specific globals (window, document, navigator, etc) can still be tested with AVA by mocking these globals.

This recipe works for any library that needs a mocked browser environment.

Install browser-env

❗️ Important note

browser-env adds properties from the jsdom window namespace to the Node.js global namespace. This is explicitly recommended against by jsdom. Please read through the linked wiki page and make sure you understand the caveats. If you don't have lots of dependencies that also require a browser environment then window may be a better solution.

Install browser-env.

Simulates a global browser environment using jsdom.

$ npm install --save-dev browser-env

Setup browser-env

Create a helper file and place it in the test/helpers folder. This ensures AVA does not treat it as a test.

test/helpers/setup-browser-env.js:

import browserEnv from 'browser-env';
browserEnv();

By default, browser-env will add all global browser variables to the Node.js global scope, creating a full browser environment. This should have good compatibility with most front-end libraries, however, it's generally not a good idea to create lots of global variables if you don't need to. If you know exactly which browser globals you need, you can pass an array of them.

import browserEnv from 'browser-env';
browserEnv(['window', 'document', 'navigator']);

Configure tests to use browser-env

Configure AVA to require the helper before every test file.

package.json:

{
	"ava": {
		"require": [
			"./test/helpers/setup-browser-env.js"
		]
	}
}

Enjoy!

Write your tests and enjoy a mocked browser environment.

test.js:

import test from 'ava';

test('Insert to DOM', t => {
	const div = document.createElement('div');
	document.body.appendChild(div);

	t.is(document.querySelector('div'), div);
});