TripleSpeeder•7mo ago

Error testing file upload

This is probably something stupid on my side... But maybe someone can help 🙂 I'm testing image upload with convex-test. For simplicity i just create a 100 Byte Blob like this:

const image = new Blob([new ArrayBuffer(100)]);
// Store the image in Convex
const storageId = await t.run(async (ctx) => {
   return ctx.storage.store(image);
});

const image = new Blob([new ArrayBuffer(100)]);
// Store the image in Convex
const storageId = await t.run(async (ctx) => {
   return ctx.storage.store(image);
});

However this throws the following error inside store function:

TypeError: blob.arrayBuffer is not a function
    at blobSha (/home/michael/dev/prototest/node_modules/convex-test/dist/index.js:833:36)

TypeError: blob.arrayBuffer is not a function
    at blobSha (/home/michael/dev/prototest/node_modules/convex-test/dist/index.js:833:36)

When I use the blob from a real image it works as expected:

const imageUrl = "https://fakeimg.pl/800x600/";
const response = await fetch(imageUrl);
const image = await response.blob();
// Store the image in Convex
const storageId = await t.run(async (ctx) => {
   return ctx.storage.store(image);
});

const imageUrl = "https://fakeimg.pl/800x600/";
const response = await fetch(imageUrl);
const image = await response.blob();
// Store the image in Convex
const storageId = await t.run(async (ctx) => {
   return ctx.storage.store(image);
});

Any idea what I'm doing wrong when creating the Blob data?

8 Replies

Michal Srb•7mo ago

Do you have the edge runtime configured as shown in step 3? https://docs.convex.dev/functions/testing

Testing | Convex Developer Hub

Automating the testing of your Convex functions is easy.

TripleSpeederOP•7mo ago

No, i have probably vitest defaults. Let me try 🙂 Should the vitest config reside within /convex/ directory? I'm using vitest also for component tests of my frontend code, so my vitest.config.ts in root folder looks like this:

import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./vitest.setup.ts"],
  },
});

import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./vitest.setup.ts"],
  },
});

Michal Srb•7mo ago

I see, you're already using the jsdom environment.

Michal Srb•7mo ago

You'll probably need https://vitest.dev/guide/workspace.html but I know there is an issue with workspaces and convex-test

Vitest

Next generation testing framework powered by Vite

TripleSpeederOP•7mo ago

I can confirm the blob issue us resolved when using the vitest config according to docs. But using the edge-runtime for frontend tests probably is not what I want :-).

Michal Srb•7mo ago

Or use this, that might be much simpler: https://vitest.dev/guide/environment.html#environments-for-specific-files

Vitest

Next generation testing framework powered by Vite

Michal Srb•7mo ago

Or even better: https://vitest.dev/config/#environmentmatchglobs

Vitest

Next generation testing framework powered by Vite

TripleSpeederOP•7mo ago

Yes, this sounds like a good solution. trying 🙂 Yes, it seems to work fine with this config:

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    setupFiles: ["./vitest.setup.ts"],
    environmentMatchGlobs: [
      // all tests in convex/ will run in edge-runtime
      ["convex/**", "edge-runtime"],
      // all other tests use jsdom
      ["**", "jsdom"],
    ],
    server: { deps: { inline: ["convex-test"] } },
  },
});

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  test: {
    globals: true,
    setupFiles: ["./vitest.setup.ts"],
    environmentMatchGlobs: [
      // all tests in convex/ will run in edge-runtime
      ["convex/**", "edge-runtime"],
      // all other tests use jsdom
      ["**", "jsdom"],
    ],
    server: { deps: { inline: ["convex-test"] } },
  },
});