diff --git a/tests/renderer/components/editors-spec.tsx b/rtl-spec/components/editors.spec.tsx
similarity index 74%
rename from tests/renderer/components/editors-spec.tsx
rename to rtl-spec/components/editors.spec.tsx
index 81f3b8809c..887c343319 100644
--- a/tests/renderer/components/editors-spec.tsx
+++ b/rtl-spec/components/editors.spec.tsx
@@ -1,35 +1,30 @@
-import * as React from 'react';
+import { MosaicNode } from 'react-mosaic-component';
 
-import { mount, shallow } from 'enzyme';
-import { MosaicWindowProps } from 'react-mosaic-component';
-
-import { EditorId, EditorValues, MAIN_JS } from '../../../src/interfaces';
-import { App } from '../../../src/renderer/app';
-import { Editors } from '../../../src/renderer/components/editors';
-import { Editor, EditorMosaic } from '../../../src/renderer/editor-mosaic';
-import { AppState } from '../../../src/renderer/state';
+import { EditorId, EditorValues, MAIN_JS } from '../../src/interfaces';
+import { App } from '../../src/renderer/app';
+import { Editors } from '../../src/renderer/components/editors';
+import { Editor, EditorMosaic } from '../../src/renderer/editor-mosaic';
+import { AppState } from '../../src/renderer/state';
 import {
   MonacoEditorMock,
-  MonacoMock,
   StateMock,
   createEditorValues,
-} from '../../mocks/mocks';
-import { emitEvent } from '../../utils';
+} from '../../tests/mocks/mocks';
+import { emitEvent } from '../../tests/utils';
+import { renderClassComponentWithInstanceRef } from '../test-utils/renderClassComponentWithInstanceRef';
 
-jest.mock('../../../src/renderer/components/editor', () => ({
+jest.mock('../../src/renderer/components/editor', () => ({
   Editor: () => 'Editor',
 }));
 
 describe('Editors component', () => {
   let app: App;
-  let monaco: MonacoMock;
   let store: AppState;
   let editorMosaic: EditorMosaic;
   let editorValues: EditorValues;
 
   beforeEach(() => {
     ({ app } = window);
-    monaco = window.monaco as unknown as MonacoMock;
     ({ state: store } = window.app);
     editorValues = createEditorValues();
     editorMosaic = new EditorMosaic();
@@ -38,15 +33,20 @@ describe('Editors component', () => {
     (store as unknown as StateMock).editorMosaic = editorMosaic;
   });
 
+  function renderEditors() {
+    return renderClassComponentWithInstanceRef(Editors, {
+      appState: store,
+    });
+  }
+
   it('renders', () => {
-    const wrapper = mount(<Editors appState={store} />);
-    wrapper.setState({ monaco });
-    expect(wrapper).toMatchSnapshot();
+    const { renderResult } = renderEditors();
+
+    expect(renderResult.getByTestId('editors')).toBeInTheDocument();
   });
 
   it('does not execute command if not supported', () => {
-    const wrapper = shallow(<Editors appState={store} />);
-    const instance: any = wrapper.instance();
+    const { instance } = renderEditors();
 
     const editor = new MonacoEditorMock();
     const action = editor.getAction();
@@ -70,15 +70,13 @@ describe('Editors component', () => {
         throw new Error('Bwap bwap');
       });
 
-      const wrapper = shallow(<Editors appState={store} />);
-      const instance: any = wrapper.instance();
+      const { instance } = renderEditors();
 
       expect(instance.toggleEditorOption('wordWrap')).toBe(false);
     });
 
     it('updates a setting', () => {
-      const wrapper = shallow(<Editors appState={store} />);
-      const instance: any = wrapper.instance();
+      const { instance } = renderEditors();
 
       const editor = new MonacoEditorMock();
       editorMosaic.addEditor(filename, editor as unknown as Editor);
@@ -90,29 +88,35 @@ describe('Editors component', () => {
     });
   });
 
-  it('renders a toolbar', () => {
-    const wrapper = shallow(<Editors appState={store} />);
-    const instance: any = wrapper.instance();
-    const toolbar = instance.renderToolbar(
-      { title: MAIN_JS } as MosaicWindowProps<EditorId>,
-      MAIN_JS,
-    );
-
-    expect(toolbar).toMatchSnapshot();
+  it('renders toolbars', () => {
+    const { renderResult } = renderEditors();
+
+    const [
+      mainToolbar,
+      rendererToolbar,
+      htmlToolbar,
+      preloadToolbar,
+      stylesheetToolbar,
+    ] = renderResult.getAllByTestId('editors-toolbar');
+
+    expect(mainToolbar).toHaveTextContent('Main Process (main.js)');
+    expect(rendererToolbar).toHaveTextContent('Renderer Process (renderer.js)');
+    expect(htmlToolbar).toHaveTextContent('HTML (index.html)');
+    expect(preloadToolbar).toHaveTextContent('Preload (preload.js)');
+    expect(stylesheetToolbar).toHaveTextContent('Stylesheet (styles.css)');
   });
 
   it('onChange() updates the mosaic arrangement in the appState', () => {
-    const wrapper = shallow(<Editors appState={store} />);
-    const instance: any = wrapper.instance();
+    const { instance } = renderEditors();
 
-    const arrangement = { testArrangement: true };
-    instance.onChange(arrangement as any);
+    const arrangement: MosaicNode<EditorId> = 'testArrangement.js';
+    instance.onChange(arrangement);
     expect(editorMosaic.mosaic).toStrictEqual(arrangement);
   });
 
   describe('events', () => {
     it('handles a "execute-monaco-command" event', () => {
-      shallow(<Editors appState={store} />);
+      renderEditors();
 
       const editor = new MonacoEditorMock();
       const action = editor.getAction();
@@ -129,7 +133,7 @@ describe('Editors component', () => {
     const fakeValues = { [MAIN_JS]: 'hi' } as const;
 
     it('handles a "new-fiddle" event', async () => {
-      shallow(<Editors appState={store} />);
+      renderEditors();
 
       let resolve: (value?: unknown) => void;
       const replacePromise = new Promise((r) => {
@@ -162,7 +166,7 @@ describe('Editors component', () => {
 
     describe('"select-all-in-editor" handler', () => {
       it('selects all in the focused editor', async () => {
-        shallow(<Editors appState={store} />);
+        renderEditors();
 
         const range = 'range';
         const editor = new MonacoEditorMock();
@@ -177,7 +181,7 @@ describe('Editors component', () => {
       });
 
       it('does not change selection if the selected editor has no model', async () => {
-        shallow(<Editors appState={store} />);
+        renderEditors();
 
         const editor = new MonacoEditorMock();
         delete (editor as any).model;
@@ -191,14 +195,14 @@ describe('Editors component', () => {
       });
 
       it('does not crash if there is no selected editor', () => {
-        shallow(<Editors appState={store} />);
+        renderEditors();
         editorMosaic.focusedEditor = jest.fn().mockReturnValue(null);
         emitEvent('select-all-in-editor');
       });
     });
 
     it('handles a "new-test" event', async () => {
-      shallow(<Editors appState={store} />);
+      renderEditors();
 
       // setup
       const getTestTemplateSpy = jest
@@ -229,7 +233,7 @@ describe('Editors component', () => {
     });
 
     it('handles a "select-all-in-editor" event', async () => {
-      shallow(<Editors appState={store} />);
+      renderEditors();
 
       const range = 'range';
       const editor = new MonacoEditorMock();
@@ -247,7 +251,7 @@ describe('Editors component', () => {
       const editor = new MonacoEditorMock();
       editorMosaic.addEditor(id, editor as unknown as Editor);
 
-      shallow(<Editors appState={store} />);
+      renderEditors();
       emitEvent('toggle-monaco-option', 'wordWrap');
       expect(editor.updateOptions).toHaveBeenCalled();
     });
@@ -255,8 +259,8 @@ describe('Editors component', () => {
 
   describe('setFocused()', () => {
     it('sets the "focused" property', () => {
-      const wrapper = shallow(<Editors appState={store} />);
-      const instance: any = wrapper.instance();
+      const { instance } = renderEditors();
+
       const spy = jest.spyOn(instance, 'setState');
 
       const id = MAIN_JS;
@@ -265,8 +269,8 @@ describe('Editors component', () => {
     });
 
     it('focus sidebar file', () => {
-      const wrapper = shallow(<Editors appState={store} />);
-      const instance: any = wrapper.instance();
+      const { instance } = renderEditors();
+
       const spy = jest.spyOn(instance, 'setState');
 
       const id = MAIN_JS;
diff --git a/src/renderer/components/TestIdContainer.tsx b/src/renderer/components/TestIdContainer.tsx
new file mode 100644
index 0000000000..03c7fe5568
--- /dev/null
+++ b/src/renderer/components/TestIdContainer.tsx
@@ -0,0 +1,18 @@
+import React, { PropsWithChildren } from 'react';
+
+type TestIdContainerProps = PropsWithChildren<{
+  testId: string;
+}>;
+
+/**
+ * A wrapper for third-party components that don't allow us to pass arbitrary
+ * DOM attributes like `data-testid`. It uses `display: contents` in the
+ * wrapping `div` so it has no CSS side effects.
+ */
+export function TestIdContainer({ testId, children }: TestIdContainerProps) {
+  return (
+    <div data-testid={testId} style={{ display: 'contents' }}>
+      {children}
+    </div>
+  );
+}
diff --git a/src/renderer/components/editors.tsx b/src/renderer/components/editors.tsx
index 07be780a27..c1cb0a7a6f 100644
--- a/src/renderer/components/editors.tsx
+++ b/src/renderer/components/editors.tsx
@@ -13,6 +13,7 @@ import {
 import { Editor } from './editor';
 import { renderNonIdealState } from './editors-non-ideal-state';
 import { MaximizeButton, RemoveButton } from './editors-toolbar-button';
+import { TestIdContainer } from './TestIdContainer';
 import { EditorId, SetFiddleOptions } from '../../interfaces';
 import { AppState } from '../state';
 import { getEditorTitle } from '../utils/editor-utils';
@@ -191,7 +192,7 @@ export const Editors = observer(
       const { appState } = this.props;
 
       return (
-        <div>
+        <div data-testid="editors-toolbar">
           {/* Left */}
           <div>
             <h5>{title}</h5>
@@ -258,13 +259,15 @@ export const Editors = observer(
       const { editorMosaic } = this.props.appState;
 
       return (
-        <Mosaic<EditorId>
-          className={`focused__${this.state.focused}`}
-          onChange={this.onChange}
-          value={editorMosaic.mosaic}
-          zeroStateView={renderNonIdealState(editorMosaic)}
-          renderTile={this.renderTile}
-        />
+        <TestIdContainer testId="editors">
+          <Mosaic<EditorId>
+            className={`focused__${this.state.focused}`}
+            onChange={this.onChange}
+            value={editorMosaic.mosaic}
+            zeroStateView={renderNonIdealState(editorMosaic)}
+            renderTile={this.renderTile}
+          />
+        </TestIdContainer>
       );
     }
 
diff --git a/src/renderer/components/tour-welcome.tsx b/src/renderer/components/tour-welcome.tsx
index 22b79bdf85..f36a7e7cf5 100644
--- a/src/renderer/components/tour-welcome.tsx
+++ b/src/renderer/components/tour-welcome.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import { Button, Classes, Dialog } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 
+import { TestIdContainer } from './TestIdContainer';
 import { Tour, TourScriptStep, TourStepGetButtonParams } from './tour';
 import { AppState } from '../state';
 
@@ -238,10 +239,7 @@ export const WelcomeTour = observer(
       if (!isTourStarted) {
         return (
           <Dialog key="welcome-tour-dialog" isOpen={true}>
-            <div
-              data-testid="welcome-tour-dialog"
-              style={{ display: 'contents' }}
-            >
+            <TestIdContainer testId="welcome-tour-dialog">
               <div className={Classes.DIALOG_HEADER}>
                 <h4 className={Classes.HEADING}>🙋‍ Hey There!</h4>
               </div>
@@ -260,7 +258,7 @@ export const WelcomeTour = observer(
                   {this.buttons}
                 </div>
               </div>
-            </div>
+            </TestIdContainer>
           </Dialog>
         );
       } else {
diff --git a/tests/renderer/components/__snapshots__/editors-spec.tsx.snap b/tests/renderer/components/__snapshots__/editors-spec.tsx.snap
deleted file mode 100644
index b4cb240441..0000000000
--- a/tests/renderer/components/__snapshots__/editors-spec.tsx.snap
+++ /dev/null
@@ -1,956 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Editors component renders 1`] = `
-<div
-  className="focused__undefined mosaic mosaic-drop-target"
->
-  <div
-    className="mosaic-root"
-  >
-    <div
-      className="mosaic-tile"
-      key="main.js"
-      style={
-        {
-          "bottom": "50%",
-          "left": "0%",
-          "right": "50%",
-          "top": "0%",
-        }
-      }
-    >
-      <div
-        className="mosaic-window mosaic-drop-target main.js"
-      >
-        <div
-          className="mosaic-window-toolbar draggable"
-        >
-          <div>
-            <div>
-              <h5>
-                Main Process (main.js)
-              </h5>
-            </div>
-            <div />
-            <div
-              className="mosaic-controls"
-            >
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-maximize"
-                  icon="maximize"
-                >
-                  <svg
-                    data-icon="maximize"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      maximize
-                    </desc>
-                    <path
-                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-cross"
-                  icon="cross"
-                >
-                  <svg
-                    data-icon="cross"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      cross
-                    </desc>
-                    <path
-                      d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="mosaic-window-body"
-        >
-          Editor
-        </div>
-        <div
-          className="mosaic-window-body-overlay"
-          onClick={[Function]}
-        />
-        <div
-          className="mosaic-window-additional-actions-bar"
-        />
-        <div
-          className="mosaic-preview"
-        >
-          <div
-            className="mosaic-window-toolbar"
-          >
-            <div
-              className="mosaic-window-title"
-            >
-              Main Process (main.js)
-            </div>
-          </div>
-          <div
-            className="mosaic-window-body"
-          >
-            <h4>
-              Main Process (main.js)
-            </h4>
-            <span
-              className="bp3-icon bp3-icon-application"
-              icon="application"
-            >
-              <svg
-                data-icon="application"
-                height={72}
-                viewBox="0 0 20 20"
-                width={72}
-              >
-                <desc>
-                  application
-                </desc>
-                <path
-                  d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
-                  fillRule="evenodd"
-                  key="0"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          className="drop-target-container"
-        >
-          <div
-            className="drop-target top"
-          />
-          <div
-            className="drop-target bottom"
-          />
-          <div
-            className="drop-target left"
-          />
-          <div
-            className="drop-target right"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="mosaic-split -column"
-      onMouseDown={[Function]}
-      style={
-        {
-          "bottom": "0%",
-          "left": "0%",
-          "right": "50%",
-          "top": "50%",
-        }
-      }
-    >
-      <div
-        className="mosaic-split-line"
-      />
-    </div>
-    <div
-      className="mosaic-tile"
-      key="renderer.js"
-      style={
-        {
-          "bottom": "0%",
-          "left": "0%",
-          "right": "50%",
-          "top": "50%",
-        }
-      }
-    >
-      <div
-        className="mosaic-window mosaic-drop-target renderer.js"
-      >
-        <div
-          className="mosaic-window-toolbar draggable"
-        >
-          <div>
-            <div>
-              <h5>
-                Renderer Process (renderer.js)
-              </h5>
-            </div>
-            <div />
-            <div
-              className="mosaic-controls"
-            >
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-maximize"
-                  icon="maximize"
-                >
-                  <svg
-                    data-icon="maximize"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      maximize
-                    </desc>
-                    <path
-                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-cross"
-                  icon="cross"
-                >
-                  <svg
-                    data-icon="cross"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      cross
-                    </desc>
-                    <path
-                      d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="mosaic-window-body"
-        >
-          Editor
-        </div>
-        <div
-          className="mosaic-window-body-overlay"
-          onClick={[Function]}
-        />
-        <div
-          className="mosaic-window-additional-actions-bar"
-        />
-        <div
-          className="mosaic-preview"
-        >
-          <div
-            className="mosaic-window-toolbar"
-          >
-            <div
-              className="mosaic-window-title"
-            >
-              Renderer Process (renderer.js)
-            </div>
-          </div>
-          <div
-            className="mosaic-window-body"
-          >
-            <h4>
-              Renderer Process (renderer.js)
-            </h4>
-            <span
-              className="bp3-icon bp3-icon-application"
-              icon="application"
-            >
-              <svg
-                data-icon="application"
-                height={72}
-                viewBox="0 0 20 20"
-                width={72}
-              >
-                <desc>
-                  application
-                </desc>
-                <path
-                  d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
-                  fillRule="evenodd"
-                  key="0"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          className="drop-target-container"
-        >
-          <div
-            className="drop-target top"
-          />
-          <div
-            className="drop-target bottom"
-          />
-          <div
-            className="drop-target left"
-          />
-          <div
-            className="drop-target right"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="mosaic-split -row"
-      onMouseDown={[Function]}
-      style={
-        {
-          "bottom": "0%",
-          "left": "50%",
-          "right": "0%",
-          "top": "0%",
-        }
-      }
-    >
-      <div
-        className="mosaic-split-line"
-      />
-    </div>
-    <div
-      className="mosaic-tile"
-      key="index.html"
-      style={
-        {
-          "bottom": "50%",
-          "left": "50%",
-          "right": "0%",
-          "top": "0%",
-        }
-      }
-    >
-      <div
-        className="mosaic-window mosaic-drop-target index.html"
-      >
-        <div
-          className="mosaic-window-toolbar draggable"
-        >
-          <div>
-            <div>
-              <h5>
-                HTML (index.html)
-              </h5>
-            </div>
-            <div />
-            <div
-              className="mosaic-controls"
-            >
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-maximize"
-                  icon="maximize"
-                >
-                  <svg
-                    data-icon="maximize"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      maximize
-                    </desc>
-                    <path
-                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-cross"
-                  icon="cross"
-                >
-                  <svg
-                    data-icon="cross"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      cross
-                    </desc>
-                    <path
-                      d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="mosaic-window-body"
-        >
-          Editor
-        </div>
-        <div
-          className="mosaic-window-body-overlay"
-          onClick={[Function]}
-        />
-        <div
-          className="mosaic-window-additional-actions-bar"
-        />
-        <div
-          className="mosaic-preview"
-        >
-          <div
-            className="mosaic-window-toolbar"
-          >
-            <div
-              className="mosaic-window-title"
-            >
-              HTML (index.html)
-            </div>
-          </div>
-          <div
-            className="mosaic-window-body"
-          >
-            <h4>
-              HTML (index.html)
-            </h4>
-            <span
-              className="bp3-icon bp3-icon-application"
-              icon="application"
-            >
-              <svg
-                data-icon="application"
-                height={72}
-                viewBox="0 0 20 20"
-                width={72}
-              >
-                <desc>
-                  application
-                </desc>
-                <path
-                  d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
-                  fillRule="evenodd"
-                  key="0"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          className="drop-target-container"
-        >
-          <div
-            className="drop-target top"
-          />
-          <div
-            className="drop-target bottom"
-          />
-          <div
-            className="drop-target left"
-          />
-          <div
-            className="drop-target right"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="mosaic-split -column"
-      onMouseDown={[Function]}
-      style={
-        {
-          "bottom": "0%",
-          "left": "50%",
-          "right": "0%",
-          "top": "50%",
-        }
-      }
-    >
-      <div
-        className="mosaic-split-line"
-      />
-    </div>
-    <div
-      className="mosaic-tile"
-      key="preload.js"
-      style={
-        {
-          "bottom": "25%",
-          "left": "50%",
-          "right": "0%",
-          "top": "50%",
-        }
-      }
-    >
-      <div
-        className="mosaic-window mosaic-drop-target preload.js"
-      >
-        <div
-          className="mosaic-window-toolbar draggable"
-        >
-          <div>
-            <div>
-              <h5>
-                Preload (preload.js)
-              </h5>
-            </div>
-            <div />
-            <div
-              className="mosaic-controls"
-            >
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-maximize"
-                  icon="maximize"
-                >
-                  <svg
-                    data-icon="maximize"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      maximize
-                    </desc>
-                    <path
-                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-cross"
-                  icon="cross"
-                >
-                  <svg
-                    data-icon="cross"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      cross
-                    </desc>
-                    <path
-                      d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="mosaic-window-body"
-        >
-          Editor
-        </div>
-        <div
-          className="mosaic-window-body-overlay"
-          onClick={[Function]}
-        />
-        <div
-          className="mosaic-window-additional-actions-bar"
-        />
-        <div
-          className="mosaic-preview"
-        >
-          <div
-            className="mosaic-window-toolbar"
-          >
-            <div
-              className="mosaic-window-title"
-            >
-              Preload (preload.js)
-            </div>
-          </div>
-          <div
-            className="mosaic-window-body"
-          >
-            <h4>
-              Preload (preload.js)
-            </h4>
-            <span
-              className="bp3-icon bp3-icon-application"
-              icon="application"
-            >
-              <svg
-                data-icon="application"
-                height={72}
-                viewBox="0 0 20 20"
-                width={72}
-              >
-                <desc>
-                  application
-                </desc>
-                <path
-                  d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
-                  fillRule="evenodd"
-                  key="0"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          className="drop-target-container"
-        >
-          <div
-            className="drop-target top"
-          />
-          <div
-            className="drop-target bottom"
-          />
-          <div
-            className="drop-target left"
-          />
-          <div
-            className="drop-target right"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      className="mosaic-split -column"
-      onMouseDown={[Function]}
-      style={
-        {
-          "bottom": "0%",
-          "left": "50%",
-          "right": "0%",
-          "top": "75%",
-        }
-      }
-    >
-      <div
-        className="mosaic-split-line"
-      />
-    </div>
-    <div
-      className="mosaic-tile"
-      key="styles.css"
-      style={
-        {
-          "bottom": "0%",
-          "left": "50%",
-          "right": "0%",
-          "top": "75%",
-        }
-      }
-    >
-      <div
-        className="mosaic-window mosaic-drop-target styles.css"
-      >
-        <div
-          className="mosaic-window-toolbar draggable"
-        >
-          <div>
-            <div>
-              <h5>
-                Stylesheet (styles.css)
-              </h5>
-            </div>
-            <div />
-            <div
-              className="mosaic-controls"
-            >
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-maximize"
-                  icon="maximize"
-                >
-                  <svg
-                    data-icon="maximize"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      maximize
-                    </desc>
-                    <path
-                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-              <button
-                className="bp3-button bp3-small"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                onKeyUp={[Function]}
-                type="button"
-              >
-                <span
-                  className="bp3-icon bp3-icon-cross"
-                  icon="cross"
-                >
-                  <svg
-                    data-icon="cross"
-                    height={16}
-                    viewBox="0 0 16 16"
-                    width={16}
-                  >
-                    <desc>
-                      cross
-                    </desc>
-                    <path
-                      d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z"
-                      fillRule="evenodd"
-                      key="0"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-        <div
-          className="mosaic-window-body"
-        >
-          Editor
-        </div>
-        <div
-          className="mosaic-window-body-overlay"
-          onClick={[Function]}
-        />
-        <div
-          className="mosaic-window-additional-actions-bar"
-        />
-        <div
-          className="mosaic-preview"
-        >
-          <div
-            className="mosaic-window-toolbar"
-          >
-            <div
-              className="mosaic-window-title"
-            >
-              Stylesheet (styles.css)
-            </div>
-          </div>
-          <div
-            className="mosaic-window-body"
-          >
-            <h4>
-              Stylesheet (styles.css)
-            </h4>
-            <span
-              className="bp3-icon bp3-icon-application"
-              icon="application"
-            >
-              <svg
-                data-icon="application"
-                height={72}
-                viewBox="0 0 20 20"
-                width={72}
-              >
-                <desc>
-                  application
-                </desc>
-                <path
-                  d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
-                  fillRule="evenodd"
-                  key="0"
-                />
-              </svg>
-            </span>
-          </div>
-        </div>
-        <div
-          className="drop-target-container"
-        >
-          <div
-            className="drop-target top"
-          />
-          <div
-            className="drop-target bottom"
-          />
-          <div
-            className="drop-target left"
-          />
-          <div
-            className="drop-target right"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div
-    className="drop-target-container"
-  >
-    <div
-      className="drop-target top"
-    />
-    <div
-      className="drop-target bottom"
-    />
-    <div
-      className="drop-target left"
-    />
-    <div
-      className="drop-target right"
-    />
-  </div>
-</div>
-`;
-
-exports[`Editors component renders a toolbar 1`] = `
-<div>
-  <div>
-    <h5>
-      main.js
-    </h5>
-  </div>
-  <div />
-  <div
-    className="mosaic-controls"
-  >
-    <MaximizeButton
-      appState={
-        {
-          "editorMosaic": {
-            "layoutDebounce": 26,
-            "mosaic": {
-              "direction": "row",
-              "first": {
-                "direction": "column",
-                "first": "main.js",
-                "second": "renderer.js",
-              },
-              "second": {
-                "direction": "column",
-                "first": "index.html",
-                "second": {
-                  "direction": "column",
-                  "first": "preload.js",
-                  "second": "styles.css",
-                },
-              },
-            },
-          },
-        }
-      }
-      id="main.js"
-    />
-    <RemoveButton
-      appState={
-        {
-          "editorMosaic": {
-            "layoutDebounce": 26,
-            "mosaic": {
-              "direction": "row",
-              "first": {
-                "direction": "column",
-                "first": "main.js",
-                "second": "renderer.js",
-              },
-              "second": {
-                "direction": "column",
-                "first": "index.html",
-                "second": {
-                  "direction": "column",
-                  "first": "preload.js",
-                  "second": "styles.css",
-                },
-              },
-            },
-          },
-        }
-      }
-      id="main.js"
-    />
-  </div>
-</div>
-`;