diff --git a/rtl-spec/components/editors-non-ideal-state.spec.tsx b/rtl-spec/components/editors-non-ideal-state.spec.tsx
index 19fe2d9d0d..3ca595f64c 100644
--- a/rtl-spec/components/editors-non-ideal-state.spec.tsx
+++ b/rtl-spec/components/editors-non-ideal-state.spec.tsx
@@ -1,4 +1,5 @@
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { renderNonIdealState } from '../../src/renderer/components/editors-non-ideal-state';
 import { EditorMosaic } from '../../src/renderer/editor-mosaic';
@@ -11,13 +12,17 @@ describe('renderNonIdealState()', () => {
   });
 
   it('renders a non-ideal state', () => {
-    expect(renderNonIdealState({} as EditorMosaic)).toMatchSnapshot();
+    const renderResult = render(renderNonIdealState({} as EditorMosaic));
+
+    expect(
+      renderResult.getByTestId('editors-non-ideal-state'),
+    ).toBeInTheDocument();
   });
 
-  it('handles a click', () => {
+  it('handles a click', async () => {
     const resetLayoutSpy = jest.spyOn(editorMosaic, 'resetLayout');
-    const wrapper = mount(renderNonIdealState(editorMosaic));
-    wrapper.find('button').simulate('click');
+    const renderResult = render(renderNonIdealState(editorMosaic));
+    await userEvent.click(renderResult.getByRole('button'));
     expect(resetLayoutSpy).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/rtl-spec/components/editors-toolbar-button.spec.tsx b/rtl-spec/components/editors-toolbar-button.spec.tsx
index fa27b12d0c..d3d092c00e 100644
--- a/rtl-spec/components/editors-toolbar-button.spec.tsx
+++ b/rtl-spec/components/editors-toolbar-button.spec.tsx
@@ -1,6 +1,5 @@
-import * as React from 'react';
-
-import { shallow } from 'enzyme';
+import userEvent from '@testing-library/user-event';
+import { MosaicContext, MosaicWindowContext } from 'react-mosaic-component';
 
 import { EditorId, MAIN_JS } from '../../src/interfaces';
 import {
@@ -8,8 +7,9 @@ import {
   RemoveButton,
 } from '../../src/renderer/components/editors-toolbar-button';
 import { AppState } from '../../src/renderer/state';
+import { renderClassComponentWithInstanceRef } from '../test-utils/renderClassComponentWithInstanceRef';
 
-let mockContext: any = {};
+let mockContext = {} as MosaicWindowContext & MosaicContext<string>;
 
 jest.mock('react-mosaic-component', () => {
   const { MosaicContext, MosaicRootActions, MosaicWindowContext } =
@@ -52,44 +52,51 @@ describe('Editor toolbar button component', () => {
 
   describe('MaximizeButton', () => {
     function createMaximizeButton(id: EditorId) {
-      const wrapper = shallow(<MaximizeButton id={id} appState={store} />, {
-        context: mockContext,
+      return renderClassComponentWithInstanceRef(MaximizeButton, {
+        id,
+        appState: store,
       });
-      const instance = wrapper.instance();
-      return { instance, wrapper };
+
+      // const wrapper = shallow(<MaximizeButton id={id} appState={store} />, {
+      //   context: mockContext,
+      // });
     }
 
     it('renders', () => {
-      const { wrapper } = createMaximizeButton(MAIN_JS);
-      expect(wrapper).toMatchSnapshot();
+      const { renderResult } = createMaximizeButton(MAIN_JS);
+      expect(
+        renderResult.getByTestId('editors-toolbar-maximize-button'),
+      ).toBeInTheDocument();
     });
 
-    it('handles a click', () => {
-      const { instance, wrapper } = createMaximizeButton(MAIN_JS);
-      instance.context = mockContext as unknown;
-      wrapper.dive().dive().find('button').simulate('click');
+    it('handles a click', async () => {
+      const { instance, renderResult } = createMaximizeButton(MAIN_JS);
+      instance.context = mockContext;
+      await userEvent.click(renderResult.getByRole('button'));
       expect(mockContext.mosaicActions.expand).toHaveBeenCalledTimes(1);
     });
   });
 
   describe('RemoveButton', () => {
     function createRemoveButton(id: EditorId) {
-      const wrapper = shallow(<RemoveButton id={id} appState={store} />, {
-        context: mockContext,
+      return renderClassComponentWithInstanceRef(RemoveButton, {
+        id,
+        appState: store,
       });
-      return { wrapper };
     }
 
     it('renders', () => {
-      const { wrapper } = createRemoveButton(MAIN_JS);
-      expect(wrapper).toMatchSnapshot();
+      const { renderResult } = createRemoveButton(MAIN_JS);
+      expect(
+        renderResult.getByTestId('editors-toolbar-remove-button'),
+      ).toBeInTheDocument();
     });
 
-    it('handles a click', () => {
+    it('handles a click', async () => {
       const { editorMosaic } = store;
       const hideSpy = jest.spyOn(editorMosaic, 'hide');
-      const { wrapper } = createRemoveButton(MAIN_JS);
-      wrapper.dive().dive().find('button').simulate('click');
+      const { renderResult } = createRemoveButton(MAIN_JS);
+      await userEvent.click(renderResult.getByRole('button'));
       expect(hideSpy).toHaveBeenCalledTimes(1);
     });
   });
diff --git a/rtl-spec/components/editors.spec.tsx b/rtl-spec/components/editors.spec.tsx
index 56c482f0ae..887c343319 100644
--- a/rtl-spec/components/editors.spec.tsx
+++ b/rtl-spec/components/editors.spec.tsx
@@ -1,7 +1,4 @@
-import * as React from 'react';
-
-import { mount, shallow } from 'enzyme';
-import { MosaicWindowProps } from 'react-mosaic-component';
+import { MosaicNode } from 'react-mosaic-component';
 
 import { EditorId, EditorValues, MAIN_JS } from '../../src/interfaces';
 import { App } from '../../src/renderer/app';
@@ -10,11 +7,11 @@ import { Editor, EditorMosaic } from '../../src/renderer/editor-mosaic';
 import { AppState } from '../../src/renderer/state';
 import {
   MonacoEditorMock,
-  MonacoMock,
   StateMock,
   createEditorValues,
 } from '../../tests/mocks/mocks';
 import { emitEvent } from '../../tests/utils';
+import { renderClassComponentWithInstanceRef } from '../test-utils/renderClassComponentWithInstanceRef';
 
 jest.mock('../../src/renderer/components/editor', () => ({
   Editor: () => 'Editor',
@@ -22,14 +19,12 @@ jest.mock('../../src/renderer/components/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-non-ideal-state.tsx b/src/renderer/components/editors-non-ideal-state.tsx
index 386b6a8f6a..bc1449d03c 100644
--- a/src/renderer/components/editors-non-ideal-state.tsx
+++ b/src/renderer/components/editors-non-ideal-state.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { Button, NonIdealState } from '@blueprintjs/core';
 
+import { TestIdContainer } from './TestIdContainer';
 import { EditorMosaic } from '../editor-mosaic';
 
 export function renderNonIdealState(editorMosaic: EditorMosaic) {
@@ -10,10 +11,12 @@ export function renderNonIdealState(editorMosaic: EditorMosaic) {
   );
 
   return (
-    <NonIdealState
-      action={resolveButton}
-      icon="applications"
-      description="You have closed all editors. You can open them again with the button below or in the sidebar menu!"
-    />
+    <TestIdContainer testId="editors-non-ideal-state">
+      <NonIdealState
+        action={resolveButton}
+        icon="applications"
+        description="You have closed all editors. You can open them again with the button below or in the sidebar menu!"
+      />
+    </TestIdContainer>
   );
 }
diff --git a/src/renderer/components/editors-toolbar-button.tsx b/src/renderer/components/editors-toolbar-button.tsx
index c0bd816737..4ab2c25948 100644
--- a/src/renderer/components/editors-toolbar-button.tsx
+++ b/src/renderer/components/editors-toolbar-button.tsx
@@ -48,7 +48,14 @@ export class MaximizeButton extends ToolbarButton {
       mosaicActions.expand(this.context.mosaicWindowActions.getPath());
     };
 
-    return <Button icon="maximize" className="bp3-small" onClick={onClick} />;
+    return (
+      <Button
+        icon="maximize"
+        className="bp3-small"
+        onClick={onClick}
+        data-testid="editors-toolbar-maximize-button"
+      />
+    );
   }
 }
 
@@ -59,6 +66,13 @@ export class RemoveButton extends ToolbarButton {
   public createButton(_mosaicActions: MosaicRootActions<any>) {
     const onClick = () => this.props.appState.editorMosaic.hide(this.props.id);
 
-    return <Button icon="cross" className="bp3-small" onClick={onClick} />;
+    return (
+      <Button
+        icon="cross"
+        className="bp3-small"
+        onClick={onClick}
+        data-testid="editors-toolbar-remove-button"
+      />
+    );
   }
 }
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-non-ideal-state-spec.tsx.snap b/tests/renderer/components/__snapshots__/editors-non-ideal-state-spec.tsx.snap
deleted file mode 100644
index c38ef9fc78..0000000000
--- a/tests/renderer/components/__snapshots__/editors-non-ideal-state-spec.tsx.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renderNonIdealState() renders a non-ideal state 1`] = `
-<Blueprint3.NonIdealState
-  action={
-    <Blueprint3.Button
-      onClick={[Function]}
-      text="Reset editors"
-    />
-  }
-  description="You have closed all editors. You can open them again with the button below or in the sidebar menu!"
-  icon="applications"
-/>
-`;
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>
-`;
diff --git a/tests/renderer/components/__snapshots__/editors-toolbar-button-spec.tsx.snap b/tests/renderer/components/__snapshots__/editors-toolbar-button-spec.tsx.snap
deleted file mode 100644
index 176ae8d790..0000000000
--- a/tests/renderer/components/__snapshots__/editors-toolbar-button-spec.tsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Editor toolbar button component MaximizeButton renders 1`] = `
-<Component>
-  <Component />
-</Component>
-`;
-
-exports[`Editor toolbar button component RemoveButton renders 1`] = `
-<Component>
-  <Component />
-</Component>
-`;