Testing & Production Build

Test and deploy the full-stack TypeScript application — unit tests, integration tests, build configuration, and type-checking in CI/CD.

45 min•By Priygop Team•Last updated: Feb 2026

Testing & Deployment

Unit Tests: import { describe, it, expect } from 'vitest'; describe('UserService', () => { it('should create a user', async () => { const user = await service.create({ email: 'test@test.com', name: 'Test', password: 'password123' }); expect(user.email).toBe('test@test.com'); expect(user.id).toBeDefined(); }); })
Mock Types: const mockUserRepository: jest.Mocked<UserRepository> = { findAll: jest.fn(), findById: jest.fn(), create: jest.fn(), update: jest.fn(), delete: jest.fn() }; — TypeScript ensures mock matches the interface exactly. Missing methods cause compile errors
API Testing: const response = await request(app).post('/api/users').send({ email: 'test@test.com', name: 'Test' }); expect(response.status).toBe(201); expect(response.body.data).toMatchObject({ email: 'test@test.com' }) — supertest with typed assertions
Type-Check in CI: 'scripts': { 'typecheck': 'tsc --noEmit', 'lint': 'eslint . --ext .ts,.tsx', 'test': 'vitest run', 'build': 'tsc && vite build' } — typecheck runs the compiler without generating files, catching all type errors before merge
Build Optimization: Server: tsc compiles to JavaScript in dist/. Client: Vite builds optimized bundle with tree-shaking (dead code elimination). Shared: only .d.ts type declarations (no runtime code shipped to client)
Docker Deployment: Multi-stage build — FROM node:20-alpine AS build (install deps, compile TypeScript) → FROM node:20-alpine AS production (copy only dist/ and node_modules, run node dist/server.js). Final image ~150MB vs ~1GB without multi-stage

Try It Yourself: TypeScript Type System

Try It Yourself: TypeScript Type SystemHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html><head>
<style>
  body{font-family:Arial,sans-serif;padding:20px;background:#1e293b;color:#e2e8f0}
  h2{color:#38bdf8}
  .card{background:#0f172a;padding:20px;border-radius:10px;max-width:550px;margin:12px 0}
  .type{background:#1e293b;padding:12px;border-radius:8px;margin:8px 0;border-left:4px solid #38bdf8;font-family:monospace;font-size:13px;line-height:1.6}
  .keyword{color:#c084fc}.typeName{color:#4ade80}.string{color:#fbbf24}
  button{background:#2563eb;color:white;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;margin:4px;font-weight:bold}
  #output{background:#1e293b;padding:12px;border-radius:8px;font-family:monospace;font-size:13px;margin-top:12px;min-height:60px;color:#4ade80}
</style></head><body>
<div class="card">
  <h2>🔷 TypeScript Type Explorer</h2>
  <p style="color:#94a3b8;font-size:14px">Click a pattern to see how TypeScript types work:</p>
  <button onclick="show('interface')">Interface</button>
  <button onclick="show('generic')">Generic</button>
  <button onclick="show('union')">Union Type</button>
  <button onclick="show('utility')">Utility Types</button>
  <button onclick="show('guard')">Type Guard</button>
  <div id="output"></div>
</div>
<script>
const examples={
  interface:'<span class="keyword">interface</span> <span class="typeName">User</span> {
  id: <span class="typeName">number</span>;
  name: <span class="typeName">string</span>;
  email: <span class="typeName">string</span>;
  role: <span class="string">"admin"</span> | <span class="string">"user"</span>;
}

<span class="keyword">const</span> user: <span class="typeName">User</span> = {
  id: 1,
  name: <span class="string">"Alice"</span>,
  email: <span class="string">"alice@example.com"</span>,
  role: <span class="string">"admin"</span>
};',
  generic:'<span class="keyword">function</span> first&lt;<span class="typeName">T</span>&gt;(arr: <span class="typeName">T</span>[]): <span class="typeName">T</span> | undefined {
  <span class="keyword">return</span> arr[0];
}

first([1,2,3]);     <span style="color:#64748b">// type: number</span>
first(["a","b"]);   <span style="color:#64748b">// type: string</span>
first&lt;boolean&gt;([]);  <span style="color:#64748b">// type: boolean</span>',
  union:'<span class="keyword">type</span> <span class="typeName">Result</span>&lt;T&gt; =
  | { success: <span class="typeName">true</span>; data: <span class="typeName">T</span> }
  | { success: <span class="typeName">false</span>; error: <span class="typeName">string</span> };

<span class="keyword">function</span> parse(json: string): <span class="typeName">Result</span>&lt;object&gt; {
  <span class="keyword">try</span> {
    <span class="keyword">return</span> { success: true, data: JSON.parse(json) };
  } <span class="keyword">catch</span> {
    <span class="keyword">return</span> { success: false, error: <span class="string">"Invalid JSON"</span> };
  }
}',
  utility:'<span style="color:#64748b">// Partial — all properties optional</span>
<span class="keyword">type</span> <span class="typeName">Draft</span> = Partial&lt;<span class="typeName">User</span>&gt;;

<span style="color:#64748b">// Pick — select specific properties</span>
<span class="keyword">type</span> <span class="typeName">Credentials</span> = Pick&lt;<span class="typeName">User</span>, <span class="string">"email"</span> | <span class="string">"role"</span>&gt;;

<span style="color:#64748b">// Omit — exclude properties</span>
<span class="keyword">type</span> <span class="typeName">PublicUser</span> = Omit&lt;<span class="typeName">User</span>, <span class="string">"email"</span>&gt;;

<span style="color:#64748b">// Record — key-value mapping</span>
<span class="keyword">type</span> <span class="typeName">Roles</span> = Record&lt;string, <span class="typeName">User</span>[]&gt;;',
  guard:'<span class="keyword">function</span> isString(val: unknown): val <span class="keyword">is</span> <span class="typeName">string</span> {
  <span class="keyword">return typeof</span> val === <span class="string">"string"</span>;
}

<span class="keyword">function</span> process(input: string | number) {
  <span class="keyword">if</span> (isString(input)) {
    console.log(input.toUpperCase());
    <span style="color:#64748b">// TypeScript knows: input is string</span>
  } <span class="keyword">else</span> {
    console.log(input.toFixed(2));
    <span style="color:#64748b">// TypeScript knows: input is number</span>
  }
}'
};
function show(k){document.getElementById('output').innerHTML=examples[k];}
show('interface');
</script></body></html>

<!DOCTYPE html>
<html><head>
<style>
 body{font-family:Arial,sans-serif;padding:20px;background:#1e293b;color:#e2e8f0}
 h2{color:#38bdf8}
 .card{background:#0f172a;padding:20px;border-radius:10px;max-width:550px;margin:12px 0}
 .type{background:#1e293b;padding:12px;border-radius:8px;margin:8px 0;border-left:4px solid #38bdf8;font-family:monospace;font-size:13px;line-height:1.6}
 .keyword{color:#c084fc}.typeName{color:#4ade80}.string{color:#fbbf24}
 button{background:#2563eb;color:white;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;margin:4px;font-weight:bold}
 #output{background:#1e293b;padding:12px;border-radius:8px;font-family:monospace;font-size:13px;margin-top:12px;min-height:60px;color:#4ade80}
</style></head><body>
<div class="card">
 <h2>🔷 TypeScript Type Explorer</h2>
 Click a pattern to see how TypeScript types work:
 <button onclick="show('interface')">Interface</button>
 <button onclick="show('generic')">Generic</button>
 <button onclick="show('union')">Union Type</button>
 <button onclick="show('utility')">Utility Types</button>
 <button onclick="show('guard')">Type Guard</button>
 <div id="output"></div>
</div>
<script>
const examples={
 interface:'interface User {
 id: number;
 name: string;
 email: string;
 role: "admin" | "user";
}

const user: User = {
 id: 1,
 name: "Alice",
 email: "alice@example.com",
 role: "admin"
};',
 generic:'function first&lt;T&gt;(arr: T[]): T | undefined {
 return arr[0];
}

first([1,2,3]); // type: number
first(["a","b"]); // type: string
first&lt;boolean&gt;([]); // type: boolean',
 union:'type Result&lt;T&gt; =
 | { success: true; data: T }
 | { success: false; error: string };

// Pick — select specific properties
type Credentials = Pick&lt;User, "email" | "role"&gt;;

// Omit — exclude properties
type PublicUser = Omit&lt;User, "email"&gt;;

// Record — key-value mapping
type Roles = Record&lt;string, User[]&gt;;',
 guard:'function isString(val: unknown): val is string {
 return typeof val === "string";
}

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|82 lines|4587 chars|✓ Valid syntax

UTF-8

Quick Quiz — TypeScript Full-Stack

Next Module →