Testing Strategy

Relevant source files

The following files were used as context for generating this wiki page:

• jest.config.ts
• tests/api/dispatch.spec.ts
• tests/api/watch.spec.tsx
• package.json
• pages/api/dispatch.ts
• public/mails/email.html

The testing strategy for the heyme project is centered around using the Jest framework to validate the functionality of its backend API and server-side rendering logic. The approach focuses on unit and integration tests to ensure the reliability of key features, such as email generation and data fetching for dynamic pages.

The tests are configured to run in a JSDOM environment, allowing for the simulation of a browser context. The setup utilizes Babel and ts-jest for transpiling TypeScript and JavaScript code, with module path aliasing to maintain clean import statements. The primary focus of the existing tests is on API logic, particularly data processing and server-side props generation, with a clear pattern of mocking external dependencies like database connections.

Testing Framework and Configuration

The project employs Jest as its primary testing framework, orchestrated through npm scripts. The core testing stack includes libraries for rendering, DOM assertions, and TypeScript integration.

Sources: package.json:7, package.json:20-22, package.json:39-44

Scripts

The package.json file defines the following scripts for running tests:

Script	Description
test	Executes all tests using Jest.
test:debug	Runs Jest in a debug mode, allowing for inspection.

Sources: package.json:7-8

Core Dependencies

Package	Role
jest	The core testing framework.
@testing-library/react	Provides utilities for testing React components.
jest-environment-jsdom	Simulates a browser environment (DOM) for tests.
ts-jest	A Jest transformer with source map support for TypeScript.
babel-jest	A Jest transformer for Babel.
@testing-library/jest-dom	Provides custom Jest matchers for asserting on DOM nodes.

Sources: package.json:39-44, package.json:54

Jest Configuration

The Jest configuration is defined in jest.config.ts. It sets up the test environment, code transformation pipeline, and module resolution.

This diagram illustrates the Jest configuration flow.

Key configuration options include:

• testEnvironment: Set to jest-environment-jsdom to provide a DOM environment for tests.
• transform: Uses babel-jest to process .ts, .js, .tsx, and .jsx files.
• preset: Utilizes the ts-jest preset for TypeScript support.
• moduleNameMapper: Configures path aliases to simplify imports in tests, mapping aliases like @/pages to their corresponding directories. It also uses identity-obj-proxy to mock CSS and asset imports.

The following table details the configured module aliases:

Alias	Path
^@/pages(.*)$	<rootDir>/pages/$1
^@/components(.*)$	<rootDir>/components/$1
^@/utils(.*)$	<rootDir>/utils/$1
^@/config(.*)$	<rootDir>/config/$1
^@/lib(.*)$	<rootDir>/lib/$1
.+\.(css|...|woff2)$	identity-obj-proxy

Sources: jest.config.ts:4-18

API and Server-Side Logic Testing

The tests primarily target the application's API endpoints and server-side rendering logic. This is achieved by writing specific test files for different parts of the API.

dispatch API Test

The test file tests/api/dispatch.spec.ts validates the email content generation logic used by the /api/dispatch endpoint.

Sources: tests/api/dispatch.spec.ts

getEmailContent Function Test

This test focuses on the getEmailContent helper function, which is responsible for populating an HTML email template with dynamic data. The test ensures that placeholders within the email.html template are correctly replaced with the provided greeting, body, outro, and watchLink.

The sequence diagram below shows the interaction during the test.

watch Page Test

The test file tests/api/watch.spec.tsx is responsible for testing the server-side data fetching logic of the dynamic watch/[id] page.

Sources: tests/api/watch.spec.tsx

getServerSideProps Logic

This test validates the getServerSideProps function, which fetches video data before rendering the page. A key aspect of this test is the use of jest.mock to isolate the function from external dependencies, specifically the database utility functions fetchVideoById and createMysqlConnection.

The test covers two primary scenarios:

1. Video Found: When fetchVideoById returns video data, the test asserts that getServerSideProps returns the correctly formatted video object within its props.
2. Video Not Found: When fetchVideoById returns null, the test asserts that getServerSideProps returns { notFound: true }, which would trigger a 404 page in Next.js.

The following flowchart illustrates the logic tested in getServerSideProps.

Summary

The testing strategy in heyme is robust for its current scope, effectively using Jest and Testing Library to cover critical server-side logic. It establishes a clear pattern of unit testing helper functions (like getEmailContent) and integration testing data-fetching methods (getServerSideProps) while isolating them from external services through mocking. This ensures that core business logic is reliable and maintainable.