diff --git a/package-lock.json b/package-lock.json
index b42185ac..7ae6aaa4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5997,15 +5997,6 @@
         }
       }
     },
-    "enzyme-to-json": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/enzyme-to-json/-/enzyme-to-json-3.4.0.tgz",
-      "integrity": "sha512-gbu8P8PMAtb+qtKuGVRdZIYxWHC03q1dGS3EKRmUzmTDIracu3o6cQ0d4xI2YWojbelbxjYOsmqM5EgAL0WgIA==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.12"
-      }
-    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
diff --git a/package.json b/package.json
index a2e434fe..80f59f3f 100644
--- a/package.json
+++ b/package.json
@@ -44,10 +44,7 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
     },
-    "verbose": true,
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
+    "verbose": true
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.12",
@@ -98,7 +95,6 @@
     "css-loader": "^2.1.1",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
-    "enzyme-to-json": "^3.4.0",
     "eslint": "^5.16.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-plugin-css-modules": "^2.11.0",
diff --git a/packages/components/timed-text-editor/CustomEditor.js b/packages/components/timed-text-editor/CustomEditor.js
deleted file mode 100644
index 2312cea3..00000000
--- a/packages/components/timed-text-editor/CustomEditor.js
+++ /dev/null
@@ -1,71 +0,0 @@
-// TODO: move CustomEditor in separate file
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Editor } from 'draft-js';
-import WrapperBlock from './WrapperBlock';
-
-class CustomEditor extends React.Component {
-
-    handleWordClick = (e) => {
-      this.props.onWordClick(e);
-    }
-
-    renderBlockWithTimecodes = () => {
-      return {
-        component: WrapperBlock,
-        editable: true,
-        props: {
-          showSpeakers: this.props.showSpeakers,
-          showTimecodes: this.props.showTimecodes,
-          timecodeOffset: this.props.timecodeOffset,
-          editorState: this.props.editorState,
-          setEditorNewContentState: this.props.setEditorNewContentState,
-          onWordClick: this.handleWordClick,
-          handleAnalyticsEvents: this.props.handleAnalyticsEvents
-        }
-      };
-    }
-
-    shouldComponentUpdate(nextProps) {
-      // https://stackoverflow.com/questions/39182657/best-performance-method-to-check-if-contentstate-changed-in-draftjs-or-just-edi
-      if (nextProps.editorState !== this.props.editorState) {
-        return true;
-      }
-
-      return false;
-    }
-
-    handleOnChange = (e) => {
-      this.props.onChange(e);
-    }
-
-    render() {
-      return (
-        <Editor
-          editorState={ this.props.editorState }
-          onChange={ this.handleOnChange }
-          stripPastedStyles
-          blockRendererFn={ this.renderBlockWithTimecodes }
-          handleKeyCommand={ this.props.handleKeyCommand }
-          keyBindingFn={ this.props.customKeyBindingFn }
-          spellCheck={ this.props.spellCheck }
-        />
-      );
-    }
-}
-
-CustomEditor.propTypes = {
-  customKeyBindingFn: PropTypes.any,
-  editorState: PropTypes.any,
-  handleAnalyticsEvents: PropTypes.any,
-  handleKeyCommand: PropTypes.any,
-  onChange: PropTypes.any,
-  onWordClick: PropTypes.any,
-  setEditorNewContentState: PropTypes.any,
-  showSpeakers: PropTypes.any,
-  showTimecodes: PropTypes.any,
-  spellCheck: PropTypes.any,
-  timecodeOffset: PropTypes.any
-};
-
-export default CustomEditor;
\ No newline at end of file
diff --git a/packages/components/timed-text-editor/__snapshots__/index.test.js.snap b/packages/components/timed-text-editor/__snapshots__/index.test.js.snap
deleted file mode 100644
index dffaeae1..00000000
--- a/packages/components/timed-text-editor/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,110 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<TimeTextEditor /> should render correctly in "debug" mode 1`] = `
-<section>
-  <section
-    onDoubleClick={[Function]}
-  >
-    <style
-      scoped={true}
-    >
-      span.Word[data-start="NA"] { background-color: #69e3c2; text-shadow: 0 0 0.01px black }
-      span.Word[data-start="NA"]+span { background-color: #69e3c2 }
-      span.Word[data-prev-times~="NaN"] { color: #767676 }
-      span.Word[data-prev-times~="NaN"] { color: #767676 }
-      span.Word[data-confidence="low"] { border-bottom: 1px dotted blue }
-    </style>
-    <CustomEditor
-      customKeyBindingFn={[Function]}
-      editorState={
-        EditorState {
-          "_immutable": Immutable.Record {
-            "allowUndo": true,
-            "currentContent": Immutable.Record {
-              "entityMap": Object {
-                "__add": [Function],
-                "__create": [Function],
-                "__get": [Function],
-                "__getLastCreatedEntityKey": [Function],
-                "__mergeData": [Function],
-                "__replaceData": [Function],
-                "add": [Function],
-                "create": [Function],
-                "get": [Function],
-                "getLastCreatedEntityKey": [Function],
-                "mergeData": [Function],
-                "replaceData": [Function],
-              },
-              "blockMap": Immutable.OrderedMap {
-                "eqvsq": Immutable.Record {
-                  "key": "eqvsq",
-                  "type": "unstyled",
-                  "text": "",
-                  "characterList": Immutable.List [],
-                  "depth": 0,
-                  "data": Immutable.Map {},
-                },
-              },
-              "selectionBefore": Immutable.Record {
-                "anchorKey": "eqvsq",
-                "anchorOffset": 0,
-                "focusKey": "eqvsq",
-                "focusOffset": 0,
-                "isBackward": false,
-                "hasFocus": false,
-              },
-              "selectionAfter": Immutable.Record {
-                "anchorKey": "eqvsq",
-                "anchorOffset": 0,
-                "focusKey": "eqvsq",
-                "focusOffset": 0,
-                "isBackward": false,
-                "hasFocus": false,
-              },
-            },
-            "decorator": null,
-            "directionMap": Immutable.OrderedMap {
-              "eqvsq": "LTR",
-            },
-            "forceSelection": false,
-            "inCompositionMode": false,
-            "inlineStyleOverride": null,
-            "lastChangeType": null,
-            "nativelyRenderedContent": null,
-            "redoStack": Immutable.Stack [],
-            "selection": Immutable.Record {
-              "anchorKey": "eqvsq",
-              "anchorOffset": 0,
-              "focusKey": "eqvsq",
-              "focusOffset": 0,
-              "isBackward": false,
-              "hasFocus": false,
-            },
-            "treeMap": Immutable.OrderedMap {
-              "eqvsq": Immutable.List [
-                Immutable.Record {
-                  "start": 0,
-                  "end": 0,
-                  "decoratorKey": null,
-                  "leaves": Immutable.List [
-                    Immutable.Record {
-                      "start": 0,
-                      "end": 0,
-                    },
-                  ],
-                },
-              ],
-            },
-            "undoStack": Immutable.Stack [],
-          },
-        }
-      }
-      handleKeyCommand={[Function]}
-      onChange={[Function]}
-      onWordClick={[Function]}
-      setEditorNewContentState={[Function]}
-      stripPastedStyles={true}
-    />
-  </section>
-</section>
-`;
diff --git a/packages/components/timed-text-editor/index.js b/packages/components/timed-text-editor/index.js
index 830169f8..1a2c9286 100644
--- a/packages/components/timed-text-editor/index.js
+++ b/packages/components/timed-text-editor/index.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import CustomEditor from './CustomEditor';
+import WrapperBlock from './WrapperBlock';
 
 import {
+  Editor,
   EditorState,
   CompositeDecorator,
   convertFromRaw,
@@ -510,6 +511,22 @@ class TimedTextEditor extends React.Component {
     this.props.onWordClick(e);
   }
 
+  renderBlockWithTimecodes = () => {
+    return {
+      component: WrapperBlock,
+      editable: true,
+      props: {
+        showSpeakers: this.props.showSpeakers,
+        showTimecodes: this.props.showTimecodes,
+        timecodeOffset: this.props.timecodeOffset,
+        editorState: this.state.editorState,
+        setEditorNewContentState: this.setEditorNewContentState,
+        onWordClick: this.handleWordClick,
+        handleAnalyticsEvents: this.props.handleAnalyticsEvents
+      }
+    };
+  }
+
   render() {
     // console.log('render TimedTextEditor');
     const currentWord = this.getCurrentWord();
@@ -521,7 +538,7 @@ class TimedTextEditor extends React.Component {
     const time = Math.round(this.props.currentTime * 4.0) / 4.0;
 
     const editor = (
-      <section
+      <section data-testid="section-editor"
         className={ style.editor }
         onDoubleClick={ this.handleDoubleClick }
         // TODO: decide if on mobile want to have a way to "click" on words
@@ -529,32 +546,28 @@ class TimedTextEditor extends React.Component {
         // a double tap would be the ideal solution
         // onTouchStart={ event => this.handleDoubleClick(event) }
       >
-        <style scoped>
+        <style scoped data-testid="section-style">
           {`span.Word[data-start="${ currentWord.start }"] { background-color: ${ highlightColour }; text-shadow: 0 0 0.01px black }`}
           {`span.Word[data-start="${ currentWord.start }"]+span { background-color: ${ highlightColour } }`}
           {`span.Word[data-prev-times~="${ Math.floor(time) }"] { color: ${ unplayedColor } }`}
           {`span.Word[data-prev-times~="${ time }"] { color: ${ unplayedColor } }`}
           {`span.Word[data-confidence="low"] { border-bottom: ${ correctionBorder } }`}
         </style>
-        <CustomEditor
+        <Editor data-testid="custom-editor"
           editorState={ this.state.editorState }
-          onChange={ this.onChange }
+          onChange={ (e) => this.onChange(e) }
           stripPastedStyles
-          handleKeyCommand={ this.handleKeyCommand }
-          customKeyBindingFn={ this.customKeyBindingFn }
+          blockRendererFn={ this.renderBlockWithTimecodes }
+          handleKeyCommand={ (e) => this.handleKeyCommand(e) }
+          keyBindingFn={ this.customKeyBindingFn }
           spellCheck={ this.props.spellCheck }
-          showSpeakers={ this.props.showSpeakers }
-          showTimecodes={ this.props.showTimecodes }
-          timecodeOffset={ this.props.timecodeOffset }
-          setEditorNewContentState={ this.setEditorNewContentState }
-          onWordClick={ this.onWordClick }
-          handleAnalyticsEvents={ this.props.handleAnalyticsEvents }
         />
+
       </section>
     );
 
     return (
-      <section>
+      <section >
         { this.props.transcriptData !== null ? editor : null }
       </section>
     );
diff --git a/packages/components/timed-text-editor/index.test.js b/packages/components/timed-text-editor/index.test.js
index 1af95a13..f38434d8 100644
--- a/packages/components/timed-text-editor/index.test.js
+++ b/packages/components/timed-text-editor/index.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, cleanup } from 'react-testing-library';
+import { render, cleanup, } from 'react-testing-library';
 import TimeTextEditor from './index';
 
 import bbcKaldiTranscript from './stories/fixtures/bbc-kaldi.json';
@@ -28,16 +28,9 @@ const defaultProps = {
 afterEach(cleanup);
 
 describe('TimeTextEditor', () => {
-  it('renders the editor correctly', () => {
-    const { getByText } = render(<TimeTextEditor { ...defaultProps }/>);
-    getByText('');
+  it('renders the editor sections correctly', async () => {
+    const { getByTestId } = render(<TimeTextEditor { ...defaultProps }/>);
+    getByTestId('section-editor');
+    getByTestId('section-style');
   });
-
-  it('realigns the timecodes of text when text is written to');
-  it('realigns the timecodes of text when text is deleted');
-  it('pops up a modal when the speaker is selected');
-  it('edits the speaker');
-  it('underlines the time codes on hover');
-  it('creates a new block of text when the "enter" is inserted');
-
 });
\ No newline at end of file