diff --git a/src/components/field/_macro.spec.js b/src/components/field/_macro.spec.js
index cebb44ef82..6c7667089e 100644
--- a/src/components/field/_macro.spec.js
+++ b/src/components/field/_macro.spec.js
@@ -5,91 +5,128 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_FIELD_BASIC = {
-    id: 'example-field',
-};
-
-describe('macro: field', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
+describe('FOR: Macro: Field', () => {
+    describe('GIVEN: Params: none', () => {
+        describe('WHEN: no params are provided', () => {
+            const $ = cheerio.load(renderComponent('field'));
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+        });
     });
 
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC));
-
-        expect($('.ons-field').attr('id')).toBe('example-field');
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    id: 'example-field',
+                }),
+            );
+            test('THEN: renders with the provided id', () => {
+                expect($('.ons-field').attr('id')).toBe('example-field');
+            });
+        });
     });
 
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
-
-        expect($('.ons-field').hasClass('extra-class')).toBe(true);
-        expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: additional style classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
+            test('THEN: renders with provided classes', () => {
+                expect($('.ons-field').hasClass('extra-class')).toBe(true);
+                expect($('.ons-field').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('has correct class when `inline` is provided', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                inline: true,
-            }),
-        );
-
-        expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
+    describe('GIVEN: Params: inline', () => {
+        describe('WHEN: inline is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    inline: true,
+                }),
+            );
+            test('THEN: renders with the inline class', () => {
+                expect($('.ons-field').hasClass('ons-field--inline')).toBe(true);
+            });
+        });
     });
 
-    it('has additionally provided `attributes`', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                attributes: {
-                    a: 123,
-                    b: 456,
-                },
-            }),
-        );
-
-        expect($('.ons-field').attr('a')).toBe('123');
-        expect($('.ons-field').attr('b')).toBe('456');
+    describe('GIVEN: Params: attributes', () => {
+        describe('WHEN: custom attributes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                }),
+            );
+            test('THEN: renders with additionally provided attributes', () => {
+                expect($('.ons-field').attr('a')).toBe('123');
+                expect($('.ons-field').attr('b')).toBe('456');
+            });
+        });
     });
 
-    it('has the correct element with `dontWrap`', () => {
-        const $ = cheerio.load(
-            renderComponent('field', {
-                ...EXAMPLE_FIELD_BASIC,
-                dontWrap: true,
-            }),
-        );
-
-        expect($('.ons-field').length).toBe(0);
-    });
+    describe('GIVEN: Params: dontWrap', () => {
+        describe('WHEN: dontWrap is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    dontWrap: true,
+                }),
+            );
+            test('THEN: renders the content without being wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(0);
+            });
+        });
 
-    it('calls with content', () => {
-        const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
+        describe('WHEN: dontWrap is set to false', () => {
+            const $ = cheerio.load(
+                renderComponent('field', {
+                    dontWrap: false,
+                }),
+            );
+            test('THEN: renders the content wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(1);
+            });
+        });
 
-        const content = $('.ons-field').html().trim();
-        expect(content).toEqual(expect.stringContaining('Example content...'));
+        describe('WHEN: dontWrap is not provided', () => {
+            const $ = cheerio.load(renderComponent('field', {}));
+            test('THEN: renders the content wrapped in a field div', () => {
+                expect($('.ons-field').length).toBe(1);
+            });
+        });
     });
 
-    it('calls the error component when `error` is provided', () => {
-        const faker = templateFaker();
-        const errorSpy = faker.spy('error');
-
-        faker.renderComponent('field', {
-            ...EXAMPLE_FIELD_BASIC,
-            error: { text: 'There is an error' },
+    describe('GIVEN: Params: error', () => {
+        describe('WHEN: error is provided', () => {
+            const faker = templateFaker();
+            const errorSpy = faker.spy('error');
+
+            faker.renderComponent('field', {
+                error: { text: 'There is an error' },
+            });
+            test('THEN" calls the error component', () => {
+                expect(errorSpy.occurrences[0]).toEqual({
+                    text: 'There is an error',
+                });
+            });
         });
+    });
 
-        expect(errorSpy.occurrences[0]).toEqual({
-            text: 'There is an error',
+    describe('GIVEN: Content', () => {
+        describe('WHEN: field is called with content provided', () => {
+            const $ = cheerio.load(renderComponent('field', {}, 'Example content...'));
+            const content = $('.ons-field').html().trim();
+            test('THEN: renders the field with the provided content', () => {
+                expect(content).toEqual(expect.stringContaining('Example content...'));
+            });
         });
     });
 });