diff --git a/components/graphql/__types__/field.spec.js b/components/graphql/__types__/field.spec.js
new file mode 100644
index 00000000000..ee825ff1faa
--- /dev/null
+++ b/components/graphql/__types__/field.spec.js
@@ -0,0 +1,169 @@
+import field from "../field"
+import { shallowMount } from "@vue/test-utils"
+
+const gqlField = {
+  name: "testField",
+  args: [
+    {
+      name: "arg1",
+      type: "Arg1Type",
+    },
+    {
+      name: "arg2",
+      type: "Arg2type",
+    },
+  ],
+  type: "FieldType",
+  description: "TestDescription",
+}
+
+const factory = (props) =>
+  shallowMount(field, {
+    propsData: props,
+    stubs: {
+      typelink: {
+        template: "<span>Typelink</span>",
+      },
+    },
+    mocks: {
+      $t: (text) => text,
+    },
+  })
+
+describe("field", () => {
+  test("mounts properly if props are given", () => {
+    const wrapper = factory({
+      gqlField,
+    })
+
+    expect(wrapper).toBeTruthy()
+  })
+
+  test("field title is set correctly for fields with no args", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: undefined,
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField : Typelink")
+  })
+
+  test("field title is correctly given for fields with single arg", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink ) : Typelink")
+  })
+
+  test("field title is correctly given for fields with multiple args", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink ) : Typelink")
+  })
+
+  test("all typelinks are passed the jump callback", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        args: [
+          {
+            name: "arg1",
+            type: "Arg1Type",
+          },
+          {
+            name: "arg2",
+            type: "Arg2Type",
+          },
+        ],
+      },
+    })
+
+    expect(
+      wrapper
+        .find(".field-title")
+        .text()
+        .replace(/[\r\n]+/g, "")
+        .replace(/  +/g, " ")
+    ).toEqual("testField ( arg1: Typelink , arg2: Typelink ) : Typelink")
+  })
+
+  test("description is rendered when it is present", () => {
+    const wrapper = factory({
+      gqlField,
+    })
+
+    expect(wrapper.find(".field-desc").text()).toEqual("TestDescription")
+  })
+
+  test("description not rendered when it is not present", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        description: undefined,
+      },
+    })
+
+    expect(wrapper.find(".field-desc").exists()).toEqual(false)
+  })
+
+  test("deprecation warning is displayed when field is deprecated", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        isDeprecated: true,
+      },
+    })
+
+    expect(wrapper.find(".field-deprecated").exists()).toEqual(true)
+  })
+
+  test("deprecation warning is not displayed wwhen field is not deprecated", () => {
+    const wrapper = factory({
+      gqlField: {
+        ...gqlField,
+        isDeprecated: false,
+      },
+    })
+
+    expect(wrapper.find(".field-deprecated").exists()).toEqual(false)
+  })
+})