diff --git a/src/__snapshots__/App.test.js.snap b/src/__snapshots__/App.test.js.snap
new file mode 100644
index 0000000000000000000000000000000000000000..14a321d026d1d1f93d4d7bee7bf78830bb3fb024
--- /dev/null
+++ b/src/__snapshots__/App.test.js.snap
@@ -0,0 +1,253 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="app-container"
+  >
+    <button
+      id="sharp"
+    >
+      §
+    </button>
+    <button
+      id="perus"
+    >
+      1
+    </button>
+    <button
+      id="thin"
+    >
+      q
+    </button>
+    <button
+      id="sharp"
+    >
+      2
+    </button>
+    <button
+      id="perus"
+    >
+      w
+    </button>
+    <button
+      id="sharp"
+    >
+      3
+    </button>
+    <button
+      id="perus"
+    >
+      e
+    </button>
+    <button
+      id="thin"
+    >
+      r
+    </button>
+    <button
+      id="sharp"
+    >
+      5
+    </button>
+    <button
+      id="perus"
+    >
+      t
+    </button>
+    <button
+      id="sharp"
+    >
+      6
+    </button>
+    <button
+      id="perus"
+    >
+      y
+    </button>
+    <button
+      id="sharp"
+    >
+      7
+    </button>
+    <button
+      id="perus"
+    >
+      u
+    </button>
+    <button
+      id="thin"
+    >
+      i
+    </button>
+    <button
+      id="sharp"
+    >
+      a9
+    </button>
+    <button
+      id="perus"
+    >
+      zo
+    </button>
+    <button
+      id="sharp"
+    >
+      s0
+    </button>
+    <button
+      id="perus"
+    >
+      xp
+    </button>
+    <button
+      id="thin"
+    >
+      åc
+    </button>
+    <button
+      id="sharp"
+    >
+      f
+    </button>
+    <button
+      id="perus"
+    >
+      v
+    </button>
+    <button
+      id="sharp"
+    >
+      g
+    </button>
+    <button
+      id="perus"
+    >
+      b
+    </button>
+    <button
+      id="sharp"
+    >
+      h
+    </button>
+    <button
+      id="perus"
+    >
+      n
+    </button>
+    <button
+      id="thin"
+    >
+      m
+    </button>
+    <button
+      id="sharp"
+    >
+      k
+    </button>
+    <button
+      id="perus"
+    >
+      ,
+    </button>
+    <button
+      id="sharp"
+    >
+      l
+    </button>
+    <button
+      id="perus"
+    >
+      .
+    </button>
+    <button
+      id="thin"
+    >
+      -
+    </button>
+    <button
+      id="sharp"
+    >
+      ä
+    </button>
+    <button
+      id="omenu"
+    >
+      Nosta oktaavilla
+    </button>
+    <button
+      id="omenu"
+    >
+      Laske oktaavilla
+    </button>
+    <div>
+      <label
+        id="smenu"
+      >
+        soitin: 
+      </label>
+      <select
+        data-testid="tsmenu"
+        id="smenu"
+      >
+        <option
+          value="shakuhachi"
+        >
+          shakuhachi
+        </option>
+        <option
+          value="cello"
+        >
+          sello
+        </option>
+        <option
+          value="flute"
+        >
+          huilu
+        </option>
+        <option
+          value="bassoon"
+        >
+          fagotti
+        </option>
+        <option
+          value="french_horn"
+        >
+          torvi
+        </option>
+        <option
+          value="choir_aahs"
+        >
+          ihminen
+        </option>
+        <option
+          selected=""
+          value="acoustic_grand_piano"
+        >
+          piano
+        </option>
+        <option
+          value="bagpipe"
+        >
+          säkkipilli
+        </option>
+        <option
+          value="breath_noise"
+        >
+          hengitys
+        </option>
+        <option
+          value="distortion_guitar"
+        >
+          särökitara
+        </option>
+        <option
+          value="trumpet"
+        >
+          trumpetti
+        </option>
+      </select>
+    </div>
+  </div>
+</DocumentFragment>
+`;