Larry thank you for the response How

hanpolo · 2023-03-06T15:31:30.350Z

Larry, thank you for the response. How close are you with the article? There are a bunch of questions on this. Do you have any code snippets, especially in Typescript?

L

Larry•3/6/23, 3:36 PM

Nothing that I'm able to share at this point. I'll try to work on it today so I at least have a working example to share. I work in pure JavaScript but TypeScript is a superset so should work just fine. In the mean time, what questions do you have?

H

hanpoloOP•3/6/23, 5:16 PM

Here are some questions:
1. My Pages application has its own environment (StencilJS) with its own package.json file and its own Jest setup. miniflare is installed on the node_modules on the root. I have currently put my tsconfig.json in the functions directory. But what do I do with my tests. Do I put my jest.config.js in a separate directory? Do I put my tests there as well? How do I ensure that my jest.config.js does not interfere with my Jest setup for my Pages project.
2. In the workers doc, tests just import handleRequest. But in functions do I import the entire onRequest?
3. How about middleware? Do I have to do anything special here?
4. Local bindings on workers are in a .toml file, but for functions I have to specify them on the command line. Will getMiniflareBindings() recognize these and is there a better way to set these up?

L

Larry•3/6/23, 8:22 PM

I'm not a Jest user. I use vitest instead. The look similar in looking at the miniflare Jest page, but I can't say for sure so I'm going to hedge with me answers.

L

Larry•3/6/23, 8:23 PM

1. For vitest at least, you can have multiple configs. One could have an alternate name than the default. Then, you specify which one you want to use with a parameter to the vitest CLI. I'm guessing Jest is the same. That allows you to put everything wherever you want.

L

Larry•3/6/23, 8:28 PM

2. I'm not sure I understand. My functions only export a single function:

onRequest

onRequest

onRequest

onRequest,

onRequestPost

onRequestPost

onRequestPost

onRequestPost, etc. Import that. You are going call it with the first parameter being a Request object you compose, the second parameter that comes from

getMiniflareBindings()

getMiniflareBindings()

getMiniflareBindings()

getMiniflareBindings() (plus any that you add after you call that), and the third parameter an object you compose yourself if you need it (most of my functions do not).

L

Larry•3/6/23, 8:30 PM

3. I haven't used it to test my custom middleware yet, but I plan to. It's similar except I haven't done the leg work to figure out how to provide everything that middleware needs. Maybe I'll need some custom mocks.

L

Larry•3/6/23, 9:12 PM

4. The miniflare plugin for vitest will pick up on local wrangler.toml settings for testing workers and durable objects. It may also do that for Pages. I haven't tried or read up on it, because I use the vitest.config.ts file to specify my bindings for Pages.

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "miniflare",
    // Configuration is automatically loaded from `.env`, `package.json` and
    // `wrangler.toml` files by default, but you can pass any additional Miniflare
    // API options here:
    environmentOptions: {
      bindings: { KEY: "value" },
      kvNamespaces: ["TEST_NAMESPACE"],
    },
  },
})

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "miniflare",
    // Configuration is automatically loaded from `.env`, `package.json` and
    // `wrangler.toml` files by default, but you can pass any additional Miniflare
    // API options here:
    environmentOptions: {
      bindings: { KEY: "value" },
      kvNamespaces: ["TEST_NAMESPACE"],
    },
  },
})

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "miniflare",
    // Configuration is automatically loaded from `.env`, `package.json` and
    // `wrangler.toml` files by default, but you can pass any additional Miniflare
    // API options here:
    environmentOptions: {
      bindings: { KEY: "value" },
      kvNamespaces: ["TEST_NAMESPACE"],
    },
  },
})

import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    environment: "miniflare",
    // Configuration is automatically loaded from `.env`, `package.json` and
    // `wrangler.toml` files by default, but you can pass any additional Miniflare
    // API options here:
    environmentOptions: {
      bindings: { KEY: "value" },
      kvNamespaces: ["TEST_NAMESPACE"],
    },
  },
})

L

Larry•3/6/23, 9:14 PM

Jest looks to be similar. This is the example jest.config.js on the miniflare Jest documentation page.

export default {
  testEnvironment: "miniflare",
  // Configuration is automatically loaded from `.env`, `package.json` and
  // `wrangler.toml` files by default, but you can pass any additional Miniflare
  // API options here:
  testEnvironmentOptions: {
    bindings: { KEY: "value" },
    kvNamespaces: ["TEST_NAMESPACE"],
  },
};

export default {
  testEnvironment: "miniflare",
  // Configuration is automatically loaded from `.env`, `package.json` and
  // `wrangler.toml` files by default, but you can pass any additional Miniflare
  // API options here:
  testEnvironmentOptions: {
    bindings: { KEY: "value" },
    kvNamespaces: ["TEST_NAMESPACE"],
  },
};

export default {
  testEnvironment: "miniflare",
  // Configuration is automatically loaded from `.env`, `package.json` and
  // `wrangler.toml` files by default, but you can pass any additional Miniflare
  // API options here:
  testEnvironmentOptions: {
    bindings: { KEY: "value" },
    kvNamespaces: ["TEST_NAMESPACE"],
  },
};

export default {
  testEnvironment: "miniflare",
  // Configuration is automatically loaded from `.env`, `package.json` and
  // `wrangler.toml` files by default, but you can pass any additional Miniflare
  // API options here:
  testEnvironmentOptions: {
    bindings: { KEY: "value" },
    kvNamespaces: ["TEST_NAMESPACE"],
  },
};

L

Larry•3/6/23, 9:15 PM

You access those when you call

getMiniflareBindings()

getMiniflareBindings()

getMiniflareBindings()

getMiniflareBindings() from your test code and then pass them into the appropriate position in the call to your handler.

L

Larry•3/6/23, 9:17 PM

After the call to your handler you can inspect the results inside of your test code so they are like high fidelity mocks.

H

hanpoloOP•3/6/23, 11:31 PM

Thanks a bunch, Larry. Looking forward to seeing your article.

Larry thank you for the response How

Similar Threads

Similar Threads

Similar Threads