diff --git a/package-lock.json b/package-lock.json
index d3f2218d3f2..0496d3a9b61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44966,6 +44966,7 @@
         "@mongodb-js/eslint-config-compass": "^1.4.0",
         "@mongodb-js/mocha-config-compass": "^1.6.8",
         "@mongodb-js/prettier-config-compass": "^1.2.8",
+        "@mongodb-js/testing-library-compass": "^1.3.3",
         "@mongodb-js/tsconfig-compass": "^1.2.8",
         "@types/chai": "^4.2.21",
         "@types/mocha": "^9.0.0",
@@ -57094,6 +57095,7 @@
         "@mongodb-js/mocha-config-compass": "^1.6.8",
         "@mongodb-js/mongodb-constants": "^0.12.0",
         "@mongodb-js/prettier-config-compass": "^1.2.8",
+        "@mongodb-js/testing-library-compass": "^1.3.3",
         "@mongodb-js/tsconfig-compass": "^1.2.8",
         "@types/chai": "^4.2.21",
         "@types/mocha": "^9.0.0",
diff --git a/packages/compass-editor/package.json b/packages/compass-editor/package.json
index 0f6e920aff5..3d26791beb1 100644
--- a/packages/compass-editor/package.json
+++ b/packages/compass-editor/package.json
@@ -49,6 +49,7 @@
     "@mongodb-js/eslint-config-compass": "^1.4.0",
     "@mongodb-js/mocha-config-compass": "^1.6.8",
     "@mongodb-js/prettier-config-compass": "^1.2.8",
+    "@mongodb-js/testing-library-compass": "^1.3.3",
     "@mongodb-js/tsconfig-compass": "^1.2.8",
     "@types/chai": "^4.2.21",
     "@types/mocha": "^9.0.0",
diff --git a/packages/compass-editor/src/editor.spec.tsx b/packages/compass-editor/src/editor.spec.tsx
new file mode 100644
index 00000000000..f6000e7aff3
--- /dev/null
+++ b/packages/compass-editor/src/editor.spec.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { render, userEvent } from '@mongodb-js/testing-library-compass';
+import { CodemirrorInlineEditor } from './editor';
+import type { EditorRef } from './types';
+import { expect } from 'chai';
+
+function renderCodemirrorInlineEditor(text: string) {
+  const editorRef = React.createRef<EditorRef>();
+  render(<CodemirrorInlineEditor text={text} ref={editorRef} />);
+  return editorRef;
+}
+
+describe('Editor', function () {
+  context('CodemirrorInlineEditor', function () {
+    let editorRef: React.RefObject<EditorRef>;
+    beforeEach(function () {
+      editorRef = renderCodemirrorInlineEditor('{}');
+
+      const lines = document.querySelectorAll('.cm-line');
+      expect(lines.length).to.equal(1);
+      expect(lines[0].textContent).to.equal('{}');
+      editorRef.current?.focus();
+    });
+
+    it('renders multi lines on {enter}', function () {
+      userEvent.keyboard('{arrowright}');
+      userEvent.keyboard('{enter}');
+
+      const lines = document.querySelectorAll('.cm-line');
+      // On enter, the editor is split into three lines:
+      // 1. The opening brace
+      // 2. An empty line - to allow for new content
+      // 3. The closing brace
+      expect(lines.length).to.equal(3);
+      expect(lines[0].textContent).to.equal('{');
+      expect(lines[1].textContent?.trim()).to.equal('');
+      expect(lines[2].textContent).to.equal('}');
+
+      // 2 new line characters as it it allows for new content to be added
+      // between the opening and closing braces. and it also correctly
+      // indents the cursor position with (2) spaces.
+      expect(editorRef.current?.editorContents).to.equal('{\n  \n}');
+    });
+
+    it('renders multi lines on {shift}+{enter}', function () {
+      userEvent.keyboard('{arrowright}');
+      userEvent.keyboard('{shift}{enter}');
+
+      const lines = document.querySelectorAll('.cm-line');
+      expect(lines.length).to.equal(3);
+      expect(lines[0].textContent).to.equal('{');
+      expect(lines[1].textContent?.trim()).to.equal('');
+      expect(lines[2].textContent).to.equal('}');
+
+      expect(editorRef.current?.editorContents).to.equal('{\n  \n}');
+    });
+  });
+});