diff --git a/package.json b/package.json
index ca6a82c09..d34022f30 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@storybook/node-logger": "^6.3.8",
     "@storybook/preset-create-react-app": "^3.2.0",
     "@storybook/react": "^6.3.8",
+    "babel-loader": "8.1.0",
     "postcss": "8.3.6",
     "rollup": "^2.56.3",
     "rollup-plugin-postcss": "^4.0.1",
diff --git a/src/components/callout/callout.test.tsx b/src/components/callout/callout.test.tsx
new file mode 100644
index 000000000..f28d12e08
--- /dev/null
+++ b/src/components/callout/callout.test.tsx
@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { Callout } from ".";
+
+test("It renders content within callout", () => {
+  render(<Callout>Content</Callout>);
+  expect(screen.getByTestId("callout")).toHaveTextContent("Content");
+});
+
+test("It renders title and icon", () => {
+  render(<Callout icon={<div data-testid="icon" />} title="title" />);
+  expect(screen.getByTestId("icon")).toBeInTheDocument();
+  expect(screen.getByText("title")).toBeInTheDocument();
+});
+
+const intents = ["warn", "action", "error", "success"] as [
+  "warn",
+  "action",
+  "error",
+  "success"
+];
+
+intents.map((intent) =>
+  test("Applies class based on intent", () => {
+    render(<Callout intent={intent} />);
+    expect(screen.getByTestId("callout")).toHaveClass(`callout--${intent}`);
+  })
+);
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 000000000..6431bc5fc
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
index f24cd4942..fe365d9f5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "lib": ["dom", "dom.iterable", "ES2020"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "ES2020"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,8 +20,14 @@
     "jsx": "react-jsx",
     "declaration": true,
     "emitDeclarationOnly": true,
-    "declarationDir": "dist/types"
+    "declarationDir": "dist/types",
+    "noEmit": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "**/*.stories.tsx"]
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "**/*.stories.tsx"
+  ]
 }