Damian Mullins DamianMullins

Unit testing front-end JavaScript with AVA and jsdom

Writing tests for JavaScript code that interacts with the DOM can be tricky. Luckily, using a combination of AVA and jsdom, writing those tests becomes a lot easier.

This article will walk you through how to set everything up so you can get started writing your tests today.

What is AVA?

AVA is described as a "Futuristic JavaScript test runner". Sounds fancy, huh?! So, what is it exactly that makes it "futuristic"?!

Notes

made with esnextbin

Notes

	[{"pid":9204,"tid":8456,"ts":2780925247,"ph":"X","cat":"toplevel","name":"TaskQueueManager::ProcessTaskFromWorkQueue","args":{"src_file":"../../base/trace_event/trace_log.cc","src_func":"SetEnabled"},"dur":18,"tdur":16,"tts":2881371},
	{"pid":9204,"tid":8456,"ts":2780925267,"ph":"X","cat":"toplevel","name":"TaskQueueManager::ProcessTaskFromWorkQueue","args":{"src_file":"../../base/trace_event/trace_log.cc","src_func":"SetEnabled"},"dur":6,"tdur":6,"tts":2881389},
	{"pid":9204,"tid":8456,"ts":2780925275,"ph":"X","cat":"toplevel","name":"TaskQueueManager::ProcessTaskFromWorkQueue","args":{"src_file":"../../base/trace_event/trace_log.cc","src_func":"SetEnabled"},"dur":3,"tdur":3,"tts":2881397},
	{"pid":9204,"tid":8456,"ts":2781424838,"ph":"X","cat":"toplevel","name":"MessageLoop::RunTask","args":{"src_file":"../../third_party/WebKit/Source/platform/scheduler/base/task_queue_manager.cc","src_func":"OnQueueHasIncomingImmediateWork"},"dur":67,"tdur":66,"tts":2881409},
	{"pid":9204,"tid":8456,"ts":2781424848,"ph":"X","c

	[{"pid":11140,"tid":3544,"ts":2772746390,"ph":"X","cat":"toplevel","name":"MessageLoop::RunTask","args":{"src_file":"../../ipc/ipc_channel_proxy.cc","src_func":"Send"},"dur":22,"tdur":21,"tts":50452427},
	{"pid":11140,"tid":3544,"ts":2772746415,"ph":"X","cat":"toplevel","name":"MessageLoop::RunTask","args":{"src_file":"../../mojo/public/cpp/system/simple_watcher.cc","src_func":"Notify"},"dur":10,"tdur":10,"tts":50452451},
	{"pid":11140,"tid":3544,"ts":2772746426,"ph":"X","cat":"toplevel","name":"MessageLoop::RunTask","args":{"src_file":"../../mojo/public/cpp/system/simple_watcher.cc","src_func":"Notify"},"dur":7,"tdur":6,"tts":50452462},
	{"pid":11140,"tid":3544,"ts":2772746439,"ph":"X","cat":"toplevel","name":"MessageLoop::RunTask","args":{"src_file":"../../mojo/public/cpp/system/simple_watcher.cc","src_func":"Notify"},"dur":6,"tdur":5,"tts":50452476},
	{"pid":11140,"tid":3544,"ts":2772752926,"ph":"X","cat":"toplevel","name":"MessageLoop::RunTask","args":{"src_file":"../../mojo/public/cpp/system/simple_watcher.c

	var path = require('path')

	module.exports = {
	entry: './index.js',

	output: {
	filename: 'bundle.js' // Compiled bundle filename
	},

	module: {

	import Swipe from 'swipejs';
	import { lory } from 'lory.js';


	/*
	* Helpers
	*/
	const $ = (selector) => document.querySelector(selector);
	const $$ = (selector) => Array.prototype.slice.apply(document.querySelectorAll(selector));