From 1191f82c643356a3ff5729edc81ef0b501f81edc Mon Sep 17 00:00:00 2001
From: Matt Phillips <matt@mattphillips.io>
Date: Wed, 31 Aug 2022 11:21:15 +0100
Subject: [PATCH] feat(SandpackTests): Add SandpackTests component (#562)

Co-authored-by: Danilo Woznica <danilowoz@gmail.com>
---
 .codesandbox/tasks.json                       |  10 +-
 cypress/integration/Templates.spec.js         |   2 +
 sandpack-client/src/types.ts                  | 120 +++++
 sandpack-react/.storybook/main.css            |  26 +
 sandpack-react/package.json                   |   1 +
 sandpack-react/src/Playground.stories.tsx     |  82 +++-
 .../OpenInCodeSandboxButton.tsx               |   4 +-
 sandpack-react/src/common/RunButton.tsx       |   4 +-
 sandpack-react/src/common/Stack.tsx           |   4 +
 .../src/components/CodeEditor/index.tsx       |   2 +-
 .../src/components/Console/Button.tsx         |   4 +-
 .../src/components/Console/Header.tsx         |   1 +
 .../src/components/FileExplorer/index.tsx     |   2 +-
 .../src/components/FileTabs/index.tsx         |   2 +-
 .../src/components/Navigator/index.tsx        |  34 +-
 .../src/components/Preview/RefreshButton.tsx  |   4 +-
 .../src/components/Preview/index.tsx          |  45 +-
 .../src/components/Tests/Describes.tsx        |  50 ++
 .../src/components/Tests/FormattedError.tsx   | 136 ++++++
 .../src/components/Tests/Header.tsx           | 107 ++++
 .../src/components/Tests/RunButton.tsx        |  33 ++
 .../src/components/Tests/SandpackTests.tsx    | 455 ++++++++++++++++++
 sandpack-react/src/components/Tests/Specs.tsx | 205 ++++++++
 .../src/components/Tests/Summary.tsx          |  97 ++++
 .../src/components/Tests/Tests.stories.tsx    | 276 +++++++++++
 sandpack-react/src/components/Tests/Tests.tsx |  80 +++
 sandpack-react/src/components/Tests/index.tsx |   1 +
 sandpack-react/src/components/Tests/style.ts  |  39 ++
 sandpack-react/src/components/Tests/utils.ts  |  85 ++++
 sandpack-react/src/components/index.ts        |   1 +
 sandpack-react/src/hooks/index.ts             |   1 +
 sandpack-react/src/hooks/useSandpackClient.ts |  60 +++
 .../src/presets/Sandpack.stories.tsx          |  18 +
 sandpack-react/src/presets/Sandpack.test.tsx  |   2 +-
 sandpack-react/src/presets/Sandpack.tsx       |  63 ++-
 .../styles/__snapshots__/styles.test.ts.snap  |   1 +
 sandpack-react/src/styles/index.ts            |   2 +-
 sandpack-react/src/styles/shared.ts           |  12 +-
 .../src/templates/Templates.stories.tsx       |   5 +-
 sandpack-react/src/templates/angular.ts       |   2 +-
 sandpack-react/src/templates/index.tsx        |   3 +
 .../src/templates/react-typescript.ts         |   2 +-
 sandpack-react/src/templates/react.ts         |   2 +-
 sandpack-react/src/templates/solid.ts         |   2 +-
 sandpack-react/src/templates/svelte.ts        |   2 +-
 sandpack-react/src/templates/tests-ts.ts      |  40 ++
 .../src/templates/vanilla-typescript.ts       |   2 +-
 sandpack-react/src/templates/vanilla.ts       |   2 +-
 sandpack-react/src/templates/vue.ts           |   2 +-
 sandpack-react/src/templates/vue3.ts          |   2 +-
 sandpack-react/src/types.ts                   |   1 +
 .../docs/docs/advanced-usage/components.md    | 181 +++++--
 website/docs/docs/advanced-usage/hooks.md     |  20 +-
 website/docs/docs/intro.md                    |   6 +-
 yarn.lock                                     |   5 +
 55 files changed, 2190 insertions(+), 160 deletions(-)
 create mode 100644 sandpack-react/src/components/Tests/Describes.tsx
 create mode 100644 sandpack-react/src/components/Tests/FormattedError.tsx
 create mode 100644 sandpack-react/src/components/Tests/Header.tsx
 create mode 100644 sandpack-react/src/components/Tests/RunButton.tsx
 create mode 100644 sandpack-react/src/components/Tests/SandpackTests.tsx
 create mode 100644 sandpack-react/src/components/Tests/Specs.tsx
 create mode 100644 sandpack-react/src/components/Tests/Summary.tsx
 create mode 100644 sandpack-react/src/components/Tests/Tests.stories.tsx
 create mode 100644 sandpack-react/src/components/Tests/Tests.tsx
 create mode 100644 sandpack-react/src/components/Tests/index.tsx
 create mode 100644 sandpack-react/src/components/Tests/style.ts
 create mode 100644 sandpack-react/src/components/Tests/utils.ts
 create mode 100644 sandpack-react/src/hooks/useSandpackClient.ts
 create mode 100644 sandpack-react/src/templates/tests-ts.ts

diff --git a/.codesandbox/tasks.json b/.codesandbox/tasks.json
index fd00b0e6b..b91a9d0dd 100644
--- a/.codesandbox/tasks.json
+++ b/.codesandbox/tasks.json
@@ -46,14 +46,18 @@
       "command": "yarn workspace @codesandbox/sandpack-react build"
     },
     "dev:website-docs": {
-      "name": "Website docs",
+      "name": "Documentation",
       "command": "yarn dev:docs",
       "runAtStart": false
     },
     "dev:sandpack-react": {
       "name": "Storybook",
       "command": "yarn dev:react",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 6006,
+        "pr-link": "direct"
+      }
     },
     "dev:website-landing": {
       "name": "Website landing",
@@ -66,4 +70,4 @@
       "runAtStart": false
     }
   }
-}
\ No newline at end of file
+}
diff --git a/cypress/integration/Templates.spec.js b/cypress/integration/Templates.spec.js
index 409a5eb15..1c5b929c8 100644
--- a/cypress/integration/Templates.spec.js
+++ b/cypress/integration/Templates.spec.js
@@ -20,6 +20,8 @@ const getIframeBody = () => {
 
 describe("Templates", () => {
   Object.keys(SANDBOX_TEMPLATES).forEach((template) => {
+    if (template === "test-ts") return null; // tests there is no preview
+
     it(`Should run the ${template} template`, () => {
       accessPage(template);
 
diff --git a/sandpack-client/src/types.ts b/sandpack-client/src/types.ts
index 7d71ba9c2..81d81fc03 100644
--- a/sandpack-client/src/types.ts
+++ b/sandpack-client/src/types.ts
@@ -169,6 +169,125 @@ export interface NpmRegistry {
   registryAuthToken?: string;
 }
 
+type TestStatus = "running" | "pass" | "fail";
+
+export type TestError = Error & {
+  matcherResult?: boolean;
+  mappedErrors?: Array<{
+    fileName: string;
+    _originalFunctionName: string;
+    _originalColumnNumber: number;
+    _originalLineNumber: number;
+    _originalScriptCode: Array<{
+      lineNumber: number;
+      content: string;
+      highlight: boolean;
+    }> | null;
+  }>;
+};
+
+export interface Test {
+  name: string;
+  blocks: string[];
+  status: TestStatus;
+  path: string;
+  errors: TestError[];
+  duration?: number | undefined;
+}
+
+export type SandboxTestMessage =
+  | RunAllTests
+  | RunTests
+  | ClearJestErrors
+  | ({ type: "test" } & (
+      | InitializedTestsMessage
+      | TestCountMessage
+      | TotalTestStartMessage
+      | TotalTestEndMessage
+      | AddFileMessage
+      | RemoveFileMessage
+      | FileErrorMessage
+      | DescribeStartMessage
+      | DescribeEndMessage
+      | AddTestMessage
+      | TestStartMessage
+      | TestEndMessage
+    ));
+
+interface InitializedTestsMessage {
+  event: "initialize_tests";
+}
+
+interface ClearJestErrors {
+  type: "action";
+  action: "clear-errors";
+  source: "jest";
+  path: string;
+}
+
+interface TestCountMessage {
+  event: "test_count";
+  count: number;
+}
+
+interface TotalTestStartMessage {
+  event: "total_test_start";
+}
+
+interface TotalTestEndMessage {
+  event: "total_test_end";
+}
+
+interface AddFileMessage {
+  event: "add_file";
+  path: string;
+}
+
+interface RemoveFileMessage {
+  event: "remove_file";
+  path: string;
+}
+
+interface FileErrorMessage {
+  event: "file_error";
+  path: string;
+  error: TestError;
+}
+
+interface DescribeStartMessage {
+  event: "describe_start";
+  blockName: string;
+}
+
+interface DescribeEndMessage {
+  event: "describe_end";
+}
+
+interface AddTestMessage {
+  event: "add_test";
+  testName: string;
+  path: string;
+}
+
+interface TestStartMessage {
+  event: "test_start";
+  test: Test;
+}
+
+interface TestEndMessage {
+  event: "test_end";
+  test: Test;
+}
+
+interface RunAllTests {
+  type: "run-all-tests";
+}
+
+interface RunTests {
+  type: "run-tests";
+  path: string;
+}
+
 export type SandpackMessage = BaseSandpackMessage &
   (
     | {
@@ -258,6 +377,7 @@ export type SandpackMessage = BaseSandpackMessage &
           data: string[];
         }>;
       }
+    | SandboxTestMessage
   );
 
 export type Template =
diff --git a/sandpack-react/.storybook/main.css b/sandpack-react/.storybook/main.css
index ef488d1f1..56bcca3f0 100644
--- a/sandpack-react/.storybook/main.css
+++ b/sandpack-react/.storybook/main.css
@@ -10,3 +10,29 @@ p {
   margin: 0;
   margin-bottom: 0.3em;
 }
+
+.playground-grid {
+  display: grid;
+  grid-template-columns: 200px 400px 400px;
+  grid-template-rows: repeat(2, 250px);
+  gap: 1px;
+}
+
+.playground-grid .sp-file-explorer {
+  grid-area: 1 / 1 / 3 / 2;
+}
+
+.playground-grid .sp-editor {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+.playground-grid .sp-previe {
+  grid-area: 1 / 3 / 2 / 4;
+}
+
+.playground-grid .sp-consol {
+  grid-area: 2 / 2 / 3 / 3;
+}
+.playground-grid .sp-tests {
+  grid-area: 2 / 3 / 3 / 4;
+}
diff --git a/sandpack-react/package.json b/sandpack-react/package.json
index 9bf60ec34..e729f8c84 100644
--- a/sandpack-react/package.json
+++ b/sandpack-react/package.json
@@ -51,6 +51,7 @@
     "@codesandbox/sandpack-client": "^1.5.4",
     "@react-hook/intersection-observer": "^3.1.1",
     "@stitches/core": "^1.2.6",
+    "clean-set": "^1.1.2",
     "codesandbox-import-util-types": "^2.2.3",
     "lodash.isequal": "^4.5.0",
     "lz-string": "^1.4.4",
diff --git a/sandpack-react/src/Playground.stories.tsx b/sandpack-react/src/Playground.stories.tsx
index fe6988faa..a8f969d41 100644
--- a/sandpack-react/src/Playground.stories.tsx
+++ b/sandpack-react/src/Playground.stories.tsx
@@ -12,6 +12,7 @@ import {
   SandpackLayout,
   SandpackFileExplorer,
   SandpackConsole,
+  SandpackTests,
 } from "./";
 
 export default {
@@ -25,21 +26,22 @@ export const Main = (): JSX.Element => {
       Editor: true,
       FileExplorer: true,
       Console: true,
+      Tests: true,
     },
     Options: {
       showTabs: true,
       showLineNumbers: true,
       showInlineErrors: true,
       closableTabs: true,
-      wrapContent: true,
+      wrapContent: false,
       readOnly: false,
       showReadOnly: true,
       showNavigator: true,
       showRefreshButton: true,
       consoleShowHeader: true,
     },
-    Template: "react" as const,
-    Theme: "auto",
+    Template: "exhaustedFilesTests" as const,
+    Theme: "light",
   });
 
   const update = (key: any, value: any): void => {
@@ -80,6 +82,9 @@ export const Main = (): JSX.Element => {
                     }
                     value={config.Template}
                   >
+                    <option value="exhaustedFilesTests">
+                      exhaustedFilesTests
+                    </option>
                     {Object.keys(SANDBOX_TEMPLATES).map((tem) => (
                       <option value={tem}>{tem}</option>
                     ))}
@@ -135,25 +140,68 @@ export const Main = (): JSX.Element => {
       </div>
 
       <SandpackProvider
-        template={config.Template}
+        customSetup={{
+          dependencies:
+            config.Template === "exhaustedFilesTests"
+              ? exhaustedFilesTests.dependencies
+              : {},
+        }}
+        files={
+          config.Template === "exhaustedFilesTests"
+            ? exhaustedFilesTests.files
+            : {}
+        }
+        template={
+          config.Template === "exhaustedFilesTests" ? null : config.Template
+        }
         theme={themes[config.Theme] || config.Theme}
       >
         <SandpackLayout>
-          {config.Components.FileExplorer && <SandpackFileExplorer />}
-          {config.Components.Editor && (
-            <SandpackCodeEditor {...codeEditorOptions} />
-          )}
-          {config.Components.Preview && (
-            <SandpackPreview
-              showNavigator={config.Options?.showNavigator}
-              showRefreshButton={config.Options?.showRefreshButton}
-            />
-          )}
-          {config.Components.Console && (
-            <SandpackConsole showHeader={config.Options.consoleShowHeader} />
-          )}
+          <div className="playground-grid">
+            {config.Components.FileExplorer && <SandpackFileExplorer />}
+            {config.Components.Editor && (
+              <SandpackCodeEditor {...codeEditorOptions} />
+            )}
+            {config.Components.Preview && (
+              <SandpackPreview
+                showNavigator={config.Options?.showNavigator}
+                showRefreshButton={config.Options?.showRefreshButton}
+              />
+            )}
+
+            {config.Components.Console && (
+              <SandpackConsole showHeader={config.Options.consoleShowHeader} />
+            )}
+            {config.Components.Tests && <SandpackTests />}
+          </div>
         </SandpackLayout>
       </SandpackProvider>
     </div>
   );
 };
+
+const defaultTemplate = SANDBOX_TEMPLATES["react-ts"];
+
+const exhaustedFilesTests = {
+  ...defaultTemplate,
+  dependencies: {
+    ...defaultTemplate.dependencies,
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+  },
+  files: {
+    "/src/index.tsx": SANDBOX_TEMPLATES["react-ts"].files["/index.tsx"],
+    "/src/App.tsx": `console.log("Hello world");\n\n${SANDBOX_TEMPLATES["react-ts"].files["/App.tsx"].code}`,
+    "/src/App.test.tsx": `import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders welcome message', () => {
+  render(<App />);
+  expect(screen.getByText('Hello World')).toBeInTheDocument();
+});`,
+    "/src/styles.css": SANDBOX_TEMPLATES["react-ts"].files["/styles.css"],
+    "/package.json": JSON.stringify({ main: "/src/index.tsx" }),
+  },
+};
diff --git a/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx b/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
index 6cd0bc692..7a5615403 100644
--- a/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
+++ b/sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx
@@ -6,7 +6,7 @@ import { THEME_PREFIX } from "../../styles";
 import {
   buttonClassName,
   iconStandaloneClassName,
-  actionButtonClassName,
+  roundedButtonClassName,
 } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
 
@@ -24,7 +24,7 @@ export const OpenInCodeSandboxButton = (): JSX.Element | null => {
         c("button", "icon-standalone"),
         buttonClassName,
         iconStandaloneClassName,
-        actionButtonClassName
+        roundedButtonClassName
       )}
     >
       <ExportIcon />
diff --git a/sandpack-react/src/common/RunButton.tsx b/sandpack-react/src/common/RunButton.tsx
index 956c8a459..27db5e91e 100644
--- a/sandpack-react/src/common/RunButton.tsx
+++ b/sandpack-react/src/common/RunButton.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { useSandpack } from "../hooks/useSandpack";
 import { RunIcon } from "../icons";
 import { css, THEME_PREFIX } from "../styles";
-import { actionButtonClassName, buttonClassName } from "../styles/shared";
+import { roundedButtonClassName, buttonClassName } from "../styles/shared";
 import { classNames } from "../utils/classNames";
 
 const runButtonClassName = css({
@@ -30,7 +30,7 @@ export const RunButton = ({
       className={classNames(
         c("button"),
         buttonClassName,
-        actionButtonClassName,
+        roundedButtonClassName,
         runButtonClassName,
         className
       )}
diff --git a/sandpack-react/src/common/Stack.tsx b/sandpack-react/src/common/Stack.tsx
index 8800096b1..8cbc7c098 100644
--- a/sandpack-react/src/common/Stack.tsx
+++ b/sandpack-react/src/common/Stack.tsx
@@ -15,6 +15,10 @@ export const stackClassName = css({
   backgroundColor: "$colors$surface1",
   transition: "height $transitions$default",
   gap: 1, // border between components
+
+  [`&:has(.${THEME_PREFIX}-stack)`]: {
+    backgroundColor: "$colors$surface2",
+  },
 });
 
 /**
diff --git a/sandpack-react/src/components/CodeEditor/index.tsx b/sandpack-react/src/components/CodeEditor/index.tsx
index aeb784a8a..dec46c8ac 100644
--- a/sandpack-react/src/components/CodeEditor/index.tsx
+++ b/sandpack-react/src/components/CodeEditor/index.tsx
@@ -104,7 +104,7 @@ export const SandpackCodeEditor = React.forwardRef<
     };
 
     return (
-      <SandpackStack style={style}>
+      <SandpackStack className={c("editor")} style={style}>
         {shouldShowTabs && <FileTabs closableTabs={closableTabs} />}
 
         <div className={classNames(c("code-editor"), editorClassName)}>
diff --git a/sandpack-react/src/components/Console/Button.tsx b/sandpack-react/src/components/Console/Button.tsx
index aacc9d1dc..745e9b595 100644
--- a/sandpack-react/src/components/Console/Button.tsx
+++ b/sandpack-react/src/components/Console/Button.tsx
@@ -6,7 +6,7 @@ import { css } from "../../styles";
 import {
   buttonClassName,
   iconStandaloneClassName,
-  actionButtonClassName,
+  roundedButtonClassName,
 } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
 
@@ -19,7 +19,7 @@ export const Button: React.FC<{ onClick: () => void }> = ({ onClick }) => {
         c("button", "icon-standalone"),
         buttonClassName,
         iconStandaloneClassName,
-        actionButtonClassName,
+        roundedButtonClassName,
         css({
           position: "absolute",
           bottom: "$space$2",
diff --git a/sandpack-react/src/components/Console/Header.tsx b/sandpack-react/src/components/Console/Header.tsx
index ea90b5fed..0b6776665 100644
--- a/sandpack-react/src/components/Console/Header.tsx
+++ b/sandpack-react/src/components/Console/Header.tsx
@@ -11,6 +11,7 @@ export const Header: React.FC = () => {
         css({
           borderBottom: "1px solid $colors$surface2",
           padding: "$space$3 $space$2",
+          height: "$layout$headerHeight",
         })
       )}
     >
diff --git a/sandpack-react/src/components/FileExplorer/index.tsx b/sandpack-react/src/components/FileExplorer/index.tsx
index 70ea9da4a..076631cff 100644
--- a/sandpack-react/src/components/FileExplorer/index.tsx
+++ b/sandpack-react/src/components/FileExplorer/index.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
-import { stackClassName } from "../..";
 
+import { stackClassName } from "../..";
 import { useSandpack } from "../../hooks/useSandpack";
 import { css, THEME_PREFIX } from "../../styles";
 import { classNames } from "../../utils/classNames";
diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx
index 23b78ae21..f556bbe43 100644
--- a/sandpack-react/src/components/FileTabs/index.tsx
+++ b/sandpack-react/src/components/FileTabs/index.tsx
@@ -47,7 +47,7 @@ const closeButtonClassName = css({
  */
 export const tabButton = css({
   padding: "0 $space$2",
-  height: "40px",
+  height: "$layout$headerHeight",
   whiteSpace: "nowrap",
 
   "&:focus": { outline: "none" },
diff --git a/sandpack-react/src/components/Navigator/index.tsx b/sandpack-react/src/components/Navigator/index.tsx
index 3b364b05b..05432e48b 100644
--- a/sandpack-react/src/components/Navigator/index.tsx
+++ b/sandpack-react/src/components/Navigator/index.tsx
@@ -13,9 +13,9 @@ import { splitUrl } from "./utils";
 const navigatorClassName = css({
   display: "flex",
   alignItems: "center",
-  height: "40px",
+  height: "$layout$headerHeight",
   borderBottom: "1px solid $colors$surface2",
-  padding: "$space$2 $space$4",
+  padding: "$space$3 $space$2",
   background: "$colors$surface1",
 });
 
@@ -49,7 +49,7 @@ const inputClassName = css({
  * @category Components
  */
 export interface NavigatorProps {
-  clientId?: string;
+  clientId: string;
   onURLChange?: (newURL: string) => void;
 }
 
@@ -124,6 +124,16 @@ export const Navigator = ({
     dispatch({ type: "urlforward" });
   };
 
+  const buttonsClassNames = classNames(
+    c("button", "icon"),
+    buttonClassName,
+    iconClassName,
+    css({
+      minWidth: "$space$6",
+      justifyContent: "center",
+    })
+  );
+
   return (
     <div
       className={classNames(c("navigator"), navigatorClassName, className)}
@@ -131,11 +141,7 @@ export const Navigator = ({
     >
       <button
         aria-label="Go back one page"
-        className={classNames(
-          c("button", "icon"),
-          buttonClassName,
-          iconClassName
-        )}
+        className={buttonsClassNames}
         disabled={!backEnabled}
         onClick={handleBack}
         type="button"
@@ -144,11 +150,7 @@ export const Navigator = ({
       </button>
       <button
         aria-label="Go forward one page"
-        className={classNames(
-          c("button", "icon"),
-          buttonClassName,
-          iconClassName
-        )}
+        className={buttonsClassNames}
         disabled={!forwardEnabled}
         onClick={handleForward}
         type="button"
@@ -157,11 +159,7 @@ export const Navigator = ({
       </button>
       <button
         aria-label="Refresh page"
-        className={classNames(
-          c("button", "icon"),
-          buttonClassName,
-          iconClassName
-        )}
+        className={buttonsClassNames}
         onClick={handleRefresh}
         type="button"
       >
diff --git a/sandpack-react/src/components/Preview/RefreshButton.tsx b/sandpack-react/src/components/Preview/RefreshButton.tsx
index 9be5e02f0..8f534d264 100644
--- a/sandpack-react/src/components/Preview/RefreshButton.tsx
+++ b/sandpack-react/src/components/Preview/RefreshButton.tsx
@@ -7,7 +7,7 @@ import { THEME_PREFIX } from "../../styles";
 import {
   buttonClassName,
   iconStandaloneClassName,
-  actionButtonClassName,
+  roundedButtonClassName,
 } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
 
@@ -30,7 +30,7 @@ export const RefreshButton = ({
         c("button", "icon-standalone"),
         buttonClassName,
         iconStandaloneClassName,
-        actionButtonClassName
+        roundedButtonClassName
       )}
       onClick={refresh}
       title="Refresh Sandpack"
diff --git a/sandpack-react/src/components/Preview/index.tsx b/sandpack-react/src/components/Preview/index.tsx
index bfb1ff5fc..126f2804d 100644
--- a/sandpack-react/src/components/Preview/index.tsx
+++ b/sandpack-react/src/components/Preview/index.tsx
@@ -9,10 +9,9 @@ import { ErrorOverlay } from "../../common/ErrorOverlay";
 import { LoadingOverlay } from "../../common/LoadingOverlay";
 import { OpenInCodeSandboxButton } from "../../common/OpenInCodeSandboxButton";
 import { SandpackStack } from "../../common/Stack";
-import { useSandpack } from "../../hooks/useSandpack";
+import { useSandpackClient } from "../../hooks";
 import { css, THEME_PREFIX } from "../../styles";
 import { classNames } from "../../utils/classNames";
-import { generateRandomId } from "../../utils/stringUtils";
 import { Navigator } from "../Navigator";
 
 import { RefreshButton } from "./RefreshButton";
@@ -68,7 +67,7 @@ export interface SandpackPreviewRef {
   /**
    * Retrieve the current Sandpack client instance from preview
    */
-  getClient: () => SandpackClient | undefined;
+  getClient: () => SandpackClient | null;
   /**
    * Returns the client id, which will be used to
    * initialize a client in the main Sandpack context
@@ -96,22 +95,19 @@ export const SandpackPreview = React.forwardRef<
     },
     ref
   ) => {
-    const { sandpack, listen } = useSandpack();
+    const { sandpack, listen, iframe, getClient, clientId } =
+      useSandpackClient();
     const [iframeComputedHeight, setComputedAutoHeight] = React.useState<
       number | null
     >(null);
     const {
       status,
-      registerBundler,
-      unregisterBundler,
       errorScreenRegisteredRef,
       openInCSBRegisteredRef,
       loadingScreenRegisteredRef,
     } = sandpack;
 
     const c = useClasser(THEME_PREFIX);
-    const clientId = React.useRef<string>(generateRandomId());
-    const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
 
     // SandpackPreview immediately registers the custom screens/components so the bundler does not render any of them
     openInCSBRegisteredRef.current = true;
@@ -119,42 +115,31 @@ export const SandpackPreview = React.forwardRef<
     loadingScreenRegisteredRef.current = true;
 
     React.useEffect(() => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const iframeElement = iframeRef.current!;
-      const clientIdValue = clientId.current;
-
-      registerBundler(iframeElement, clientIdValue);
-
       const unsubscribe = listen((message: SandpackMessage) => {
         if (message.type === "resize") {
           setComputedAutoHeight(message.height);
         }
-      }, clientIdValue);
+      });
 
-      return (): void => {
-        unsubscribe();
-        unregisterBundler(clientIdValue);
-      };
+      return unsubscribe;
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     React.useImperativeHandle(
       ref,
       () => ({
-        clientId: clientId.current,
-        getClient(): SandpackClient | undefined {
-          return sandpack.clients[clientId.current];
-        },
+        clientId: clientId,
+        getClient,
       }),
-      [sandpack]
+      [getClient, clientId]
     );
 
     const handleNewURL = (newUrl: string): void => {
-      if (!iframeRef.current) {
+      if (!iframe.current) {
         return;
       }
 
-      iframeRef.current.src = newUrl;
+      iframe.current.src = newUrl;
       // eslint-disable-next-line react-hooks/exhaustive-deps
     };
 
@@ -164,12 +149,12 @@ export const SandpackPreview = React.forwardRef<
         {...props}
       >
         {showNavigator && (
-          <Navigator clientId={clientId.current} onURLChange={handleNewURL} />
+          <Navigator clientId={clientId} onURLChange={handleNewURL} />
         )}
 
         <div className={classNames(c("preview-container"), previewClassName)}>
           <iframe
-            ref={iframeRef}
+            ref={iframe}
             className={classNames(c("preview-iframe"), previewIframe)}
             style={{
               // set height based on the content only in auto mode
@@ -189,14 +174,14 @@ export const SandpackPreview = React.forwardRef<
           >
             {actionsChildren}
             {!showNavigator && showRefreshButton && status === "running" && (
-              <RefreshButton clientId={clientId.current} />
+              <RefreshButton clientId={clientId} />
             )}
 
             {showOpenInCodeSandbox && <OpenInCodeSandboxButton />}
           </div>
 
           <LoadingOverlay
-            clientId={clientId.current}
+            clientId={clientId}
             showOpenInCodeSandbox={showOpenInCodeSandbox}
           />
 
diff --git a/sandpack-react/src/components/Tests/Describes.tsx b/sandpack-react/src/components/Tests/Describes.tsx
new file mode 100644
index 000000000..7ce7ae6ab
--- /dev/null
+++ b/sandpack-react/src/components/Tests/Describes.tsx
@@ -0,0 +1,50 @@
+import * as React from "react";
+
+import { css } from "../../styles";
+import { classNames } from "../../utils/classNames";
+
+import type { Test } from "./Tests";
+import { Tests } from "./Tests";
+import { isEmpty } from "./utils";
+
+export interface Describe {
+  name: string;
+  tests: Record<string, Test>;
+  describes: Record<string, Describe>;
+}
+
+const nameClassName = css({
+  color: "$colors$hover",
+  marginBottom: "$space$2",
+});
+
+const containerClassName = css({
+  marginLeft: "$space$4",
+});
+
+export const Describes: React.FC<{ describes: Describe[] }> = ({
+  describes,
+}) => {
+  return (
+    <>
+      {describes.map((describe) => {
+        if (isEmpty(describe)) {
+          return null;
+        }
+
+        const tests = Object.values(describe.tests);
+        const describes = Object.values(describe.describes);
+
+        return (
+          <div key={describe.name} className={classNames(containerClassName)}>
+            <div className={classNames(nameClassName)}>{describe.name}</div>
+
+            <Tests tests={tests} />
+
+            <Describes describes={describes} />
+          </div>
+        );
+      })}
+    </>
+  );
+};
diff --git a/sandpack-react/src/components/Tests/FormattedError.tsx b/sandpack-react/src/components/Tests/FormattedError.tsx
new file mode 100644
index 000000000..32b2770d4
--- /dev/null
+++ b/sandpack-react/src/components/Tests/FormattedError.tsx
@@ -0,0 +1,136 @@
+import type { TestError } from "@codesandbox/sandpack-client";
+import * as React from "react";
+
+import { css } from "../../styles";
+import { classNames } from "../../utils/classNames";
+
+import {
+  failTextClassName,
+  passTextClassName,
+  titleTextClassName,
+} from "./style";
+
+interface Props {
+  error: TestError;
+  path: string;
+}
+
+const containerClassName = css({
+  color: "$colors$hover",
+  fontSize: "$font$size",
+  padding: "$space$2",
+  whiteSpace: "pre-wrap",
+});
+
+export const FormattedError: React.FC<Props> = ({ error, path }) => {
+  return (
+    <div
+      className={classNames(containerClassName)}
+      dangerouslySetInnerHTML={{ __html: formatDiffMessage(error, path) }}
+    />
+  );
+};
+
+const escapeHtml = (unsafe: string): string => {
+  return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+};
+
+const formatDiffMessage = (error: TestError, path: string): string => {
+  let finalMessage = "";
+  if (error.matcherResult) {
+    finalMessage = `<span>${escapeHtml(error.message)
+      .replace(/(expected)/m, `<span class="${passTextClassName}">$1</span>`)
+      .replace(/(received)/m, `<span class="${failTextClassName}">$1</span>`)
+      .replace(/(Difference:)/m, `<span>$1</span>`)
+      .replace(
+        /(Expected:)(.*)/m,
+        `<span>$1</span><span class="${passTextClassName}">$2</span>`
+      )
+      .replace(
+        /(Received:)(.*)/m,
+        `<span>$1</span><span class="${failTextClassName}">$2</span>`
+      )
+      .replace(/^(-.*)/gm, `<span class="${failTextClassName}">$1</span>`)
+      .replace(
+        /^(\+.*)/gm,
+        `<span class="${passTextClassName}">$1</span>`
+      )}</span>`;
+  } else {
+    finalMessage = escapeHtml(error.message);
+  }
+
+  if (
+    error.mappedErrors &&
+    error.mappedErrors[0] &&
+    error.mappedErrors[0].fileName.endsWith(path) &&
+    error.mappedErrors[0]._originalScriptCode
+  ) {
+    const mappedError = error.mappedErrors[0];
+
+    const _originalScriptCode = mappedError._originalScriptCode || [];
+
+    const widestNumber =
+      Math.max(
+        ..._originalScriptCode.map((code) => (code.lineNumber + "").length)
+      ) + 2;
+
+    const margin = Array.from({ length: widestNumber }).map(() => " ");
+
+    finalMessage += "<br />";
+    finalMessage += "<br />";
+    finalMessage += "<div>";
+    _originalScriptCode
+      .filter((s) => s.content.trim())
+      .forEach((code) => {
+        const currentLineMargin = (code.lineNumber + "").length;
+        const newMargin = [...margin];
+        newMargin.length -= currentLineMargin;
+        if (code.highlight) {
+          newMargin.length -= 2;
+        }
+
+        const toBeIndex = code.content.indexOf(".to");
+        const toBeMargin = Array.from(
+          { length: margin.length + toBeIndex - (widestNumber - 1) },
+          () => " "
+        );
+
+        const content = escapeHtml(code.content)
+          .replace(
+            /(describe|test|it)(\()(&#039;|&quot;|`)(.*)(&#039;|&quot;|`)/m,
+            `<span>$1$2$3</span><span class="${titleTextClassName}">$4</span><span>$5</span>`
+          )
+          .replace(
+            /(expect\()(.*)(\)\..*)(to[\w\d]*)(\()(.*)(\))/m,
+            `<span>$1</span><span class="${failTextClassName}">$2</span><span>$3</span><span style="text-decoration: underline; font-weight: 900">$4</span><span>$5</span><span class="${passTextClassName}">$6</span><span>$7</span>`
+          );
+
+        finalMessage +=
+          `<div ${code.highlight ? `style="font-weight:200;"` : ``}>` +
+          (code.highlight
+            ? `<span class="${failTextClassName}">></span> `
+            : "") +
+          newMargin.join("") +
+          escapeHtml("" + code.lineNumber) +
+          " | " +
+          content +
+          "</div>" +
+          (code.highlight
+            ? "<div>" +
+              margin.join("") +
+              " | " +
+              toBeMargin.join("") +
+              `<span class="${failTextClassName}">^</span>` +
+              "</div>"
+            : "");
+      });
+    finalMessage += "</div>";
+  }
+
+  return finalMessage.replace(/(?:\r\n|\r|\n)/g, "<br />");
+};
diff --git a/sandpack-react/src/components/Tests/Header.tsx b/sandpack-react/src/components/Tests/Header.tsx
new file mode 100644
index 000000000..d3ae37616
--- /dev/null
+++ b/sandpack-react/src/components/Tests/Header.tsx
@@ -0,0 +1,107 @@
+import * as React from "react";
+
+import { ConsoleIcon } from "../..";
+import { css } from "../../styles";
+import { roundedButtonClassName, buttonClassName } from "../../styles/shared";
+import { classNames } from "../../utils/classNames";
+
+import type { Status } from "./SandpackTests";
+
+const wrapperClassName = css({
+  justifyContent: "space-between",
+  borderBottom: "1px solid $colors$surface2",
+  padding: "$space$3 $space$2",
+  fontFamily: "$font$mono",
+  maxHeight: "$layout$headerHeight",
+  overflowX: "auto",
+  whiteSpace: "nowrap",
+});
+
+const flexClassName = css({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "$space$2",
+});
+
+interface Props {
+  setVerbose: () => void;
+  setSuiteOnly: () => void;
+  verbose: boolean;
+  suiteOnly: boolean;
+  status: Status;
+  watchMode: boolean;
+  setWatchMode: () => void;
+  showSuitesOnly: boolean;
+}
+
+export const Header: React.FC<Props> = ({
+  status,
+  suiteOnly,
+  setSuiteOnly,
+  setVerbose,
+  verbose,
+  watchMode,
+  setWatchMode,
+  showSuitesOnly,
+}) => {
+  const buttonsClassName = classNames(
+    buttonClassName,
+    roundedButtonClassName,
+    css({ padding: "$space$1 $space$3" })
+  );
+
+  return (
+    <div className={classNames(wrapperClassName, flexClassName)}>
+      <div className={classNames(flexClassName)}>
+        <p
+          className={classNames(
+            css({
+              lineHeight: 1,
+              margin: 0,
+              color: "$colors$base",
+              fontSize: "$font$size",
+
+              display: "flex",
+              alignItems: "center",
+
+              gap: "$space$2",
+            })
+          )}
+        >
+          <ConsoleIcon />
+          Tests
+        </p>
+      </div>
+
+      <div className={classNames(flexClassName)}>
+        {showSuitesOnly && (
+          <button
+            className={buttonsClassName}
+            data-active={suiteOnly}
+            disabled={status === "initialising"}
+            onClick={setSuiteOnly}
+          >
+            Suite only
+          </button>
+        )}
+        <button
+          className={buttonsClassName}
+          data-active={verbose}
+          disabled={status === "initialising"}
+          onClick={setVerbose}
+        >
+          Verbose
+        </button>
+        <button
+          className={buttonsClassName}
+          data-active={watchMode}
+          disabled={status === "initialising"}
+          onClick={setWatchMode}
+        >
+          Watch
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/sandpack-react/src/components/Tests/RunButton.tsx b/sandpack-react/src/components/Tests/RunButton.tsx
new file mode 100644
index 000000000..22b225ee9
--- /dev/null
+++ b/sandpack-react/src/components/Tests/RunButton.tsx
@@ -0,0 +1,33 @@
+import { useClasser } from "@code-hike/classer";
+import * as React from "react";
+
+import { RunIcon } from "../../icons";
+import { THEME_PREFIX } from "../../styles";
+import {
+  roundedButtonClassName,
+  buttonClassName,
+  iconStandaloneClassName,
+} from "../../styles/shared";
+import { classNames } from "../../utils/classNames";
+
+export const RunButton: React.FC<{
+  onClick: () => void;
+}> = ({ onClick }) => {
+  const c = useClasser(THEME_PREFIX);
+
+  return (
+    <button
+      className={classNames(
+        c("button", "icon-standalone"),
+        buttonClassName,
+        iconStandaloneClassName,
+        roundedButtonClassName
+      )}
+      onClick={onClick}
+      title="Run tests"
+      type="button"
+    >
+      <RunIcon />
+    </button>
+  );
+};
diff --git a/sandpack-react/src/components/Tests/SandpackTests.tsx b/sandpack-react/src/components/Tests/SandpackTests.tsx
new file mode 100644
index 000000000..bdf413aeb
--- /dev/null
+++ b/sandpack-react/src/components/Tests/SandpackTests.tsx
@@ -0,0 +1,455 @@
+import * as React from "react";
+
+import { SandpackStack } from "../../common";
+import { Loading } from "../../common/Loading";
+import { useSandpackTheme, useSandpackClient } from "../../hooks";
+import { css, THEME_PREFIX } from "../../styles";
+import { classNames } from "../../utils/classNames";
+
+import { Header } from "./Header";
+import { RunButton } from "./RunButton";
+import type { Spec } from "./Specs";
+import { Specs } from "./Specs";
+import { Summary } from "./Summary";
+import type { Test } from "./Tests";
+import { failTextClassName, setTestTheme } from "./style";
+import {
+  flatMap,
+  getDuration,
+  getAllTestResults,
+  getAllSuiteResults,
+  splitTail,
+  set,
+} from "./utils";
+
+const previewActionsClassName = css({
+  display: "flex",
+  position: "absolute",
+  bottom: "$space$2",
+  right: "$space$2",
+  zIndex: "$overlay",
+
+  "> *": { marginLeft: "$space$2" },
+});
+
+export type Status = "initialising" | "idle" | "running" | "complete";
+
+interface State {
+  specs: Record<string, Spec>;
+  status: Status;
+  verbose: boolean;
+  watchMode: boolean;
+  suiteOnly: boolean;
+  specsCount: number;
+}
+
+const INITIAL_STATE: State = {
+  specs: {},
+  status: "initialising",
+  verbose: false,
+  watchMode: true,
+  suiteOnly: false,
+  specsCount: 0,
+};
+
+/**
+ * @category Components
+ */
+export const SandpackTests: React.FC<
+  {
+    verbose?: boolean;
+    watchMode?: boolean;
+    onComplete?: (specs: Record<string, Spec>) => void;
+    actionsChildren?: JSX.Element;
+  } & React.HtmlHTMLAttributes<HTMLDivElement>
+> = ({
+  verbose = false,
+  watchMode = true,
+  style,
+  className,
+  onComplete,
+  actionsChildren,
+  ...props
+}) => {
+  const theme = useSandpackTheme();
+  const { getClient, iframe, listen, sandpack } = useSandpackClient();
+
+  const [state, setState] = React.useState<State>({
+    ...INITIAL_STATE,
+    verbose,
+    watchMode,
+  });
+
+  React.useEffect(() => {
+    let currentDescribeBlocks: string[] = [];
+    let currentSpec = "";
+
+    const unsubscribe = listen((data): void => {
+      // Note: short-circuit if message isn't for the currently active spec when `suiteOnly` is true
+      if (
+        state.suiteOnly &&
+        (("path" in data && data.path !== sandpack.activeFile) ||
+          ("test" in data &&
+            "path" in data.test &&
+            data.test.path !== sandpack.activeFile))
+      ) {
+        return;
+      }
+
+      if (
+        data.type === "action" &&
+        data.action === "clear-errors" &&
+        data.source === "jest"
+      ) {
+        currentSpec = data.path;
+        return;
+      }
+
+      if (data.type === "test") {
+        if (data.event === "initialize_tests") {
+          currentDescribeBlocks = [];
+          currentSpec = "";
+          if (state.watchMode) {
+            return runAllTests();
+          } else {
+            return setState((oldState) => ({
+              ...oldState,
+              status: "idle",
+              specs: {},
+            }));
+          }
+        }
+
+        if (data.event === "test_count") {
+          return setState((oldState) => ({
+            ...oldState,
+            specsCount: data.count,
+          }));
+        }
+
+        if (data.event === "total_test_start") {
+          currentDescribeBlocks = [];
+          return setState((oldState) => ({ ...oldState, status: "running" }));
+        }
+
+        if (data.event === "total_test_end") {
+          return setState((oldState) => {
+            if (onComplete !== undefined) {
+              onComplete(oldState.specs);
+            }
+            return {
+              ...oldState,
+              status: "complete",
+            };
+          });
+        }
+
+        if (data.event === "add_file") {
+          return setState(
+            set(["specs", data.path], {
+              describes: {},
+              tests: {},
+              name: data.path,
+            })
+          );
+        }
+
+        if (data.event === "remove_file") {
+          return setState((oldState) => {
+            const specs = Object.entries(oldState.specs).reduce(
+              (acc, [key, value]) => {
+                if (key === data.path) {
+                  return acc;
+                } else {
+                  return { ...acc, [key]: value };
+                }
+              },
+              {}
+            );
+
+            return { ...oldState, specs };
+          });
+        }
+
+        if (data.event === "file_error") {
+          return setState(set(["specs", data.path, "error"], data.error));
+        }
+
+        if (data.event === "describe_start") {
+          currentDescribeBlocks.push(data.blockName);
+          const [describePath, currentDescribe] = splitTail(
+            currentDescribeBlocks
+          );
+          const spec = currentSpec;
+
+          if (currentDescribe === undefined) {
+            return;
+          }
+
+          return setState(
+            set(
+              [
+                "specs",
+                spec,
+                "describes",
+                ...flatMap(describePath, (name) => [name, "describes"]),
+                currentDescribe,
+              ],
+              {
+                name: data.blockName,
+                tests: {},
+                describes: {},
+              }
+            )
+          );
+        }
+
+        if (data.event === "describe_end") {
+          currentDescribeBlocks.pop();
+          return;
+        }
+
+        if (data.event === "add_test") {
+          const [describePath, currentDescribe] = splitTail(
+            currentDescribeBlocks
+          );
+          const test: Test = {
+            status: "idle",
+            errors: [],
+            name: data.testName,
+            blocks: [...currentDescribeBlocks],
+            path: data.path,
+          };
+          if (currentDescribe === undefined) {
+            return setState(
+              set(["specs", data.path, "tests", data.testName], test)
+            );
+          } else {
+            return setState(
+              set(
+                [
+                  "specs",
+                  data.path,
+                  "describes",
+                  ...flatMap(describePath, (name) => [name, "describes"]),
+                  currentDescribe,
+                  "tests",
+                  data.testName,
+                ],
+                test
+              )
+            );
+          }
+        }
+
+        if (data.event === "test_start") {
+          const { test } = data;
+          const [describePath, currentDescribe] = splitTail(test.blocks);
+
+          const startedTest: Test = {
+            status: "running",
+            name: test.name,
+            blocks: test.blocks,
+            path: test.path,
+            errors: [],
+          };
+
+          if (currentDescribe === undefined) {
+            return setState(
+              set(["specs", test.path, "tests", test.name], startedTest)
+            );
+          } else {
+            return setState(
+              set(
+                [
+                  "specs",
+                  test.path,
+                  "describes",
+                  ...flatMap(describePath, (name) => [name, "describes"]),
+                  currentDescribe,
+                  "tests",
+                  test.name,
+                ],
+                startedTest
+              )
+            );
+          }
+        }
+
+        if (data.event === "test_end") {
+          const { test } = data;
+          const [describePath, currentDescribe] = splitTail(test.blocks);
+          const endedTest = {
+            status: test.status,
+            errors: test.errors,
+            duration: test.duration,
+            name: test.name,
+            blocks: test.blocks,
+            path: test.path,
+          };
+
+          if (currentDescribe === undefined) {
+            return setState(
+              set(["specs", test.path, "tests", test.name], endedTest)
+            );
+          } else {
+            return setState(
+              set(
+                [
+                  "specs",
+                  test.path,
+                  "describes",
+                  ...flatMap(describePath, (name) => [name, "describes"]),
+                  currentDescribe,
+                  "tests",
+                  test.name,
+                ],
+                endedTest
+              )
+            );
+          }
+        }
+      }
+    });
+
+    return unsubscribe;
+  }, [state.suiteOnly, state.watchMode, sandpack.activeFile]);
+
+  const runAllTests = (): void => {
+    setState((oldState) => ({
+      ...oldState,
+      status: "running",
+      specs: {},
+    }));
+    const client = getClient();
+    if (client) {
+      client.dispatch({ type: "run-all-tests" });
+    }
+  };
+
+  const runSpec = (): void => {
+    setState((oldState) => ({
+      ...oldState,
+      status: "running",
+      specs: {},
+    }));
+    const client = getClient();
+    if (client) {
+      client.dispatch({ type: "run-tests", path: sandpack.activeFile });
+    }
+  };
+
+  const testFileRegex = /.*\.(test|spec)\.[tj]sx?$/;
+  const isSpecOpen = sandpack.activeFile.match(testFileRegex) !== null;
+
+  React.useEffect(
+    function watchMode() {
+      const unsunscribe = listen(({ type }) => {
+        if (type === "done" && state.watchMode) {
+          if (isSpecOpen) {
+            runSpec();
+          } else {
+            runAllTests();
+          }
+        }
+      });
+
+      return unsunscribe;
+    },
+    [runSpec, runAllTests, state.watchMode, isSpecOpen]
+  );
+
+  const openSpec = (file: string): void => {
+    sandpack.setActiveFile(file);
+  };
+
+  const specs = Object.values(state.specs);
+  const duration = getDuration(specs);
+  const testResults = getAllTestResults(specs);
+  const suiteResults = getAllSuiteResults(specs);
+
+  return (
+    <SandpackStack
+      className={classNames(`${THEME_PREFIX}-tests`, className)}
+      style={{
+        ...setTestTheme(theme.themeMode === "dark"),
+        ...style,
+      }}
+      {...props}
+    >
+      <iframe ref={iframe} style={{ display: "none" }} title="Sandpack Tests" />
+
+      <Header
+        setSuiteOnly={(): void =>
+          setState((s) => ({ ...s, suiteOnly: !s.suiteOnly }))
+        }
+        setVerbose={(): void =>
+          setState((s) => ({ ...s, verbose: !s.verbose }))
+        }
+        setWatchMode={(): void => {
+          setState((s) => ({ ...s, watchMode: !s.watchMode }));
+        }}
+        showSuitesOnly={state.specsCount > 1}
+        status={state.status}
+        suiteOnly={state.suiteOnly}
+        verbose={state.verbose}
+        watchMode={state.watchMode}
+      />
+
+      {state.status === "running" || state.status === "initialising" ? (
+        <Loading showOpenInCodeSandbox={false} />
+      ) : (
+        <div className={previewActionsClassName.toString()}>
+          {actionsChildren}
+          <RunButton onClick={state.suiteOnly ? runSpec : runAllTests} />
+        </div>
+      )}
+
+      <div className={classNames(containerClassName)}>
+        {specs.length === 0 && state.status === "complete" ? (
+          <div className={classNames(fileErrorContainerClassName)}>
+            <p>No test files found.</p>
+            <p>
+              Test match:{" "}
+              <span className={classNames(failTextClassName)}>
+                {testFileRegex.toString()}
+              </span>
+            </p>
+          </div>
+        ) : (
+          <>
+            <Specs
+              openSpec={openSpec}
+              specs={specs}
+              status={state.status}
+              verbose={state.verbose}
+            />
+
+            {state.status === "complete" && testResults.total > 0 && (
+              <Summary
+                duration={duration}
+                suites={suiteResults}
+                tests={testResults}
+              />
+            )}
+          </>
+        )}
+      </div>
+    </SandpackStack>
+  );
+};
+
+const containerClassName = css({
+  padding: "$space$4",
+  height: "100%",
+  overflow: "auto",
+  display: "flex",
+  flexDirection: "column",
+  position: "relative",
+  fontFamily: "$font$mono",
+});
+
+const fileErrorContainerClassName = css({
+  fontWeight: "bold",
+  color: "$colors$base",
+});
diff --git a/sandpack-react/src/components/Tests/Specs.tsx b/sandpack-react/src/components/Tests/Specs.tsx
new file mode 100644
index 000000000..c681e73d8
--- /dev/null
+++ b/sandpack-react/src/components/Tests/Specs.tsx
@@ -0,0 +1,205 @@
+import type { TestError } from "@codesandbox/sandpack-client";
+import * as React from "react";
+
+import { css } from "../../styles";
+import { buttonClassName } from "../../styles/shared";
+import { classNames } from "../../utils/classNames";
+
+import type { Describe } from "./Describes";
+import { Describes } from "./Describes";
+import { FormattedError } from "./FormattedError";
+import type { Status } from "./SandpackTests";
+import { Tests } from "./Tests";
+import {
+  failBackgroundClassName,
+  failTextClassName,
+  passBackgroundClassName,
+  runBackgroundClassName,
+} from "./style";
+import { getFailingTests, getSpecTestResults, isEmpty } from "./utils";
+
+export type Spec = { error?: TestError } & Describe;
+
+interface Props {
+  specs: Spec[];
+  verbose: boolean;
+  status: Status;
+  openSpec: (name: string) => void;
+}
+
+const fileContainer = css({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  marginBottom: "$space$2",
+});
+
+const gapBottomClassName = css({
+  marginBottom: "$space$2",
+});
+
+const failTestClassName = css({
+  fontWeight: "bold",
+});
+
+const labelClassName = css({
+  borderRadius: "calc($border$radius / 2)",
+});
+
+const specLabelClassName = css({
+  padding: "$space$1 $space$2",
+  fontFamily: "$font$mono",
+  textTransform: "uppercase",
+  marginRight: "$space$2",
+});
+
+const filePathButtonClassName = css({
+  fontFamily: "$font$mono",
+  cursor: "pointer",
+  display: "inline-block",
+});
+
+const filePathClassName = css({
+  color: "$colors$clickable",
+  textDecorationStyle: "dotted",
+  textDecorationLine: "underline",
+});
+
+const fileNameClassName = css({
+  color: "$colors$hover",
+  fontWeight: "bold",
+  textDecorationStyle: "dotted",
+  textDecorationLine: "underline",
+});
+
+export const Specs: React.FC<Props> = ({
+  specs,
+  openSpec,
+  status,
+  verbose,
+}) => {
+  return (
+    <>
+      {specs.map((spec) => {
+        if (spec.error) {
+          return (
+            <div key={spec.name} className={classNames(gapBottomClassName)}>
+              <SpecLabel
+                className={classNames(labelClassName, failBackgroundClassName)}
+              >
+                Error
+              </SpecLabel>
+              <FilePath
+                onClick={(): void => openSpec(spec.name)}
+                path={spec.name}
+              />
+              <FormattedError error={spec.error} path={spec.name} />
+            </div>
+          );
+        }
+
+        if (isEmpty(spec)) {
+          return null;
+        }
+
+        const tests = Object.values(spec.tests);
+        const describes = Object.values(spec.describes);
+        const stats = getSpecTestResults(spec);
+
+        return (
+          <div key={spec.name} className={classNames(gapBottomClassName)}>
+            <div className={classNames(fileContainer)}>
+              {status === "complete" ? (
+                stats.fail > 0 ? (
+                  <SpecLabel
+                    className={classNames(
+                      labelClassName,
+                      failBackgroundClassName
+                    )}
+                  >
+                    Fail
+                  </SpecLabel>
+                ) : (
+                  <SpecLabel
+                    className={classNames(
+                      labelClassName,
+                      passBackgroundClassName
+                    )}
+                  >
+                    Pass
+                  </SpecLabel>
+                )
+              ) : (
+                <SpecLabel
+                  className={classNames(labelClassName, runBackgroundClassName)}
+                >
+                  Run
+                </SpecLabel>
+              )}
+
+              <FilePath
+                onClick={(): void => openSpec(spec.name)}
+                path={spec.name}
+              />
+            </div>
+
+            {verbose && <Tests tests={tests} />}
+
+            {verbose && <Describes describes={describes} />}
+
+            {getFailingTests(spec).map((test) => {
+              return (
+                <div
+                  key={`failing-${test.name}`}
+                  className={classNames(gapBottomClassName)}
+                >
+                  <div
+                    className={classNames(failTestClassName, failTextClassName)}
+                  >
+                    ● {test.blocks.join(" › ")} › {test.name}
+                  </div>
+                  {test.errors.map((e) => (
+                    <FormattedError
+                      key={`failing-${test.name}-error`}
+                      error={e}
+                      path={test.path}
+                    />
+                  ))}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+const SpecLabel: React.FC<{ className: string; children: React.ReactNode }> = ({
+  children,
+  className,
+}) => {
+  return (
+    <span className={classNames(specLabelClassName, className)}>
+      {children}
+    </span>
+  );
+};
+
+const FilePath: React.FC<{ onClick: () => void; path: string }> = ({
+  onClick,
+  path,
+}) => {
+  const parts = path.split("/");
+  const basePath = parts.slice(0, parts.length - 1).join("/") + "/";
+  const fileName = parts[parts.length - 1];
+  return (
+    <button
+      className={classNames(buttonClassName, filePathButtonClassName)}
+      onClick={onClick}
+    >
+      <span className={classNames(filePathClassName)}>{basePath}</span>
+      <span className={classNames(fileNameClassName)}>{fileName}</span>
+    </button>
+  );
+};
diff --git a/sandpack-react/src/components/Tests/Summary.tsx b/sandpack-react/src/components/Tests/Summary.tsx
new file mode 100644
index 000000000..9af3a3733
--- /dev/null
+++ b/sandpack-react/src/components/Tests/Summary.tsx
@@ -0,0 +1,97 @@
+import * as React from "react";
+
+import { css } from "../../styles";
+import { classNames } from "../../utils/classNames";
+
+import {
+  failTextClassName,
+  passTextClassName,
+  skipTextClassName,
+} from "./style";
+
+export interface TestResults {
+  pass: number;
+  fail: number;
+  skip: number;
+  total: number;
+}
+
+export interface SuiteResults {
+  pass: number;
+  fail: number;
+  total: number;
+}
+
+interface Props {
+  suites: SuiteResults;
+  tests: TestResults;
+  duration: number;
+}
+
+const gapBottomClassName = css({
+  marginBottom: "$space$2",
+});
+
+const labelClassName = css({
+  fontWeight: "bold",
+  color: "$colors$hover",
+  whiteSpace: "pre-wrap",
+});
+const containerClassName = css({
+  fontWeight: "bold",
+  color: "$colors$clickable",
+});
+
+export const Summary: React.FC<Props> = ({ suites, tests, duration }) => {
+  const widestLabel = "Test suites: ";
+
+  const withMargin = (label: string): string => {
+    const difference = widestLabel.length - label.length;
+    const margin = Array.from({ length: difference }, () => " ").join("");
+    return label + margin;
+  };
+
+  return (
+    <div className={classNames(containerClassName)}>
+      <div className={classNames(gapBottomClassName)}>
+        <span className={classNames(labelClassName)}>{widestLabel}</span>
+        {suites.fail > 0 && (
+          <span className={classNames(failTextClassName)}>
+            {suites.fail} failed,{" "}
+          </span>
+        )}
+        {suites.pass > 0 && (
+          <span className={classNames(passTextClassName)}>
+            {suites.pass} passed,{" "}
+          </span>
+        )}
+        <span>{suites.total} total</span>
+      </div>
+      <div className={classNames(gapBottomClassName)}>
+        <span className={classNames(labelClassName)}>
+          {withMargin("Tests:")}
+        </span>
+        {tests.fail > 0 && (
+          <span className={classNames(failTextClassName)}>
+            {tests.fail} failed,{" "}
+          </span>
+        )}
+        {tests.skip > 0 && (
+          <span className={classNames(skipTextClassName)}>
+            {tests.skip} skipped,{" "}
+          </span>
+        )}
+        {tests.pass > 0 && (
+          <span className={classNames(passTextClassName)}>
+            {tests.pass} passed,{" "}
+          </span>
+        )}
+        <span>{tests.total} total</span>
+      </div>
+      <div className={classNames(labelClassName)}>
+        {withMargin("Time:")}
+        {duration / 1000}s
+      </div>
+    </div>
+  );
+};
diff --git a/sandpack-react/src/components/Tests/Tests.stories.tsx b/sandpack-react/src/components/Tests/Tests.stories.tsx
new file mode 100644
index 000000000..0c1f4fe33
--- /dev/null
+++ b/sandpack-react/src/components/Tests/Tests.stories.tsx
@@ -0,0 +1,276 @@
+import { dracula } from "@codesandbox/sandpack-themes";
+import * as themes from "@codesandbox/sandpack-themes";
+import type { CSSProperties } from "@stitches/core";
+import * as React from "react";
+
+import { SandpackProvider, SandpackLayout, SandpackCodeEditor } from "../..";
+
+import { SandpackTests } from "./";
+
+export default {
+  title: "components/Tests",
+};
+
+const addTests = `import {add} from './add';
+
+test('Root of file test', () => {
+  expect(add(1, 2)).toBe(add(2, 1)); 
+})
+
+describe('extending expect', () => {
+  describe('add', () => {
+    test.skip('Skipped test', () => {
+      expect(true).toBe(false);
+    });
+
+    test('Commutative Law of Addition', () => {
+      expect(add(1, 2)).toBe(add(2, 1));
+    });
+
+    describe('Nested describe block', () => {
+      test('1000 + 1 = 1001', () => {
+        expect(add(1000, 1)).toBe(1001);
+      });  
+
+      describe('Double nested describe block', () => {
+        test('10 + 1 = 11', () => {
+          expect(add(10, 1)).toBe(11);
+        });  
+      });
+    });
+  });
+});
+
+describe('Sibling describe block', () => {
+  test('1 + 1 = 2', () => {
+    expect(add(1, 1)).toBe(2);
+  });  
+});
+
+describe('Empty describe block', () => {});
+`;
+
+const subTests = `import {sub} from './sub';
+
+describe('Subtract', () => {
+  test('1 - 1 = 0', () => {
+    expect(sub(1, 1)).toBe(0);
+  });
+});
+`;
+
+const slowTest = `describe('Slow describe', () => {
+  test('Slow test', async () => {
+    await new Promise(res => setTimeout(res, 2500));
+    expect(true).toBe(false);
+  });
+});
+`;
+
+const failingTests = `describe('Failing describe', () => {
+  test('Failing test', () => {
+    expect(true).toBe(false);
+  });
+});
+`;
+
+const fileErrorTest = `describe('This describe function is missing =>', ()  {
+  test('should never run due to file error', () => {
+    expect(true).toBe(false);
+  });
+});
+`;
+
+const extendedTest = `describe('Jest-extended matchers are supported', () => {
+  test('Without explicit import by using a hidden setup file', () => {
+    expect(true).toBeTrue();
+  });
+});
+`;
+
+const add = "export const add = (a: number, b: number): number => a + b;";
+const sub = "export const sub = (a: number, b: number): number => a - b;";
+
+export const Main: React.FC = () => {
+  const [theme, setTheme] = React.useState("dark");
+  return (
+    <div style={{ width: 800 }}>
+      <SandpackProvider
+        customSetup={{ entry: "add.ts" }}
+        files={{
+          "/add.test.ts": addTests,
+          "/add.ts": add,
+          "/src/app/sub.ts": sub,
+          "/src/app/sub.test.ts": subTests,
+          "/failing.test.ts": failingTests,
+        }}
+        theme={themes[theme] ?? theme}
+      >
+        <SandpackLayout
+          style={{ "--sp-layout-height": "350px" } as CSSProperties}
+        >
+          <SandpackCodeEditor showRunButton={false} showLineNumbers />
+          <SandpackTests />
+        </SandpackLayout>
+      </SandpackProvider>
+
+      <h3>Themes</h3>
+      <select onChange={({ target }): void => setTheme(target.value)}>
+        <option value="auto">Auto</option>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+        {Object.keys(themes).map((tem) => (
+          <option value={tem}>{tem}</option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+export const VerboseMode: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{ entry: "add.ts" }}
+      files={{
+        "/add.test.ts": addTests,
+        "/add.ts": add,
+        "/src/app/sub.ts": sub,
+        "/src/app/sub.test.ts": subTests,
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests verbose />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
+export const OneTestFile: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{ entry: "sub.ts" }}
+      files={{
+        "/sub.ts": sub,
+        "/sub.test.ts": subTests,
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests verbose />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
+export const FileError: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{ entry: "entry.ts" }}
+      files={{
+        "/error.test.ts": fileErrorTest,
+        "/entry.ts": {
+          hidden: true,
+          code: "",
+        },
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
+export const ExtendedExpect: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{
+        entry: "entry.ts",
+        dependencies: { "jest-extended": "*" },
+      }}
+      files={{
+        "/setup.test.ts": {
+          hidden: true,
+          code: "import * as matchers from 'jest-extended';\nexpect.extend(matchers);",
+        },
+        "/extended.test.ts": extendedTest,
+        "/entry.ts": {
+          hidden: true,
+          code: "",
+        },
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
+export const SlowTest: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{ entry: "add.ts" }}
+      files={{
+        "/slow.test.ts": slowTest,
+        "/add.test.ts": addTests,
+        "/slow2.test.ts": slowTest,
+        "/add.ts": add,
+        "/src/app/sub.ts": sub,
+        "/src/app/sub.test.ts": subTests,
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests verbose />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
+export const NoTests: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{ entry: "add.ts" }}
+      files={{
+        "/add.ts": add,
+        "/src/app/sub.ts": sub,
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
+export const OnCompleteHandler: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{ entry: "add.ts" }}
+      files={{
+        "/add.test.ts": addTests,
+        "/add.ts": add,
+        "/src/app/sub.ts": sub,
+        "/src/app/sub.test.ts": subTests,
+        "/failing.test.ts": failingTests,
+      }}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        {/* eslint-disable-next-line no-console */}
+        <SandpackTests onComplete={(specs): void => console.log(specs)} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
diff --git a/sandpack-react/src/components/Tests/Tests.tsx b/sandpack-react/src/components/Tests/Tests.tsx
new file mode 100644
index 000000000..898e82c6a
--- /dev/null
+++ b/sandpack-react/src/components/Tests/Tests.tsx
@@ -0,0 +1,80 @@
+import type { TestError } from "@codesandbox/sandpack-client";
+import React from "react";
+
+import { css } from "../../styles";
+import { classNames } from "../../utils/classNames";
+
+import {
+  failTextClassName,
+  passTextClassName,
+  skipTextClassName,
+} from "./style";
+
+const testContainerClassName = css({
+  marginLeft: "$space$4",
+});
+
+const containerClassName = css({
+  marginBottom: "$space$2",
+  color: "$colors$clickable",
+});
+
+const testClassName = css({
+  marginBottom: "$space$2",
+  color: "$colors$hover",
+});
+
+const durationClassName = css({
+  marginLeft: "$space$2",
+});
+
+const gapRightClassName = css({
+  marginRight: "$space$2",
+});
+
+type TestStatus = "idle" | "running" | "pass" | "fail";
+
+export interface Test {
+  name: string;
+  blocks: string[];
+  status: TestStatus;
+  path: string;
+  errors: TestError[];
+  duration?: number | undefined;
+}
+
+interface SandpackTests extends React.HtmlHTMLAttributes<HTMLDivElement> {
+  tests: Test[];
+}
+
+export const Tests: React.FC<SandpackTests> = ({ tests, style }) => {
+  return (
+    <div className={classNames(testContainerClassName)}>
+      {tests.map((test) => (
+        <div key={test.name} className={classNames(containerClassName)}>
+          {test.status === "pass" && (
+            <span className={classNames(passTextClassName, gapRightClassName)}>
+              ✓
+            </span>
+          )}
+          {test.status === "fail" && (
+            <span className={classNames(failTextClassName, gapRightClassName)}>
+              ✕
+            </span>
+          )}
+          {test.status === "idle" && (
+            <span className={classNames(skipTextClassName, gapRightClassName)}>
+              ○
+            </span>
+          )}
+          <span className={classNames(testClassName)}>{test.name}</span>
+          {test.duration !== undefined && (
+            <span className={classNames(durationClassName)}>
+              ({test.duration} ms)
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/sandpack-react/src/components/Tests/index.tsx b/sandpack-react/src/components/Tests/index.tsx
new file mode 100644
index 000000000..7ef14f5b2
--- /dev/null
+++ b/sandpack-react/src/components/Tests/index.tsx
@@ -0,0 +1 @@
+export { SandpackTests } from "./SandpackTests";
diff --git a/sandpack-react/src/components/Tests/style.ts b/sandpack-react/src/components/Tests/style.ts
new file mode 100644
index 000000000..655e709fa
--- /dev/null
+++ b/sandpack-react/src/components/Tests/style.ts
@@ -0,0 +1,39 @@
+import { css } from "../../styles";
+
+export const setTestTheme = (isDark: boolean): Record<string, string> => ({
+  "--test-pass": isDark ? "#18df16" : "#15c213",
+  "--test-fail": isDark ? "#df162b" : "#c21325",
+  "--test-skip": isDark ? "#eace2b" : "#c2a813",
+  "--test-run": isDark ? "#eace2b" : "#c2a813",
+  "--test-title": isDark ? "#3fbabe" : "#256c6f",
+});
+
+const color = css({
+  variants: {
+    status: {
+      pass: { color: "var(--test-pass)" },
+      fail: { color: "var(--test-fail)" },
+      skip: { color: "var(--test-skip)" },
+      title: { color: "var(--test-title)" },
+    },
+  },
+});
+
+export const passTextClassName = color({ status: "pass" });
+export const failTextClassName = color({ status: "fail" });
+export const skipTextClassName = color({ status: "skip" });
+export const titleTextClassName = color({ status: "title" });
+
+const background = css({
+  variants: {
+    status: {
+      pass: { background: "var(--test-pass)", color: "$colors$surface1" },
+      fail: { background: "var(--test-fail)", color: "$colors$surface1" },
+      run: { background: "var(--test-run)", color: "$colors$surface1" },
+    },
+  },
+});
+
+export const runBackgroundClassName = background({ status: "run" });
+export const passBackgroundClassName = background({ status: "pass" });
+export const failBackgroundClassName = background({ status: "fail" });
diff --git a/sandpack-react/src/components/Tests/utils.ts b/sandpack-react/src/components/Tests/utils.ts
new file mode 100644
index 000000000..e87d9bfed
--- /dev/null
+++ b/sandpack-react/src/components/Tests/utils.ts
@@ -0,0 +1,85 @@
+import cleanSet from "clean-set";
+
+import type { Describe } from "./Describes";
+import type { Spec } from "./Specs";
+import type { SuiteResults, TestResults } from "./Summary";
+import type { Test } from "./Tests";
+
+export const getFailingTests = (block: Describe | Spec): Test[] =>
+  getTests(block).filter((t) => t.status === "fail");
+
+export const getTests = (block: Describe | Spec): Test[] =>
+  Object.values(block.tests).concat(
+    ...Object.values(block.describes).map(getTests)
+  );
+
+export const getAllTestResults = (specs: Spec[]): TestResults =>
+  specs.map(getSpecTestResults).reduce(
+    (acc, stats) => {
+      return {
+        pass: acc.pass + stats.pass,
+        fail: acc.fail + stats.fail,
+        skip: acc.skip + stats.skip,
+        total: acc.total + stats.total,
+      };
+    },
+    { pass: 0, skip: 0, fail: 0, total: 0 }
+  );
+
+export const getSpecTestResults = (spec: Spec): TestResults =>
+  getTests(spec).reduce(
+    (acc, test) => {
+      return {
+        pass: test.status === "pass" ? acc.pass + 1 : acc.pass,
+        fail: test.status === "fail" ? acc.fail + 1 : acc.fail,
+        skip:
+          test.status === "idle" || test.status === "running"
+            ? acc.skip + 1
+            : acc.skip,
+        total: acc.total + 1,
+      };
+    },
+    { pass: 0, fail: 0, skip: 0, total: 0 }
+  );
+
+export const getAllSuiteResults = (specs: Spec[]): SuiteResults =>
+  specs
+    .filter(
+      (spec) =>
+        Object.values(spec.describes).length > 0 ||
+        Object.values(spec.tests).length > 0
+    )
+    .map(getSpecTestResults)
+    .reduce(
+      (acc, stats) => {
+        return {
+          pass: acc.pass + (stats.fail === 0 ? 1 : 0),
+          fail: acc.fail + (stats.fail > 0 ? 1 : 0),
+          total: acc.total + 1,
+        };
+      },
+      { pass: 0, fail: 0, total: 0 }
+    );
+
+export const getDuration = (specs: Spec[]): number =>
+  flatMap(specs, getTests).reduce((acc, test) => acc + (test.duration || 0), 0);
+
+export const isEmpty = (block: Spec | Describe): boolean =>
+  Object.values(block.describes).length === 0 &&
+  Object.values(block.tests).length === 0;
+
+export const splitTail = <A>(as: A[]): [A[], A | undefined] => {
+  const lastIndex = as.length - 1;
+  const head = as.slice(0, lastIndex);
+  const tail = as[lastIndex];
+  return [head, tail];
+};
+
+export const flatMap = <A, B>(as: A[], f: (a: A) => B[]): B[] =>
+  as.map(f).reduce((acc, next) => acc.concat(next), []);
+
+export const set =
+  (path: string[], value: unknown) =>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  <A extends Record<string, any>>(object: A): A =>
+    cleanSet(object, path, value);
diff --git a/sandpack-react/src/components/index.ts b/sandpack-react/src/components/index.ts
index 5b47b8355..433af04f7 100644
--- a/sandpack-react/src/components/index.ts
+++ b/sandpack-react/src/components/index.ts
@@ -6,4 +6,5 @@ export * from "./Navigator";
 export * from "./Preview";
 export * from "./TranspiledCode";
 export * from "./ReactDevTools";
+export * from "./Tests";
 export * from "./Console";
diff --git a/sandpack-react/src/hooks/index.ts b/sandpack-react/src/hooks/index.ts
index d080f080f..a770374af 100644
--- a/sandpack-react/src/hooks/index.ts
+++ b/sandpack-react/src/hooks/index.ts
@@ -5,3 +5,4 @@ export * from "./useSandpack";
 export * from "./useSandpackNavigation";
 export * from "./useSandpackTheme";
 export * from "./useTranspiledCode";
+export * from "./useSandpackClient";
diff --git a/sandpack-react/src/hooks/useSandpackClient.ts b/sandpack-react/src/hooks/useSandpackClient.ts
new file mode 100644
index 000000000..efca07cc5
--- /dev/null
+++ b/sandpack-react/src/hooks/useSandpackClient.ts
@@ -0,0 +1,60 @@
+import type {
+  ListenerFunction,
+  SandpackClient,
+  SandpackMessage,
+  UnsubscribeFunction,
+} from "@codesandbox/sandpack-client";
+import * as React from "react";
+
+import type { SandpackState } from "../types";
+import { generateRandomId } from "../utils/stringUtils";
+
+import { useSandpack } from "./";
+
+interface UseSandpackClient {
+  sandpack: SandpackState;
+  getClient: () => SandpackClient | null;
+  iframe: React.MutableRefObject<HTMLIFrameElement | null>;
+  listen: (listener: ListenerFunction) => UnsubscribeFunction;
+  dispatch: (message: SandpackMessage) => void;
+  clientId: string;
+}
+
+/**
+ * It registers a new sandpack client and returns its instance,
+ * listeners, and dispatch function. Using it when creating a custom
+ * component to interact directly with the client is recommended.
+ * For other cases, use `useSandpack` instead.
+ *
+ * @category Hooks
+ */
+export const useSandpackClient = (): UseSandpackClient => {
+  const { sandpack, listen, dispatch } = useSandpack();
+  const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
+  const clientId = React.useRef<string>(generateRandomId());
+
+  React.useEffect(() => {
+    const iframeElement = iframeRef.current;
+    const clientIdValue = clientId.current;
+
+    if (iframeElement !== null) {
+      sandpack.registerBundler(iframeElement, clientIdValue);
+    }
+
+    return (): void => sandpack.unregisterBundler(clientIdValue);
+  }, []);
+
+  const getClient = (): SandpackClient | null => {
+    return sandpack.clients[clientId.current] || null;
+  };
+
+  return {
+    sandpack,
+    getClient,
+    clientId: clientId.current,
+    iframe: iframeRef,
+    listen: (listener): UnsubscribeFunction =>
+      listen(listener, clientId.current),
+    dispatch: (message): void => dispatch(message, clientId.current),
+  };
+};
diff --git a/sandpack-react/src/presets/Sandpack.stories.tsx b/sandpack-react/src/presets/Sandpack.stories.tsx
index eef9dcccc..654912e04 100644
--- a/sandpack-react/src/presets/Sandpack.stories.tsx
+++ b/sandpack-react/src/presets/Sandpack.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 import { Sandpack } from "../";
+import { REACT_TEMPLATE } from "../templates";
 
 export default {
   title: "presets/Sandpack: options",
@@ -264,3 +265,20 @@ export const FileResolver = (): JSX.Element => {
     </>
   );
 };
+
+export const ShowConsoleButton: React.FC = () => (
+  <div style={{ width: 800 }}>
+    <Sandpack
+      files={{
+        "/index.js": `${REACT_TEMPLATE.files["/index.js"].code}; 
+        
+        console.error("Something went wrong");
+        
+        console.log(function helloWord() {})
+        `,
+      }}
+      options={{ showConsoleButton: true, showConsole: true }}
+      template="test-ts"
+    />
+  </div>
+);
diff --git a/sandpack-react/src/presets/Sandpack.test.tsx b/sandpack-react/src/presets/Sandpack.test.tsx
index 49be86eba..e075dac15 100644
--- a/sandpack-react/src/presets/Sandpack.test.tsx
+++ b/sandpack-react/src/presets/Sandpack.test.tsx
@@ -33,7 +33,7 @@ describe("getSandpackCssText", () => {
       </SandpackProvider>
     );
 
-    expect(getSandpackCssText().length).toBe(3590);
+    expect(getSandpackCssText().length).toBe(4315);
     expect(getSandpackCssText()).not.toContain(componentClassName);
   });
 
diff --git a/sandpack-react/src/presets/Sandpack.tsx b/sandpack-react/src/presets/Sandpack.tsx
index 959eebbdd..567705579 100644
--- a/sandpack-react/src/presets/Sandpack.tsx
+++ b/sandpack-react/src/presets/Sandpack.tsx
@@ -2,19 +2,20 @@
 import type { CSSProperties } from "@stitches/core";
 import * as React from "react";
 
-import { SandpackStack } from "..";
+import { SANDBOX_TEMPLATES, SandpackStack } from "..";
 import { SandpackLayout } from "../common/Layout";
 import type { CodeEditorProps } from "../components/CodeEditor";
 import { SandpackCodeEditor } from "../components/CodeEditor";
 import { SandpackConsole } from "../components/Console";
 import { SandpackPreview } from "../components/Preview";
+import { SandpackTests } from "../components/Tests";
 import { SandpackProvider } from "../contexts/sandpackContext";
 import { ConsoleIcon } from "../icons";
 import { css, THEME_PREFIX } from "../styles";
 import {
   buttonClassName,
   iconStandaloneClassName,
-  actionButtonClassName,
+  roundedButtonClassName,
 } from "../styles/shared";
 import type {
   SandpackInternal,
@@ -96,6 +97,17 @@ export const Sandpack: SandpackInternal = (props) => {
     props.options?.editorHeight
   );
 
+  /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+  const templateFiles = SANDBOX_TEMPLATES[props.template!] ?? {};
+  const mode = "mode" in templateFiles ? templateFiles.mode : "preview";
+
+  const actionsChildren = props.options?.showConsoleButton ? (
+    <ConsoleCounterButton
+      counter={counter}
+      onClick={(): void => setConsoleVisibility((prev) => !prev)}
+    />
+  ) : undefined;
+
   return (
     <SandpackProvider
       customSetup={props.customSetup}
@@ -117,22 +129,26 @@ export const Sandpack: SandpackInternal = (props) => {
 
         {/* @ts-ignore */}
         <RightColumn style={rightColumnStyle}>
-          <SandpackPreview
-            actionsChildren={
-              props.options?.showConsoleButton ? (
-                <ConsoleCounterButton
-                  counter={counter}
-                  onClick={(): void => setConsoleVisibility((prev) => !prev)}
-                />
-              ) : undefined
-            }
-            showNavigator={props.options?.showNavigator}
-            showRefreshButton={props.options?.showRefreshButton}
-            style={{
-              ...rightColumnStyle,
-              height: rightColumnItemHeight(consoleVisibility ? 1.5 : 1),
-            }}
-          />
+          {mode === "preview" && (
+            <SandpackPreview
+              actionsChildren={actionsChildren}
+              showNavigator={props.options?.showNavigator}
+              showRefreshButton={props.options?.showRefreshButton}
+              style={{
+                ...rightColumnStyle,
+                height: rightColumnItemHeight(consoleVisibility ? 1.5 : 1),
+              }}
+            />
+          )}
+          {mode === "tests" && (
+            <SandpackTests
+              actionsChildren={actionsChildren}
+              style={{
+                ...rightColumnStyle,
+                height: rightColumnItemHeight(consoleVisibility ? 1.5 : 1),
+              }}
+            />
+          )}
 
           {(props.options?.showConsoleButton || consoleVisibility) && (
             <div
@@ -162,7 +178,7 @@ const ConsoleCounterButton: React.FC<{
       className={classNames(
         buttonClassName,
         iconStandaloneClassName,
-        actionButtonClassName,
+        roundedButtonClassName,
         buttonCounter
       )}
       onClick={onClick}
@@ -174,15 +190,16 @@ const ConsoleCounterButton: React.FC<{
 };
 
 const getPreviewHeight =
-  (showConsoleButton?: boolean, editorHeight?: CSSProperties["height"]) =>
+  (
+    showConsoleButton?: boolean,
+    editorHeight: CSSProperties["height"] = `var(--${THEME_PREFIX}-layout-height)`
+  ) =>
   (ratio = 2): string | number | undefined => {
     if (showConsoleButton) {
       const height =
         typeof editorHeight === "number" ? `${editorHeight}px` : editorHeight;
 
-      return `calc(${
-        height ?? `var(--${THEME_PREFIX}-layout-height)`
-      } / ${ratio})`;
+      return `calc(${height} / ${ratio})`;
     }
 
     return editorHeight;
diff --git a/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap b/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap
index 03182c043..aabb5cd78 100644
--- a/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap
+++ b/sandpack-react/src/styles/__snapshots__/styles.test.ts.snap
@@ -26,6 +26,7 @@ Object {
     "size": "14px",
   },
   "layout": Object {
+    "headerHeight": "40px",
     "height": "300px",
   },
   "space": Object {
diff --git a/sandpack-react/src/styles/index.ts b/sandpack-react/src/styles/index.ts
index d17fbb91a..f11e7a1dd 100644
--- a/sandpack-react/src/styles/index.ts
+++ b/sandpack-react/src/styles/index.ts
@@ -21,7 +21,7 @@ const defaultVariables = {
     return { ...acc, [index + 1]: `${(index + 1) * 4}px` };
   }, {}),
   border: { radius: "4px" },
-  layout: { height: "300px" },
+  layout: { height: "300px", headerHeight: "40px" },
   transitions: { default: "150ms ease" },
   zIndices: {
     base: "1",
diff --git a/sandpack-react/src/styles/shared.ts b/sandpack-react/src/styles/shared.ts
index 29b247d36..c58822c4a 100644
--- a/sandpack-react/src/styles/shared.ts
+++ b/sandpack-react/src/styles/shared.ts
@@ -15,7 +15,6 @@ export const buttonClassName = css({
   backgroundColor: "transparent",
   transition: "color $default, background $default",
   cursor: "pointer",
-
   color: "$colors$clickable",
 
   "&:disabled": { color: "$colors$disabled" },
@@ -37,14 +36,17 @@ export const buttonClassName = css({
   },
 });
 
-export const actionButtonClassName = css({
+export const roundedButtonClassName = css({
   backgroundColor: "$colors$surface2",
   borderRadius: "99999px",
-  transition: "background $transitions$default, color $transitions$default",
 
-  "&:hover": {
+  '&[data-active="true"]': {
+    color: "$colors$surface1",
+    background: "$colors$accent",
+  },
+
+  "&:hover:not(:disabled,[data-active='true'])": {
     backgroundColor: "$colors$surface3",
-    color: "$colors$hover",
   },
 });
 
diff --git a/sandpack-react/src/templates/Templates.stories.tsx b/sandpack-react/src/templates/Templates.stories.tsx
index 3792da0b1..d2487a6b1 100644
--- a/sandpack-react/src/templates/Templates.stories.tsx
+++ b/sandpack-react/src/templates/Templates.stories.tsx
@@ -10,9 +10,6 @@ const stories = storiesOf("presets/Template", module);
 
 Object.keys(SANDBOX_TEMPLATES).forEach((template) =>
   stories.add(template, () => (
-    <Sandpack
-      options={{ closableTabs: true }}
-      template={template as SandpackPredefinedTemplate}
-    />
+    <Sandpack template={template as SandpackPredefinedTemplate} />
   ))
 );
diff --git a/sandpack-react/src/templates/angular.ts b/sandpack-react/src/templates/angular.ts
index d92f2df7c..06bb8716a 100644
--- a/sandpack-react/src/templates/angular.ts
+++ b/sandpack-react/src/templates/angular.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const ANGULAR_TEMPLATE = {
   files: {
diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx
index a9fd8dff4..526de8c34 100644
--- a/sandpack-react/src/templates/index.tsx
+++ b/sandpack-react/src/templates/index.tsx
@@ -3,6 +3,7 @@ import { REACT_TEMPLATE } from "./react";
 import { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript";
 import { SOLID_TEMPLATE } from "./solid";
 import { SVELTE_TEMPLATE } from "./svelte";
+import { TEST_TYPESCRIPT_TEMPLATE } from "./tests-ts";
 import { VANILLA_TEMPLATE } from "./vanilla";
 import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript";
 import { VUE_TEMPLATE } from "./vue";
@@ -12,6 +13,7 @@ export { REACT_TEMPLATE } from "./react";
 export { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript";
 export { SOLID_TEMPLATE } from "./solid";
 export { SVELTE_TEMPLATE } from "./svelte";
+export { TEST_TYPESCRIPT_TEMPLATE } from "./tests-ts";
 export { VANILLA_TEMPLATE } from "./vanilla";
 export { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript";
 export { VUE_TEMPLATE } from "./vue";
@@ -30,4 +32,5 @@ export const SANDBOX_TEMPLATES = {
   angular: ANGULAR_TEMPLATE,
   svelte: SVELTE_TEMPLATE,
   solid: SOLID_TEMPLATE,
+  "test-ts": TEST_TYPESCRIPT_TEMPLATE,
 };
diff --git a/sandpack-react/src/templates/react-typescript.ts b/sandpack-react/src/templates/react-typescript.ts
index d87b2df50..40403bad2 100644
--- a/sandpack-react/src/templates/react-typescript.ts
+++ b/sandpack-react/src/templates/react-typescript.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const REACT_TYPESCRIPT_TEMPLATE = {
   files: {
diff --git a/sandpack-react/src/templates/react.ts b/sandpack-react/src/templates/react.ts
index 590b0bf89..c4d762d62 100644
--- a/sandpack-react/src/templates/react.ts
+++ b/sandpack-react/src/templates/react.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const REACT_TEMPLATE = {
   files: {
diff --git a/sandpack-react/src/templates/solid.ts b/sandpack-react/src/templates/solid.ts
index 7bbfdb9e8..45419dda7 100644
--- a/sandpack-react/src/templates/solid.ts
+++ b/sandpack-react/src/templates/solid.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const SOLID_TEMPLATE = {
   files: {
diff --git a/sandpack-react/src/templates/svelte.ts b/sandpack-react/src/templates/svelte.ts
index f5b76cd2a..945a61e19 100644
--- a/sandpack-react/src/templates/svelte.ts
+++ b/sandpack-react/src/templates/svelte.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const SVELTE_TEMPLATE = {
   environment: "svelte",
diff --git a/sandpack-react/src/templates/tests-ts.ts b/sandpack-react/src/templates/tests-ts.ts
new file mode 100644
index 000000000..cb1257a5a
--- /dev/null
+++ b/sandpack-react/src/templates/tests-ts.ts
@@ -0,0 +1,40 @@
+/**
+ * @hidden
+ */
+export const TEST_TYPESCRIPT_TEMPLATE = {
+  files: {
+    "tsconfig.json": {
+      code: `{
+  "include": [
+    "./**/*"
+  ],
+  "compilerOptions": {
+    "strict": true,
+    "esModuleInterop": true,
+    "lib": [ "dom", "es2015" ],
+    "jsx": "react-jsx"
+  }
+}`,
+    },
+    "/add.ts": {
+      code: `export const add = (a: number, b: number): number => a + b;`,
+    },
+    "/add.test.ts": {
+      code: `import { add } from './add';
+
+describe('add', () => {
+  test('Commutative Law of Addition', () => {
+    expect(add(1, 2)).toBe(add(2, 1));
+  });
+});`,
+    },
+  },
+  dependencies: {},
+  devDependencies: {
+    typescript: "^4.0.0",
+  },
+  entry: "/add.ts",
+  main: "/add.test.ts",
+  environment: "parcel",
+  mode: "tests",
+};
diff --git a/sandpack-react/src/templates/vanilla-typescript.ts b/sandpack-react/src/templates/vanilla-typescript.ts
index 0e95ac3a6..81a8916f8 100644
--- a/sandpack-react/src/templates/vanilla-typescript.ts
+++ b/sandpack-react/src/templates/vanilla-typescript.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const VANILLA_TYPESCRIPT_TEMPLATE = {
   files: {
diff --git a/sandpack-react/src/templates/vanilla.ts b/sandpack-react/src/templates/vanilla.ts
index ebce0dfa0..3dc0ebcfd 100644
--- a/sandpack-react/src/templates/vanilla.ts
+++ b/sandpack-react/src/templates/vanilla.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const VANILLA_TEMPLATE = {
   files: {
diff --git a/sandpack-react/src/templates/vue.ts b/sandpack-react/src/templates/vue.ts
index 8e2d53f78..ec8bc7955 100644
--- a/sandpack-react/src/templates/vue.ts
+++ b/sandpack-react/src/templates/vue.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const VUE_TEMPLATE = {
   files: {
diff --git a/sandpack-react/src/templates/vue3.ts b/sandpack-react/src/templates/vue3.ts
index 9bf48836c..5533f7e35 100644
--- a/sandpack-react/src/templates/vue3.ts
+++ b/sandpack-react/src/templates/vue3.ts
@@ -1,5 +1,5 @@
 /**
- * @category Template
+ * @hidden
  */
 export const VUE_TEMPLATE_3 = {
   files: {
diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
index a8a998671..e63aa1e03 100644
--- a/sandpack-react/src/types.ts
+++ b/sandpack-react/src/types.ts
@@ -235,6 +235,7 @@ export type SandpackPredefinedTemplate =
   | "angular"
   | "react"
   | "react-ts"
+  | "test-ts"
   | "vanilla"
   | "vanilla-ts"
   | "vue"
diff --git a/website/docs/docs/advanced-usage/components.md b/website/docs/docs/advanced-usage/components.md
index 52680a596..2ac17b631 100644
--- a/website/docs/docs/advanced-usage/components.md
+++ b/website/docs/docs/advanced-usage/components.md
@@ -2,7 +2,8 @@
 sidebar_position: 2
 ---
 
-import { SandpackProvider, SandpackCodeEditor, SandpackCodeViewer, SandpackTranspiledCode, SandpackPreview, SandpackThemeProvider } from "@codesandbox/sandpack-react"
+import { Sandpack as DefaultSandpack, SandpackProvider, SandpackCodeEditor, SandpackCodeViewer, SandpackTranspiledCode, SandpackPreview, SandpackThemeProvider, SandpackTests } from "@codesandbox/sandpack-react"
+import { sandpackDark } from "@codesandbox/sandpack-themes";
 import { Sandpack, SandpackLayout } from "../../src/CustomSandpack"
 import SandpackDecorators from "../../src/examples/Decorators"
 
@@ -40,7 +41,7 @@ const CustomSandpack = () => (
 );
 ```
 
-<SandpackProvider template="react">
+<SandpackProvider template="react" theme={sandpackDark} >
   <SandpackLayout>
     <SandpackCodeEditor />
     <SandpackPreview />
@@ -61,7 +62,7 @@ You can easily swap the two components inside the `SandpackLayout` to get a diff
 </SandpackProvider>
 ```
 
-<SandpackProvider template="react">
+<SandpackProvider template="react" theme={sandpackDark} >
   <SandpackLayout>
     <SandpackPreview />
     <SandpackCodeEditor />
@@ -100,7 +101,7 @@ There's nothing stopping you from rendering multiple previews in the same `Provi
 </SandpackProvider>
 ```
 
-<SandpackProvider template="react">
+<SandpackProvider template="react" theme={sandpackDark} >
   <SandpackLayout>
     <SandpackPreview />
     <SandpackPreview />
@@ -131,7 +132,7 @@ The `<SandpackPreview />` component also allows you to add additional buttons to
 </SandpackProvider>
 ```
 
-<SandpackProvider template="react">
+<SandpackProvider template="react" theme={sandpackDark} >
   <SandpackLayout>
     <SandpackPreview
       actionsChildren={
@@ -185,7 +186,7 @@ Worth mentioning that the SandpackClient will not be instantly available. Sandpa
 This means that it's expected that `getClient` function returns `undefined` which is a valid state.
 :::
 
-## Code Editor
+## Code editor
 
 The `SandpackCodeEditor` component renders a wrapper over [`codemirror`](https://github.com/codemirror/codemirror.next), a lightweight code editor we use inside `sandpack`.
 
@@ -215,7 +216,7 @@ If you played with the `Sandpack` preset, you should be familiar already with th
 </SandpackProvider>
 ```
 
-<SandpackProvider template="react">
+<SandpackProvider template="react" theme={sandpackDark}>
   <SandpackLayout>
     <SandpackCodeEditor
       showTabs
@@ -299,44 +300,116 @@ const App = () => {
 
 This is especially useful to get the cursor's current position, add custom decorators, set the selection in a specific position, etc.
 
-## Code Viewer
+## Tests
 
-For situations when you strictly want to show some code and run it in the browser, you can use the `SandpackCodeViewer` component. It looks similar to the code editor, but it renders a read-only version of `codemirror`, so users will not be able to edit the code.
+The `SandpackTests` component renders a thin wrapper around [`Jest`](https://jestjs.io/) to run tests directly in the browser. This means you can run tests but additional configuration may not possible given the browser environment.
+
+:::info
+Any test files ending with `.test.js(x)`, `.spec.js(x)`, `.test.ts(x)` and `.spec.ts(x)` will automatically be run with Jest and the results shown in the `SandpackTests` component.
+:::
+
+### Usage
+
+There are two ways to run tests and check out the output:
+
+#### Sandpack Preset
+
+Using `test-ts` template preset, which contains an example test.
 
 ```jsx
-import {
-  SandpackProvider,
-  SandpackLayout,
-  SandpackCodeEditor,
-  SandpackCodeViewer,
-  SandpackPreview
-} from "@codesandbox/sandpack-react";
+<Sandpack template="test-ts" />
+```
 
-const CustomSandpack = () => (
-  <SandpackProvider template="react">
-    <SandpackLayout>
-      <SandpackCodeViewer />
-      <SandpackPreview />
-    </SandpackLayout>
-  </SandpackProvider>
-)
+<DefaultSandpack theme={sandpackDark} template="test-ts" />
+
+#### SandpackTests component
+
+Standalone and configurable component to run tests, which you can combine with `test-ts` template or supply custom files. For more details about its usage and implementation, check out the [API reference](/api/react/#sandpacktests).
+
+**Options**
+
+- `verbose`: Display individual test results with the test suite hierarchy.
+- `watchMode`: Watch files for changes and rerun all tests. Note if changing a test file then the current file will run on it's own.
+- `onComplete`: A callback that is invoked with the completed specs.
+
+```jsx
+<SandpackProvider template="test-ts">
+  <SandpackLayout>
+    <SandpackTests />
+    <SandpackCodeEditor />
+  </SandpackLayout>
+</SandpackProvider>
 ```
 
-<SandpackProvider template="react">
+<SandpackProvider template="test-ts" theme={sandpackDark}>
   <SandpackLayout>
-    <SandpackCodeViewer />
-    <SandpackPreview />
+    <SandpackTests />
+    <SandpackCodeEditor />
   </SandpackLayout>
 </SandpackProvider>
 
-### CodeMirror decorations
+### Extending expect
 
-This API provides a way to draw or style a piece of code in the editor content. You can implement it in the following ways:
+:::note
+Although not all configuration is supported, [extending expect](https://jestjs.io/docs/expect#expectextendmatchers) with custom / third party matchers is still possible.
+:::
 
-- Entire line: add `className` or elements attributes to an entire line;
-- Range: add `className` or elements attributes to a piece of content, given a `line`, `startColumn` and `endColumn`;
+Add the matchers either as a dependency or as a file and then import the matchers into your tests and invoke `expect.extend` with your matchers.
+
+```jsx
+const extendedTest = `
+import * as matchers from 'jest-extended';
+import { add } from './add';
+
+expect.extend(matchers);
+
+describe('jest-extended matchers are supported', () => {
+  test('adding two positive integers yields a positive integer', () => {
+    expect(add(1, 2)).toBePositive();
+  });
+});
+`;
+
+<SandpackProvider
+  customSetup={{ dependencies: { "jest-extended": "^3.0.2" } }}
+  files={{ "/extended.test.ts": extendedTest }}
+  template="test-ts"
+>
+  <SandpackLayout>
+    <SandpackCodeEditor />
+    <SandpackTests />
+  </SandpackLayout>
+</SandpackProvider>;
+```
+
+<!-- prettier-ignore -->
+<SandpackProvider
+  theme={sandpackDark}
+  template="test-ts"
+  theme={sandpackDark}
+  customSetup={{ dependencies: { "jest-extended": "^3.0.2" } }}
+  options={{
+    activeFile: "/extended.test.ts",
+    visibleFiles: ["/add.test.ts"]
+  }}
+  files={{
+    "/extended.test.ts": `import * as matchers from 'jest-extended';
+import { add } from './add';\n
+expect.extend(matchers);\n
+describe('jest-extended matchers are supported', () => {
+  test('adding two positive integers yields a positive integer', () => {
+    expect(add(1, 2)).toBePositive();
+  });
+});
+`,
+  }}
+>
+  <SandpackLayout>
+    <SandpackCodeEditor showTabs />
+    <SandpackTests verbose />
+  </SandpackLayout>
+</SandpackProvider>
 
-<SandpackDecorators />
 
 ## Console
 
@@ -345,7 +418,7 @@ This API provides a way to draw or style a piece of code in the editor content.
 Sandpack runs the console directly into the iframe. As a result, all console messages pass through the Sandpack protocol, where you can attach a listener to these messages in your own component or use the proper Sandpack React hook to consume them. 
 
 
-#### Usage 
+### Usage 
 
 There are three ways to print the logs:
 - [`<Sandpack options={{ showConsole: true }} />`](/api/react/interfaces/SandpackOptions#showconsole): shows a panel right after the `SandpackPreview`;
@@ -375,7 +448,7 @@ document.getElementById("app").innerHTML = \`
   options={{ showConsole: true, showConsoleButton: true }} 
 />
 
-#### Limitation
+### Limitation
 
 Considering that `SandpackConsole` is meant to be a light version of a browser console, there are a few limitations in its implementation in order to keep it modular and light:
 - It needs to have a Sandpack client running (iframe) to execute the logs.
@@ -384,6 +457,44 @@ Considering that `SandpackConsole` is meant to be a light version of a browser c
 
 However, if you need to support more advanced cases, [`useSandpackConsole`](/api/react/#usesandpackconsole) hook is compatible with [console-feed](https://www.npmjs.com/package/console-feed), which provides a closer browser-console experience without any of the limitations mentioned above.
 
+## Code Viewer
+
+For situations when you strictly want to show some code and run it in the browser, you can use the `SandpackCodeViewer` component. It looks similar to the code editor, but it renders a read-only version of `codemirror`, so users will not be able to edit the code.
+
+```jsx
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackCodeViewer,
+  SandpackPreview
+} from "@codesandbox/sandpack-react";
+
+const CustomSandpack = () => (
+  <SandpackProvider template="react">
+    <SandpackLayout>
+      <SandpackCodeViewer />
+      <SandpackPreview />
+    </SandpackLayout>
+  </SandpackProvider>
+)
+```
+
+<SandpackProvider template="react" theme={sandpackDark}>
+  <SandpackLayout>
+    <SandpackCodeViewer />
+    <SandpackPreview />
+  </SandpackLayout>
+</SandpackProvider>
+
+### CodeMirror decorations
+
+This API provides a way to draw or style a piece of code in the editor content. You can implement it in the following ways:
+
+- Entire line: add `className` or elements attributes to an entire line;
+- Range: add `className` or elements attributes to a piece of content, given a `line`, `startColumn` and `endColumn`;
+
+<SandpackDecorators />
 
 ## ReactDevTools
 
@@ -474,7 +585,7 @@ const CustomSandpack = () => (
 );
 ```
 
-<SandpackProvider template="react">
+<SandpackProvider template="react" theme={sandpackDark}>
   <SandpackLayout>
     <SandpackCodeEditor />
     <SandpackTranspiledCode />
diff --git a/website/docs/docs/advanced-usage/hooks.md b/website/docs/docs/advanced-usage/hooks.md
index 1b14b0e88..cdefd1299 100644
--- a/website/docs/docs/advanced-usage/hooks.md
+++ b/website/docs/docs/advanced-usage/hooks.md
@@ -193,6 +193,24 @@ const { logs, reset } = useSandpackConsole();
 
 [Check the API reference for more details](/api/react/#usesandpackconsole)
 
+## useSandpackClient
+
+It registers a new sandpack client and returns its instance, listeners, and dispatch function. Using it when creating a custom component to interact directly with the client is recommended. For other cases, use `useSandpack` instead.
+
+[Check the API reference for more details](/api/react/#usesandpackclient)
+
+## useSandpackTheme
+
+It exposes the `theme` object configured on `SandpackContext` and contains an `id` to ensure uniqueness for custom themes. This `theme` object is responsible for distributing all the style configurations for the component thee.
+
+[Check the API reference for more details](/api/react/#usesandpacktheme)
+
+## useTranspiledCode
+
+It returns the transpile module from the bundler, the same one evaluated inside it.
+
+[Check the API reference for more details](/api/react/#usetranspiledcode)
+
 :::success Congrats!
 You can now build your own sandpack-aware components on top of the sandpack custom hooks. The final piece of the puzzle is to understand the `sandpack-client`, the framework agnostic library that we use to manage the access to the bundler.
-:::
\ No newline at end of file
+:::
diff --git a/website/docs/docs/intro.md b/website/docs/docs/intro.md
index d227c8dc1..ed90ada54 100644
--- a/website/docs/docs/intro.md
+++ b/website/docs/docs/intro.md
@@ -25,14 +25,16 @@ deeper into our ecosystem.
 
 <div class="intro-section">
   <IntroCard title="Install" description="Learn how to add Sandpack to your projects and start coding in minutes." href="/docs/getting-started/install" actionText="Access &#8594;" />
+  
+  <IntroCard title="Components" description="A full listing and description of all Sandpack capabilities, such as console, tests and preview components" href="/docs/advanced-usage/components" actionText="Access &#8594;" />
 
   <IntroCard title="Advanced Usage" description="An overview of some Sandpack capabilities and how to extend its API." href="/docs/advanced-usage/provider" actionText="Access &#8594;" />
 
-  <IntroCard title="API reference" description="A full listing and description of the public API exported by the libraries." href="/docs/api/react" actionText="Access &#8594;" />
-
   <IntroCard title="Sandpack Theme Builder" description="Design and customize your own theme, among other Sandpack presets." href="https://sandpack.codesandbox.io/theme" actionText="Try it now" external />
 </div>
 
+
+
 ### Live coding environment in minutes
 
 ```js sandpack
diff --git a/yarn.lock b/yarn.lock
index e442b7e19..ecebd34f7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9975,6 +9975,11 @@ clean-css@^5.1.5, clean-css@^5.2.2, clean-css@^5.3.0:
   dependencies:
     source-map "~0.6.0"
 
+clean-set@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
+  integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"