Building a TypeScript Helper for Mock Data Generation with Zod and Faker

When building applications, mock data can be invaluable for testing, development, and prototyping. With Zod’s robust schema validation and Faker’s data generation capabilities, we can create a powerful helper to generate realistic, schema-compliant mock data for any Zod schema.

Introduction

In this guide, we’ll create a helper function generateMockDataFromSchema that accepts a Zod schema and returns mock data that matches the schema’s structure and validation rules. Let’s dive in step-by-step!

Article Walkthrough

• Introduction
• Article Walkthrough
• Code Snippets
• Why Use Zod and Faker for Mock Data?
• Creating the Mock Data Generator
  • The generateMockDataFromSchema Helper Function
  • Handling Each Schema Type
    • Strings with Specific Requirements
    • Numeric Values
    • Booleans
    • Arrays
    • Optional and Nullable Fields
    • Objects with Nested Fields
  • Example Usage
  • Adding Customization Options
  • Testing the Helper Function
• Conclusion

Code Snippets

• Mock Data Generator Helper Function
• React Example Stackblitz

Why Use Zod and Faker for Mock Data?

Before we start coding, let’s discuss why Zod and Faker are perfect for this task:

• Zod: Provides a robust, type-safe way to define data schemas in TypeScript. Its schema validation capabilities ensure our mock data complies with specific rules like email formats, UUIDs, or minimum/maximum values.

• Faker: Generates realistic random data such as names, dates, emails, and URLs. This is especially useful when we need mock data that resembles real-world scenarios, making it perfect for testing and demo purposes.

Combining Zod and Faker gives us the ability to create mock data that’s both realistic and schema-compliant.

Creating the Mock Data Generator

The heart of our solution is the generateMockDataFromSchema helper function, which can interpret a Zod schema and generate matching mock data. This function handles various data types (string, number, array, object) and respects validation constraints within each schema type. Let’s explore how it’s built.

 The generateMockDataFromSchema Helper Function

The generateMockDataFromSchema function accepts two parameters:

• schema: A Zod schema that defines the shape and rules for the data.
• options (optional): An object to customize array lengths and optional field behavior.

Here’s the function, broken down into each section to explain the handling of different schema types.

import {
  ZodSchema,
  ZodObject,
  ZodString,
  ZodNumber,
  ZodBoolean,
  ZodArray,
  ZodOptional,
  ZodNullable,
  ZodTypeAny,
  ZodStringCheck,
} from "zod";
import { faker } from "@faker-js/faker";
import { z } from "zod";

const handleStringCheck = (check: ZodStringCheck) => {
  switch (check.kind) {
    case "date":
      return faker.date.recent().toISOString();
    case "url":
      return faker.internet.url();
    case "email":
      return faker.internet.email();
    case "uuid":
    case "cuid":
    case "nanoid":
    case "cuid2":
    case "ulid":
      return crypto.randomUUID();
    case "emoji":
      return faker.internet.emoji();
    default:
      return faker.lorem.word();
  }
};

type GeneratorPrimitiveOptions = {
  array?: {
    min?: number;
    max?: number;
  };
  optional?: {
    probability?: number;
  };
};

const getArrayLength = (options?: GeneratorPrimitiveOptions) => {
  return faker.number.int({
    min: options?.array?.min || 1,
    max: options?.array?.max || 10,
  });
};

export function generateTestDataFromSchema<t>(
  schema: ZodSchema<t>,
  options?: GeneratorPrimitiveOptions
): T {
  if (schema instanceof ZodString) {
    const check = schema._def.checks.find((check) => handleStringCheck(check));
    if (check) {
      return handleStringCheck(check) as T;
    }
    return faker.lorem.word() as T;
  }

  if (schema instanceof ZodNumber) {
    return faker.number.int() as T;
  }

  if (schema instanceof ZodBoolean) {
    return faker.datatype.boolean() as T;
  }

  if (schema instanceof ZodArray) {
    const arraySchema = schema.element;
    const length = getArrayLength(options);
    return Array.from({ length }).map(() =>
      generateTestDataFromSchema(arraySchema)
    ) as T;
  }

  if (schema instanceof ZodOptional || schema instanceof ZodNullable) {
    const probability = options?.optional?.probability || 0.5;
    return (
      Math.random() > probability
        ? generateTestDataFromSchema(schema.unwrap())
        : null
    ) as T;
  }

  if (schema instanceof ZodObject) {
    const shape = schema.shape;
    const result: any = {};
    for (const key in shape) {
      result[key] = generateTestDataFromSchema(shape[key] as ZodTypeAny);
    }
    return result as T;
  }

  throw new Error("Unsupported schema type", {
    cause: schema,
  });
}
</t></t>

Handling Each Schema Type

In generateMockDataFromSchema, each Zod schema type (like ZodString, ZodNumber, etc.) is handled differently to account for its unique requirements. Let’s go through each type.

Strings with Specific Requirements

For ZodString, we need to consider any specific checks like email, url, or uuid. This is where our helper function handleStringCheck comes in. It inspects the string schema and, if any checks are present, returns a relevant mock value (e.g., an email for email, a URL for url). If no specific checks are found, it defaults to generating a random word.

const handleStringCheck = (check: ZodStringCheck) => {
  switch (check.kind) {
    case "date":
      return faker.date.recent().toISOString();
    case "url":
      return faker.internet.url();
    case "email":
      return faker.internet.email();
    case "uuid":
    case "cuid":
    case "nanoid":
    case "cuid2":
    case "ulid":
      return crypto.randomUUID();
    case "emoji":
      return faker.internet.emoji();
    default:
      return faker.lorem.word();
  }
};

In generateMockDataFromSchema, we use this helper to generate data for string fields with checks.

Numeric Values

For ZodNumber, we generate integers with Faker’s faker.number.int() method. This part can be further customized to handle minimum and maximum values if they’re defined in the schema.

if (schema instanceof ZodNumber) {
  return faker.number.int() as T;
}

Booleans

For booleans, Faker offers a simple faker.datatype.boolean() function to randomly generate true or false values.

if (schema instanceof ZodBoolean) {
  return faker.datatype.boolean() as T;
}

Arrays

When dealing with ZodArray, we recursively generate mock data for each element in the array. We also allow customizing the array length using the options parameter.

To generate arrays, we first decide the length using getArrayLength, a helper function that checks for minimum and maximum lengths in the options. For each array element, generateMockDataFromSchema is called recursively, ensuring that nested schemas within arrays are also handled.

type GeneratorPrimitiveOptions = {
  array?: {
    min?: number;
    max?: number;
  };
  optional?: {
    probability?: number;
  };
};

if (schema instanceof ZodOptional || schema instanceof ZodNullable) {
  const probability = options?.optional?.probability || 0.5;
  return (
    Math.random() > probability
      ? generateTestDataFromSchema(schema.unwrap())
      : null
  ) as T;
}

const getArrayLength = (options?: GeneratorPrimitiveOptions) => {
  return faker.number.int({
    min: options?.array?.min || 1,
    max: options?.array?.max || 10,
  });
};

Optional and Nullable Fields

Optional and nullable fields are handled by randomly deciding whether to include them in the output. The options.optional.probability setting allows us to control this probability. If a field is generated, it calls generateMockDataFromSchema recursively for the inner schema.

if (schema instanceof ZodOptional || schema instanceof ZodNullable) {
  const shouldGenerate =
    Math.random() > (options?.optional?.probability || 0.5);
  return shouldGenerate
    ? generateMockDataFromSchema(schema.unwrap(), options)
    : null;
}

Objects with Nested Fields

For ZodObject, we iterate over each key-value pair and recursively generate data for each field. This approach supports deeply nested objects, making it highly flexible.

if (schema instanceof ZodObject) {
  const shape = schema.shape;
  const result: any = {};
  for (const key in shape) {
    result[key] = generateMockDataFromSchema(shape[key] as ZodTypeAny, options);
  }
  return result as T;
}

Example Usage

With generateMockDataFromSchema in place, let’s see it in action. Here’s an example schema, UserSchema, with different types, optional fields, and nested arrays.

import {
  ZodSchema,
  ZodObject,
  ZodString,
  ZodNumber,
  ZodBoolean,
  ZodArray,
  ZodOptional,
  ZodNullable,
  ZodTypeAny,
  ZodStringCheck,
} from "zod";
import { faker } from "@faker-js/faker";
import { z } from "zod";

const handleStringCheck = (check: ZodStringCheck) => {
  switch (check.kind) {
    case "date":
      return faker.date.recent().toISOString();
    case "url":
      return faker.internet.url();
    case "email":
      return faker.internet.email();
    case "uuid":
    case "cuid":
    case "nanoid":
    case "cuid2":
    case "ulid":
      return crypto.randomUUID();
    case "emoji":
      return faker.internet.emoji();
    default:
      return faker.lorem.word();
  }
};

type GeneratorPrimitiveOptions = {
  array?: {
    min?: number;
    max?: number;
  };
  optional?: {
    probability?: number;
  };
};

const getArrayLength = (options?: GeneratorPrimitiveOptions) => {
  return faker.number.int({
    min: options?.array?.min || 1,
    max: options?.array?.max || 10,
  });
};

export function generateTestDataFromSchema<t>(
  schema: ZodSchema<t>,
  options?: GeneratorPrimitiveOptions
): T {
  if (schema instanceof ZodString) {
    const check = schema._def.checks.find((check) => handleStringCheck(check));
    if (check) {
      return handleStringCheck(check) as T;
    }
    return faker.lorem.word() as T;
  }

  if (schema instanceof ZodNumber) {
    return faker.number.int() as T;
  }

  if (schema instanceof ZodBoolean) {
    return faker.datatype.boolean() as T;
  }

  if (schema instanceof ZodArray) {
    const arraySchema = schema.element;
    const length = getArrayLength(options);
    return Array.from({ length }).map(() =>
      generateTestDataFromSchema(arraySchema)
    ) as T;
  }

  if (schema instanceof ZodOptional || schema instanceof ZodNullable) {
    const probability = options?.optional?.probability || 0.5;
    return (
      Math.random() > probability
        ? generateTestDataFromSchema(schema.unwrap())
        : null
    ) as T;
  }

  if (schema instanceof ZodObject) {
    const shape = schema.shape;
    const result: any = {};
    for (const key in shape) {
      result[key] = generateTestDataFromSchema(shape[key] as ZodTypeAny);
    }
    return result as T;
  }

  throw new Error("Unsupported schema type", {
    cause: schema,
  });
}
</t></t>

Adding Customization Options

The generateMockDataFromSchema function also accepts an optional options parameter to customize array lengths and optional field behavior. Here’s an example of how you can use these options:

const handleStringCheck = (check: ZodStringCheck) => {
  switch (check.kind) {
    case "date":
      return faker.date.recent().toISOString();
    case "url":
      return faker.internet.url();
    case "email":
      return faker.internet.email();
    case "uuid":
    case "cuid":
    case "nanoid":
    case "cuid2":
    case "ulid":
      return crypto.randomUUID();
    case "emoji":
      return faker.internet.emoji();
    default:
      return faker.lorem.word();
  }
};

This will ensure array fields have a length between 2 and 5, and optional fields are generated with a 70% probability.

Testing the Helper Function

To confirm that generateMockDataFromSchema works as expected, create unit tests for different schema configurations. Here’s an example of a test for an array schema:

if (schema instanceof ZodNumber) {
  return faker.number.int() as T;
}

By writing tests for various schema types and configurations, you can ensure that the helper function behaves correctly in different scenarios.

Conclusion

By combining Zod and Faker, we’ve created a powerful, reusable mock data generator tailored to TypeScript projects. The ability to test different scenarios and see realistic data in action makes it invaluable for rapid development and quality testing.

The above is the detailed content of Building a TypeScript Helper for Mock Data Generation with Zod and Faker. For more information, please follow other related articles on the PHP Chinese website!