DEV Community

Serif COLAKEL
Serif COLAKEL

Posted on

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

Code Snippets

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,
  });
}
Enter fullscreen mode Exit fullscreen mode

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();
  }
};
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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,
  });
};
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

export const UserSchema = z.object({
  id: z.string().uuid(),
  name: z.string().min(1).max(100),
  email: z.string().email(),
  friends: z.array(
    z.object({
      id: z.string().uuid(),
      name: z.string(),
    })
  ),
});

const mockData = generateMockDataFromSchema(UserSchema);
console.log(mockData);
Enter fullscreen mode Exit fullscreen mode

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 mockData = generateMockDataFromSchema(UserSchema, {
  array: { min: 2, max: 5 },
  optional: { probability: 0.7 },
});
Enter fullscreen mode Exit fullscreen mode

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:

import { UserSchema } from "./schemas";
import { generateMockDataFromSchema } from "./mockDataGenerator";
import { z } from "zod";

describe("Generates mock data for array schema", () => {
  const schema = z.array(z.string());
  const mockData = generateMockDataFromSchema(schema, {
    array: { min: 3, max: 3 },
  });
  expect(mockData).toHaveLength(3);
  expect(mockData.every((item) => typeof item === "string")).toBe(true);
});

describe("generateMockDataFromSchema", () => {
  it("should generate data matching the schema", () => {
    const mockData = generateMockDataFromSchema(UserSchema);
    expect(mockData).toHaveProperty("id");
    expect(typeof mockData.name).toBe("string");
    expect(mockData.friends).toBeInstanceOf(Array);
  });
});

test("Generates valid mock data for UserSchema", () => {
  const userData = generateTestDataFromSchema(UserSchema);
  expect(UserSchema.safeParse(userData).success).toBe(true);
});
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
programmerraja profile image
Boopathi

This is a really helpful guide! I love how you broke down the code into clear sections, making it easy to understand how the helper function works. I'm going to use this in my next project!

Collapse
 
mahmoudalaskalany profile image
Mahmoud Alaskalany

this is very useful ,thank you