diff --git a/app/src/pages/metamine/PixelUnit/PixelUnit.html b/app/src/pages/metamine/PixelUnit/PixelUnit.html
index 3baf1d5c..8af60b22 100644
--- a/app/src/pages/metamine/PixelUnit/PixelUnit.html
+++ b/app/src/pages/metamine/PixelUnit/PixelUnit.html
@@ -12,7 +12,7 @@ <h2>Data from Caltech and Duke composed of 32K simulated results for static and
       <md-button class="md-layout-item md-size-10 md-primary" @click="handleReset()">Reset</md-button>
     </div>
     <div class="md-layout-item md-size-35 md-small-size-100" style="min-width:310px;">
-      <canvas id="unit-cell" width="300" height="300"></canvas>
+      <canvas id="unit-cell" ref="unit-cell" width="300" height="300"></canvas>
     </div>
 
     <div class="md-layout-item md-size-60 md-small-size-100 md-layout md-gutter">
diff --git a/app/src/pages/metamine/PixelUnit/PixelUnit.js b/app/src/pages/metamine/PixelUnit/PixelUnit.js
index 12a1b087..bfd1676a 100644
--- a/app/src/pages/metamine/PixelUnit/PixelUnit.js
+++ b/app/src/pages/metamine/PixelUnit/PixelUnit.js
@@ -57,7 +57,7 @@ export default {
 
   mounted: function () {
     const vm = this
-    this.canvas = document.getElementById('unit-cell')
+    this.canvas = this.$refs['unit-cell']
     this.ctx = this.canvas.getContext('2d')
     this.lw = 4 // line width
 
@@ -84,10 +84,7 @@ export default {
         vm.pixelUnit.drawGrid()
         vm.updateFields()
       })
-      .catch(function (err) {
-        const msg = 'error obtaining pixelunit data. Error: ' + err
-        console.trace(msg)
-      })
+      // TODO add a catch to this promise
   },
   methods: {
     onGeometryEntered () {
diff --git a/app/tests/unit/pages/metamine/pixelunit.spec.js b/app/tests/unit/pages/metamine/pixelunit.spec.js
new file mode 100644
index 00000000..25ca3614
--- /dev/null
+++ b/app/tests/unit/pages/metamine/pixelunit.spec.js
@@ -0,0 +1,28 @@
+import createWrapper from '../../../jest/script/wrapper'
+import PixelUnit from '@/pages/metamine/PixelUnit/PixelUnit.vue'
+
+// TODO handle config file loading once it has a location
+
+// import { promises } from 'fs'
+
+var wrapper = null
+
+describe('PixelUnit.vue', () => {
+  beforeAll(async () => {
+    // const configData = await promises.readFile('@/assets/lin-bilal-liu-10x10-c4v-15bit-static-dynamic.txt', { encoding: 'utf-8' })
+    global.fetch.mockReturnValueOnce(Promise.resolve({
+      text: () => ''
+    }))
+    wrapper = createWrapper(PixelUnit, {})
+  })
+
+  it('mounts properly', () => {
+    expect(wrapper.exists()).toBeTruthy()
+  })
+
+  it.skip('responds to clicks', () => {
+    const grid = wrapper.find('#unit-cell')
+    grid.trigger('click', { layerX: 15, layerY: 15 })
+    expect(wrapper.vm.geometryItems[0].value).toBe('000000000000001')
+  })
+})