diff --git a/test/dom/as.mocha.js b/test/dom/as.mocha.js
index 0c322601..5dd46d66 100644
--- a/test/dom/as.mocha.js
+++ b/test/dom/as.mocha.js
@@ -1,9 +1,19 @@
 var expect = require('chai').expect;
-var derby = require('./util').derby;
+var domTestRunner = require('../../src/test-utils/domTestRunner');
 
 describe('as', function() {
+  var runner = domTestRunner.install({
+    jsdomOptions: {
+      // solution for `SecurityError: localStorage is not available for opaque origins`
+      // Racer interfaces with localStorage and the `as-object` tests use `page.model`
+      // methods causing the SecurityError if `url` is not set. Does not appear to impact
+      // `as-array` tests even though they also use `pae.model` methods so 🤷
+      url: 'http://localhost/'
+    }
+  });
+
   it('HTML element `as` property', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body', '<div as="nested[0]"></div>');
     var page = app.createPage();
     var fragment = page.getFragment('Body');
@@ -12,7 +22,7 @@ describe('as', function() {
   });
 
   it('Component `as` property', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body', '<view is="item" as="nested[0]"></view>');
     app.views.register('item', '<div></div>')
     function Item() {};
@@ -25,7 +35,7 @@ describe('as', function() {
   });
 
   it('HTML element `as-object` property', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body',
       '<ul>' +
         '{{each _page.items}}' +
@@ -66,7 +76,7 @@ describe('as', function() {
   });
 
   it('Component `as-object` property', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body',
       '<ul>' +
         '{{each _page.items}}' +
@@ -115,12 +125,13 @@ describe('as', function() {
     expect(fragment).html('<ul><li>D</li><li>A</li><li>C</li></ul>');
 
     page.model.del('_page.items');
+    console.log('_page.items', items.get());
     expect(page.nested.map).eql({});
     expect(fragment).html('<ul></ul>');
   });
 
   it('HTML element `as-array` property', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body',
       '<ul>' +
         '{{each _page.items}}' +
@@ -162,7 +173,7 @@ describe('as', function() {
   });
 
   it('Component `as-array` property', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body',
       '<ul>' +
         '{{each _page.items}}' +
diff --git a/test/dom/bindings.mocha.js b/test/dom/bindings.mocha.js
index d9eb918e..5034b9d5 100644
--- a/test/dom/bindings.mocha.js
+++ b/test/dom/bindings.mocha.js
@@ -2,7 +2,7 @@ var expect = require('chai').expect;
 var domTestRunner = require('../../src/test-utils/domTestRunner');
 
 describe('bindings', function() {
-  var runner = domTestRunner.install();
+  const runner = domTestRunner.install();
 
   describe('bracket dependencies', function() {
     it('bracket inner dependency change', function() {
diff --git a/test/dom/components.browser.mocha.js b/test/dom/components.browser.mocha.js
index e361e176..1c2dc7e8 100644
--- a/test/dom/components.browser.mocha.js
+++ b/test/dom/components.browser.mocha.js
@@ -1,12 +1,13 @@
 var expect = require('chai').expect;
 var templates = require('../../src/templates').templates;
-var derby = require('./util').derby;
+var domTestRunner = require('../../src/test-utils/domTestRunner');
 
 describe('components', function() {
+  const runner = domTestRunner.install();
 
   describe('destroy', function() {
     it('emits a "destroy" event when the component is removed from the DOM', function(done) {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       var page = app.createPage();
       app.views.register('Body',
         '{{unless _page.hide}}' +
@@ -26,7 +27,7 @@ describe('components', function() {
     });
 
     it('emits an event declared in the template with `on-destroy`', function(done) {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       var page = app.createPage();
       app.views.register('Body',
         '{{unless _page.hide}}' +
@@ -44,7 +45,7 @@ describe('components', function() {
     });
 
     it('sets `this.isDestroyed` property to true after a component has been fully destroyed', function() {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       var page = app.createPage();
       app.views.register('Body',
         '{{unless _page.hide}}' +
@@ -64,7 +65,7 @@ describe('components', function() {
 
   describe('bind', function() {
     it('calls a function with `this` being the component and passed in arguments', function() {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       var page = app.createPage();
       app.views.register('Body', '<view is="box"></view>');
       app.views.register('box', '<div>{{area}}</div>');
@@ -93,7 +94,7 @@ describe('components', function() {
       options = options || {};
 
       it('calls a function once with `this` being the component', function(done) {
-        var app = derby.createApp();
+        const { app } = runner.createHarness();
         var page = app.createPage();
         app.views.register('Body', '<view is="box" as="box"></view>');
         app.views.register('box', '<div></div>');
@@ -117,7 +118,7 @@ describe('components', function() {
       });
 
       it('resets and calls again', function(done) {
-        var app = derby.createApp();
+        const { app } = runner.createHarness();
         var page = app.createPage();
         app.views.register('Body', '<view is="box" as="box"></view>');
         app.views.register('box', '<div></div>');
@@ -149,7 +150,7 @@ describe('components', function() {
       });
 
       it('calls with the most recent arguments', function(done) {
-        var app = derby.createApp();
+        const { app } = runner.createHarness();
         var page = app.createPage();
         app.views.register('Body', '<view is="box" as="box"></view>');
         app.views.register('box', '<div></div>');
@@ -222,7 +223,7 @@ describe('components', function() {
       });
     });
     it('debounceAsync does not apply arguments if callback has only one argument', function(done) {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       var page = app.createPage();
       app.views.register('Body', '<view is="box" as="box"></view>');
       app.views.register('box', '<div></div>');
@@ -245,7 +246,7 @@ describe('components', function() {
       page.box.update('a', 1);
     });
     it('debounceAsync debounces until the async call completes', function(done) {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       app.views.register('Body', '<view is="box"></view>');
       app.views.register('box', '<div></div>');
       var calls = 0;
@@ -279,7 +280,7 @@ describe('components', function() {
       app.component('box', Box);
     });
     it('throttle calls no more frequently than delay', function(done) {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       app.views.register('Body', '<view is="box"></view>');
       app.views.register('box', '<div></div>');
       var delay = 10;
@@ -319,7 +320,7 @@ describe('components', function() {
 
   describe('dependencies', function() {
     it('gets dependencies rendered inside of components', function() {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       var page = app.createPage();
       app.views.register('Body',
         '<view is="box" title="{{_page.title}}, friend">' +
@@ -345,7 +346,7 @@ describe('components', function() {
     });
 
     it('does not return dependencies for local paths within components', function() {
-      var app = derby.createApp();
+      const { app } = runner.createHarness();
       var page = app.createPage();
       app.views.register('Body',
         '<view is="box" title="{{_page.title}}"></view>'
diff --git a/test/dom/dom-events.mocha.js b/test/dom/dom-events.mocha.js
index 37075157..fef5b807 100644
--- a/test/dom/dom-events.mocha.js
+++ b/test/dom/dom-events.mocha.js
@@ -1,9 +1,11 @@
 var expect = require('chai').expect;
-var derby = require('./util').derby;
+var domTestRunner = require('../../src/test-utils/domTestRunner');
 
 describe('DOM events', function() {
+  const runner = domTestRunner.install();
+
   it('HTML element markup custom `create` event', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body',
       '<div on-create="createDiv($element)">' +
         '<span on-create="createSpan($element)"></span>' +
@@ -24,7 +26,7 @@ describe('DOM events', function() {
   });
 
   it('HTML element markup custom `destroy` event', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body',
       '<div>' +
         '{{unless _page.hide}}' +
@@ -47,7 +49,7 @@ describe('DOM events', function() {
   });
 
   it('dom.on custom `destroy` event', function() {
-    var app = derby.createApp();
+    const { app } = runner.createHarness();
     app.views.register('Body',
       '<div>' +
         '{{unless _page.hide}}' +