diff --git a/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
index be12a6d5ee..0af1599feb 100644
--- a/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
+++ b/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
@@ -7,15 +7,23 @@ describe('CodeEditor', () => {
     document.body.createTextRange = jest.fn();
   });
 
+  it('should pass value and mode through to ace editor', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <CodeEditor value={'---\nfoo: bar'} onChange={onChange} mode="yaml" />
+    );
+    const aceEditor = wrapper.find('AceEditor');
+    expect(aceEditor.prop('mode')).toEqual('yaml');
+    expect(aceEditor.prop('setOptions').readOnly).toEqual(false);
+    expect(aceEditor.prop('value')).toEqual('---\nfoo: bar');
+  });
+
   it('should trigger onChange prop', () => {
     const onChange = jest.fn();
     const wrapper = mount(
       <CodeEditor value="---" onChange={onChange} mode="yaml" />
     );
     const aceEditor = wrapper.find('AceEditor');
-    expect(aceEditor.prop('mode')).toEqual('yaml');
-    expect(aceEditor.prop('setOptions').readOnly).toEqual(false);
-    expect(aceEditor.prop('value')).toEqual('---');
     aceEditor.prop('onChange')('newvalue');
     expect(onChange).toHaveBeenCalledWith('newvalue');
   });
diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx
index d1048ef4d1..e07ff9d40b 100644
--- a/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx
+++ b/awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx
@@ -22,8 +22,8 @@ describe('VariablesField', () => {
     expect(codeEditor.prop('value')).toEqual(value);
   });
 
-  it('should render yaml/json toggles', async () => {
-    const value = '---\n';
+  it('should toggle between yaml/json', async () => {
+    const value = '---\nfoo: bar\nbaz: 3';
     const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }}>
         {() => (
@@ -40,7 +40,9 @@ describe('VariablesField', () => {
     });
     wrapper.update();
     expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript');
-    expect(wrapper.find('CodeEditor').prop('value')).toEqual('{}');
+    expect(wrapper.find('CodeEditor').prop('value')).toEqual(
+      '{\n  "foo": "bar",\n  "baz": 3\n}'
+    );
     const buttons2 = wrapper.find('Button');
     expect(buttons2.at(0).prop('variant')).toEqual('secondary');
     expect(buttons2.at(1).prop('variant')).toEqual('primary');
@@ -49,6 +51,9 @@ describe('VariablesField', () => {
     });
     wrapper.update();
     expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml');
+    expect(wrapper.find('CodeEditor').prop('value')).toEqual(
+      'foo: bar\nbaz: 3\n'
+    );
   });
 
   it('should set Formik error if yaml is invalid', async () => {