Are you setting up a new development environment and would like to fill it with sample data instead of it being empty? Or perhaps you want to make sure that your UI looks good when you have more than a few rows in your database?

You could create many rows by yourself, but it is tedious if you want good-looking and numerous results. In this article, we’re going to discover a much better way to seed your database with sample data.

# Install Faker
We’re going to use a library called [Faker](https://fakerjs.dev). It provides helpful functions to generate realistic values in large quantities.

Before we begin, make sure you have a <QuickConvex /> project set up on your machine. If you don't have one already, you can create one using the [Quickstart guide](https://docs.convex.dev/quickstarts).

Then, install Faker using the following command:
```bash
npm install @faker-js/faker
```

# Create an Internal Mutation
I will start by creating a new mutation in my Convex app by writing the following code in a file named `convex/users.ts`:
```typescript
import { internalMutation } from "./_generated/server";

export const createFake = internalMutation(async (ctx) => {
  // …
});
```

Marking the mutation as internal ensures that users of my app can’t call it. I will still be able to call it myself from the dashboard or [the Convex command-line tool](https://docs.convex.dev/cli#run-convex-function).

# Insert Fake Data
Now, we’re ready to start inserting data. You can consult the [Faker documentation](https://fakerjs.dev/api/) to know which data types it can generate:

![The Faker documentation.](https://cdn.sanity.io/images/ts10onj4/production/d0905e01d05b33fcc1dda0f8350d644ea0691e9d-2626x1978.png?w=1400 "The Faker documentation.")

For my project, I need a list of users that each have a name, a company, and an avatar. I will use the corresponding types to create 200 new users:

```typescript
import { faker } from '@faker-js/faker';
import { internalMutation } from "./_generated/server";

export const createFake = internalMutation(async (ctx) => {
  // Initialize Faker with a random value
  faker.seed();

  for (let i = 0; i < 200; i++) {
    await ctx.db.insert("users", {
      name: faker.person.fullName(),
      company: faker.company.name(),
      avatar: faker.image.avatar(),
    });
  }
});
```

In the beginning of the function, we call `faker.seed()` so that Faker generates different data each time we call our function. We need it because Faker initializes its random number generator statically. When using Convex, this will happen every time you push new code, not every time you call a function.

Now that we’ve written our function, we can run it using `npx convex run` in the command line. You can also run it [from the Convex dashboard](https://docs.convex.dev/dashboard/deployments/functions#running-functions) instead.
```
npx convex run users:createFake
```

When opening my `users` table [in the Convex dashboard](https://docs.convex.dev/dashboard/deployments/data), I can see that I’ve successfully created 200 new users:

![My fake users in the dashboard.](https://cdn.sanity.io/images/ts10onj4/production/7b481bcc5fdb38b5e2bfd4a5310711081b3e66c7-3246x1744.png?w=1400 "My fake users in the dashboard.")

And when opening my app, I can see that not only do I see all my fake users, but also that they all have avatars!

![The new users in my sample app.](https://cdn.sanity.io/images/ts10onj4/production/c88cf6d5486033191c9be6aba3017901ae951a16-2538x1564.png?w=1400 "The new users in my sample app.")
# Summary
We’ve seen how to create fake data using the Faker library and use it to create rows in the Convex database. To learn more advanced ways to generate fake data, you can read [the Faker documentation](https://fakerjs.dev/api/).


Learn how to generate fake data for your dev deployments using the Faker library

Testing Your App: How to Generate Fake Data

Oftentimes during testing we want to mock out our backend so we can unit test our UI components without talking to our actual server code.

In this article, we’ll explore options for testing React components that call Convex React hooks using mocking and dependency injection. To do this, I’ve written a sample TypeScript React app using the [Vitest](https://vitest.dev) testing framework. The patterns presented in this post are also applicable to JavaScript apps and other frameworks.

Here, we have a React component that renders a counter value stored in Convex, and provides a button for incrementing the counter value by one.

```typescript
// See the full file here:
// https://github.com/get-convex/convex-helpers/blob/main/src/components/Counter.tsx

const Counter = () => {
  const counter =
    useQuery(api.counter.getCounter, { counterName: "clicks" }) ?? 0;    
  const incrementByOne = useCallback(
    () => increment({ counterName: "clicks", increment: 1 }),
    [increment]
  );

  return (
    <div>
      <p>
        {"Here's the counter:"} {counter}
      </p>
      <button onClick={incrementByOne}>Add One!</button>
    </div>
  );
};

export default Counter;
```

<details>
<summary>Convex function details...</summary>

```typescript
// See the full file here:
// https://github.com/get-convex/convex-helpers/blob/main/convex/counter.ts

import { query } from "./_generated/server";
import { mutation } from "./_generated/server";

const getCounter = query(
  async ({ db }, { counterName }: { counterName: string }): Promise<number> => {
    const counterDoc = await db
      .query("counter_table")
      .filter((q) => q.eq(q.field("name"), counterName))
      .first();
    return counterDoc === null ? 0 : counterDoc.counter;
  }
);

const incrementCounter = mutation(
  async (
    { db },
    { counterName, increment }: { counterName: string; increment: number }
  ) => {
    const counterDoc = await db
      .query("counter_table")
      .filter((q) => q.eq(q.field("name"), counterName))
      .first();
    if (counterDoc === null) {
      await db.insert("counter_table", {
        name: counterName,
        counter: increment,
      });
    } else {
      counterDoc.counter += increment;
      await db.replace(counterDoc._id, counterDoc);
    }
  }
);

export { getCounter, incrementCounter };
```

</details>



Let’s write a test to make sure this component renders the value returned from the query above. Later, we can add more tests, such as ensuring that clicking on the button calls the desired mutation (as seen in the full examples linked in the snippets later in this article).

```typescript
import Counter from "./Counter";
import { render } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";

const setup = () => render(<Counter />);

describe("Counter", () => {
  it("renders the counter", async () => {
    const { getByText } = setup();
    expect(getByText("Here's the counter: 0")).not.toBeNull();
  });
});
```

But wait! This test doesn’t work yet. Since the Counter component invokes Convex queries and mutations, we need some mechanism to replace our Convex functions with fake implementations. If we try to run this test file without doing so, we’ll get an error with the Convex library complaining that a Convex client has not been provided.

## Method 1: Mocking the convex import

This method takes advantage of Vitest’s mock to replace the internal `useQuery` and `useMutation` implementations with versions that call our fake methods defined in the previous code snippet.

```typescript
// See the full file here:
// https://github.com/get-convex/convex-helpers/blob/main/src/components/Counter.mock.test.tsx

import * as convexReact from "convex/react";

vi.mock("convex/react", async () => {
  const actual = await vi.importActual<typeof convexReact>("convex/react");

  return {
    ...actual,

    // Not a typo! useQuery in code calls useQueryGeneric under the hood!
    useQueryGeneric: (queryName: string, args: Record<string, any>) => {
      if (queryName !== "counter:getCounter") {
        throw new Error("Unexpected query call!");
      }
      return getCounter(args as any);
    },
    useMutationGeneric: (mutationName: string) => {
      if (mutationName !== "counter:incrementCounter") {
        throw new Error("Unexpected mutation call!");
      }
      return incrementCounterMock;
    },
  };
});
```

This method requires few dependencies, but may not work in test environments that don’t provide functionality for mocking external libraries. Read on for a cleaner solution!

## Method 2: Using dependency injection to replace the Convex client

Alternatively, we can use dependency injection (AKA having dependencies be arguments to a function, and passing in a different dependency in test vs. our real codebase) to convince the Convex library it’s connected to a real deployment. 

We’ve prepared a version of the `ConvexReactClient` for testing purposes. The code and TypeScript bindings for `ConvexReactClientFake` can be found [here](https://github.com/get-convex/convex-helpers/tree/main/src/fakeConvexClient).

```typescript
// See the full file here:
// https://github.com/get-convex/convex-helpers/blob/main/src/components/Counter.injection.test.tsx

// Initialize the Convex mock client
const fakeClient = new ConvexReactClientFake<API>({
  queries: {
    // Replace getCounter with a simple function that returns a global value
    "counter:getCounter": getCounter,
  },
  mutations: {
    // Replace incrementCounter with a mocked function that can be spied on in tests
    "counter:incrementCounter": incrementCounterMock,
  },
});

// The setup function is different here -- we wrap the Counter in a ConvexProvider
const setup = () =>
  render(
    <ConvexProvider client={fakeClient}>
      <Counter />
    </ConvexProvider>
  );
```

In summary, you can use one of the patterns above to write unit tests for React components that call Convex functions. 

Have a use case that isn’t covered here? Reach out to us on the [Convex community discord](https://convex.dev/community).

Oftentimes during testing we want to mock out our backend so we can unit test our UI components without talking to our actual server code.

In this article, we’ll explore options for testing React components that call Convex React hooks using mocking and dependency injection. To do this, I’ve written a sample TypeScript React app using the Vitest testing framework. The patterns presented in this post are also applicable to other JavaScript apps and frameworks.