diff --git a/src/components/fields/MCLRowFormatter.test.tsx b/src/components/fields/MCLRowFormatter.test.tsx
new file mode 100644
index 0000000..3a37356
--- /dev/null
+++ b/src/components/fields/MCLRowFormatter.test.tsx
@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import MCLRowFormatter from './MCLRowFormatter'
+import { MCLContentsType } from './ExceptionFieldTypes';
+import RowType from './RowType';
+
+describe('MCLRowFormatter', () => {
+  it('Renders the formatter correctly', async () => {
+    render(
+      <MCLRowFormatter<MCLContentsType>
+        rowClass='test-classname'
+        rowWidth={1}
+        rowIndex={1}
+        labelStrings={['foo']}
+        cells={[<h1 key='foo'>test</h1>]}
+        rowData={
+          { rowState:
+            { i: 1,
+              name: 'foo',
+              type: RowType.Open,
+              lastRowI: 1,
+              rows: [{
+                i: 1,
+                startDate: undefined,
+                startTime: undefined,
+                endDate: undefined,
+                endTime: undefined
+              }]
+            },
+            name: undefined,
+            status: undefined,
+            startDate: undefined,
+            startTime: undefined,
+            endDate: undefined,
+            endTime: undefined,
+            actions: undefined,
+            isConflicted: false
+          }
+        }
+        rowProps={{} as any}
+      />
+    );
+  
+    expect(await screen.findByRole('heading')).toBeInTheDocument();
+    expect((await screen.findByRole('heading')).textContent).toBe('test');
+    expect((await screen.findByRole('heading')).parentElement?.className).toBe('test-classname');
+  });
+});
diff --git a/src/components/fields/TimeField.test.tsx b/src/components/fields/TimeField.test.tsx
new file mode 100644
index 0000000..2089b60
--- /dev/null
+++ b/src/components/fields/TimeField.test.tsx
@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from 'react'
+import { IntlProvider } from "react-intl";
+import TimeField from "./TimeField";
+import userEvent from "@testing-library/user-event";
+
+describe('TimeField', () => {
+  it('Renders the TimeField correctly', async () => {
+    render(
+      <IntlProvider locale="en">
+        <TimeField
+          display={true}
+          value={undefined}
+          inputRef={() => {}}
+          error={undefined}
+          onBlur={() => {}}
+          onChange={() => {}}
+        />
+      </IntlProvider>
+    );
+
+    expect(await screen.findByRole('textbox')).toBeInTheDocument();
+    expect(await screen.findByRole('textbox')).toHaveValue('');
+  });
+
+  it('Renders nothing when display is false', async () => {
+    render(
+      <IntlProvider locale="en">
+        <TimeField
+          display={false}
+          value='test'
+          inputRef={() => {}}
+          error={undefined}
+          onBlur={() => {}}
+          onChange={() => {}}
+        />
+      </IntlProvider>
+    );
+
+    expect(await screen.queryByRole('textbox')).toBeNull();
+  });
+
+  it('Formatse time correctly', async () => {
+    render(
+      <IntlProvider locale="en">
+        <TimeField
+          display={true}
+          value='12:30:00'
+          inputRef={() => {}}
+          error={undefined}
+          onBlur={() => {}}
+          onChange={() => {}}
+        />
+      </IntlProvider>
+    );
+
+    expect(await screen.findByRole('textbox')).toHaveValue('12:30 PM');
+  });
+});